今回の記事では、WordPressテーマ:賢威7の個別記事(投稿)タイトルの文字サイズを変更する方法を紹介していきます。
賢威7では個別記事や固定ページのタイトルだけでなく、サイドバーウィジェットのタイトルをまとめてスタイリングしているので、base.cssに書かれている該当箇所のみの変更だと、サイドバーのタイトルや固定ページタイトルまで一緒に変更されてしまいますが、ここでは他の部分の文字サイズを変更することなく、個別記事の記事タイトルのみを変更していきたいと思います。
カスタマイズ前
↓ カスタマイズ前は、個別記事タイトルは34px
カスタマイズ後
カスタマイズ 1
↓ 文字サイズを46pxに変更(ウィジェットタイトルの文字サイズはそのまま)
カスタマイズ 2
↓ 文字サイズを18pxに変更(ウィジェットタイトルの文字サイズはそのまま)
1. CSSファイルを編集
今回は見た目のみのカスタマイズなので、CSSファイルを編集していきます。
賢威7本体(親テーマ)の base.css ファイルや、子テーマのCSSファイルなど、お使いのCSSファイルに以下のコードを追加します。
.single .main-conts .section-wrap .section-title {font-size: 46px;}
これで個別記事のタイトルのみ、文字サイズを変更することが出来ました。
また、single
というbodyクラスを付けたので、トップページや固定ページなど、個別記事(投稿)のページのみCSSが適用されています。
↓ 固定ページタイトルの文字サイズは、初期設定の34pxのまま変わっていません
bodyクラスについての詳しい説明は、WordPressの公式サイトに載っているので、よかったら参考にして下さい。
ちなみに、.main-conts
部分を外すと、サイドバーのウィジェットまでタイトルの大きさが変わってしまうので、注意が必要です。
(.main-conts
の代わりに .sidebar
というクラスを付ければ、サイドバーに表示されるウィジェットタイトルの色や文字サイズを変更することができます)
2. お好みの文字サイズにするには
先ほどは文字サイズを46pxにしましたが、font-size: ○○px
の○○部分を変えることで、お好みの文字サイズにすることができます。
例えば18pxというかなり小さめの文字サイズにすると、CSSコードは下のようになります。
.single .main-conts .section-wrap .section-title {font-size: 18px;}
↓ あまり現実的な大きさではありませんけど、ちゃんと個別記事のタイトルのみスタイリングされていますね。
46pxや18px以外のについても、これと同じ要領でfont-size:
の後を変更すればお好みの文字サイズにすることができます。
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。