【WordPress】見出しの表示をカスタマイズする方法（超初心者向け）

こんにちは、ふろいどです。

WordPressでのブログ作りは、ただ書いている分にはHTMLやCSS(スタイルシート)の知識も不要でとても便利なのですが、作っているうちにだんだんと自分好みの見栄えに修正したくなってくるもの。
特に、WordPressで文章中に設定する[見出し]の見栄えは文書の読みやすさを大きく左右することから、他のブログを見ていても、皆さん工夫を凝らしてカスタマイズしております。

自分のサイトもカスマイズしたいと思っても「どうやって良いのか全然わからない！」というワタクシのような初心者の方向けに、今回は見出し表示のカスタマイズ方法をご紹介します。

使用しているWordPressのバージョンやテーマによって若干、操作方法は変わるかと思いますが、別の環境でも応用が利くように、どこをどう変えれば良いのかを見つけていく過程についても書いていきたいと思います。

やろうとしていること

今回はブログコンテンツ内で使用頻度の高い[見出し2]〜[見出し4]のカスタマイズしたいと思います。

当サイトではWordPressのテーマに[Simplicity2]を使用しております。
Simplicity2のデフォルトでは[見出し2]〜[見出し4]の以下のような見栄えです。

当サイトの場合は

もう少しカラフルにしたい
[見出し2]は文書の区切りとして浮き立たせたい
[見出し3]と[見出し4]のレベル差を出したい

などの理由から、以下のようにカスタマイズしてみたいと思います。

いかがでしょうか？
色合いもメリハリがついて、少しは見やすくなったのではないでしょうか。

手順で使っている環境

本手順は例として、以下の環境を用いた手順をご説明します。

WordPressバージョン：4.7.4
テーマ　　　　　　　　　：Simplicity2
OS　　　　　　　　　　　　　　:MAC OS X (El Capitan)
ブラウザ　　　　　　　：Google Chrome 58.0.3029.81 (64-bit)

これ以外の環境でも相当する機能や手順が存在することが大半なので、応用は利くと思います。

変更すべきスタイルの確認

見出しの構造

そもそも、WordPressで設定する[見出し１]などの定義は内部的にはどのような定義となっているのでしょうか？

WordPressが生成するWebページは、内部的にはブラウザに読み込ませるためにHTMLという規格で記述されたテキスト情報です。

WordPressで設定した[見出し１]〜[見出し６]はそれぞれ<h1>〜<h6>のタグと</h1>〜</h6>の閉じタグと呼ばれる文字列で囲むことによって、各レベルの見出しであることを表現しています。

例えば、「やろうとしていること」に出てくる[見出し２]は以下のような文字列で表現されています。

<h2>見出しレベル２</h2>

このように<h2>と</h2>タグで囲むことにより、”見出しレベル２”という文字列は[見出し２]として表示するようにブラウザは解釈するのです。

WordPressではブログ記事のタイトルに<h1>タグを使うため、ブログ記事では一般に<h2>〜<h4>あたりがよく使われます。

[見出し２]〜[見出し４]に適用されているスタイルの確認

[見出し２]〜[見出し４]に適用されているスタイルを確認します。

確認方法は既に公開済みの以下の記事を参考にしてください。
【WordPress】HTMLタグに設定されているスタイル要素の確認方法(GoogleChrome編)

上の記事を参考に、[見出し２]〜[見出し４]に設定されたスタイルを確認してみてください。

今回の場合、[見出し２]に相当する<h2>タグでは .article h2という定義が最も後に定義されたスタイルになります。
スタイルシートの定義は上書きする事ができますので、この定義を上書きしてあげれば <h2>で指定された内容を全て上書きして変更することができます。

他の見出しも同じ様に<h3>タグでは .article h3、<h4>タグでは .article h4の定義を上書きしてあげれば見出しの表示を変更可能です。

スタイルの上書き

スタイルシートのカスタマイズはWordPress左側のメニューから[外観]－[テーマの編集]でテーマのカスタマイズ画面に入ります。

Simplicity2の場合、スタイルシート(style.css)に追加でスタイルを定義することにより、カスタマイズが可能となっています。
[スタイルシート(style.css)]のリンクをクリックしてください。

スタイルシートの追加定義を記述する入力欄が出てきます。

ここに追加で.article h2 .article h3 .article h4のスタイルを定義します。
ここに定義したスタイルは、Simplicity2であらかじめ定義されているスタイルを上書きしますので、定義した内容がそのままページに反映されます。
記述したら[ファイルの更新]を押して、変更を反映してください。

今回は以下のように定義しました。

.article h2 {
 background: #ff9900;
 color:#fff;
 font-size:20px;
 border: none;
 margin-top: 2.1em;
 margin-bottom: 1em;
 margin-right: 0px;
 margin-left: 0px;
 border-radius: 3px;
 line-height:100%;
 padding-top: 0.8em;
 padding-bottom: 0.8em;
 padding-right: 0.5em;
 padding-left: 0.5em;
}

.article h3 {
 font-size:20px;
 border-left: none;
 border-bottom:3px solid;
 border-bottom-color: #ff9900;
 margin-top: 1.8em;
}

.article h4 {
 font-size:20px;
 border-left: none;
 border-bottom:none;
 margin-top: 1.8em;
}

個々のスタイルの意味は以下のサイトで調べるのががわかりやすいと思います。

[TAG index] CSSリファレンス

それでは改めて、あなたのサイトを表示してみてください。
どうですか？スタイルが変更されていれば完成です。

皆さんも格好良いサイトにカスタマイズしてみてください！