サイドバーのみフォントの大きさを小さくしたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など サイドバーのみフォントの大きさを小さくしたい

このトピックには5件の返信が含まれ、2人の参加者がいます。4 年、 1 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #30667 返信

    鈴木

    お世話になります。

    このフォーラムで同じ内容の質問がないか調べましたが、なかったので質問させていただきます。

    サイドバーのみフォントの大きさを変えたいのですが、スタイルシートにコードを書き込んでも文字が小さくなりません。

    スタイルシートのサイドバーのフォント箇所を修正したくてもH4のところしかフォント調整のコードなかったので修正ができません。

    カスタマイザーでフォントを19pxにしているのですが、これもサイドバーのフォントを変えられない原因になっているのでしょうか?

    もしよければサイドバーのテキストフォントの大きさを変える方法を教えていただきたいです。
    ご多忙の中恐縮ですがよろしくお願いたします。

  • #30671 返信
    わいひら
    わいひら
    キーマスター

    サイドバーのみフォントの大きさを変えたいのですが、スタイルシートにコードを書き込んでも文字が小さくなりません。

    どのように書き込んだのでしょうか?うまくいかなかったコードを書き込んでいただけると、原因がわかることもあります。

    サイドバーのフォントといっても、いろいろな箇所があるのですが、サイドバー内の通常フォントサイズということであれば、変更するには以下のように書けば良いかと思います。

    #sidebar {
        font-size: 14px;
    }

    カスタマイザーでフォントを19pxにしているのですが、これもサイドバーのフォントを変えられない原因になっているのでしょうか?

    関係ないと思います。

    自分で、カスタマイズするCSSセレクタを見つけ出すには、以下の方法のようにまずデベロッパーツールで試してみてください。
    WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

    「デベロッパーツール 使い方」で検索すると、他にもいろいろ出てくるかと思います。

  • #30680 返信

    鈴木

    わいひら様

    ご丁寧な回答をありがとうございます。
    デベロッパーツールの詳しい説明もありがとうございます。勉強させていただきます。

    教えていただいたコードをスタイルシートに挿入してもサイドバーのフォントの大きさは変わりません。

    サイドバーのテキストはウィジェット内の自由テキストで挿入しているためかな?と思っているのですが、ウィジェットの自由テキストとサイドバーのフォントは違うものなのですかね?

    重ね重ね大変申し訳ありません。

  • #30685 返信

    Hidekichi

    おそらくこう言われるでしょう、自由テキストってなんでしょか?と(笑)

    まずデベロッパーツール(F12キー)で、直接各セレクタのプロパティをいじった場合どうなるかを確認する必要がありそうです。

    例えばChromeのツールでは、左側html欄とパネル右側のプロパティ欄で確認できるのですが、左側html欄で#containerを開いていき、#body-inの中に#sidebarはあるかと思います。面倒な場合はCtrl+Fで検索も良いです。

    左側の#sidebarをセレクトすると、右側のプロパティ欄に適応されている値がそれぞれ出てきます。今チラリと見てみると、#sidebarには、

    #sidebar {
        float: right;
        margin-bottom: 30px;
        width: 300px;
    }

    こういう記述がありました。ここなどに直接font-size:19pxと入れると、リアルタイムでブラウザ内のサイト表示が変化するのがわかると思います。更に、その値の右側に、style.css(行数)とが書いてあると思うんですが、そこにマウスオーバーすると、どのファイルから読み込まれているのかがわかります。
    例えば、このstyle.cssがインラインとか、indexと表示してある場合は、htmlに出力されてます。つまりは、headタグのstyleタグ内に書かれているわけです(あるいはタグにstyle=”font-size:xx”など)。

    この場合は、スタイルシートよりも優先されてしまうと思われますので、それを直す方法を考えねばなりません。例えばカスタマイザーではフォントサイズを15pxや16pxに設定して、大きな文字にしたい#sidebar以外のセレクタのフォントサイズを変更するなどです。

    最悪、タグの中にstyle=”font-size:xx”とある場合は、jQueryなどで修正します(その箇所のタグを出力しているPHPを書き変えたりも)。

    jQueryの場合、子テーマjavascript.jsに

    (function($){
      $(function(){
        $("目的のセレクタ").attr("style", "書き変えたいスタイル");
      });
    })(jQuery);

    などで書き換えることも可能です。jQueryやjavascriptはcssより普通は後で読み込まれるので確実に変更できます。指定して書き直す場合は、$.css()を利用します。こちらのがわかりやすいかも。

    $("目的のセレクタ").css({
      font-size: 19 + "px",
      color: "#333"
    });

    など。

  • #30705 返信

    鈴木

    Hidekichi様

    大変分かりやすい回答ありがとうございました。
    1つ1つ確かめながらやってみます。

    回答をいただいたわいひら様にもお礼を申し上げます。
    ご迷惑をおかけしてすいませんでした。

  • #30715 返信
    わいひら
    わいひら
    キーマスター

    サイドバーの特定のウィジェットにちゃんと適用される、CSSを書くには、実際のページのURLを教えていただいて、「このページのこの部分」と教えていただかないと、ちょっと推測ではわからないです。
    そうでないと、やっぱりhidekichiさんの書かれているように、デベロッパーツールで調べていただくしかないかもしれません。

返信先: サイドバーのみフォントの大きさを小さくしたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)