見出しはBlog記事だけではなく、通常の文章でも内容を分かりやすくするために非常に大切です。
しかし私が使っているWordpressテーマ初期設定ではBlog記事の見出しが見にくいと感じたため、より見やすい見出しに変更する方法を調べた。
見出し変更にはプラグインによる方法と、CSS変更による変更があるりますが、今回はCSS変更による方法を行いました。
見出しとは
見出しとは ↑ のことです。
見出しを使用する理由として次のようなものがあります。
- 文章の構造が把握しやすくなる
- 見えやすく、文章の視認性が上がる
変更範囲
今回はBlog記事内の見出しのみ変更し、記事以外の見出し部分は変更されないようにします。
また今回は見出し2~4(つまり<H2> ~ <H4>)までの見出しスタイルを変更します
CSSの変更
記事範囲のclass名を調べる
まず変更したい範囲の div タグのclass名を調べます。
class名を調べる方法はいくつかあると思いますが、今回私はGoogle chromeの デベロッパーツール を使用しました。
方法は次の通りです。
- Blog記事をブラウザで表示し、chromeのデベロッパツール(Google chromeの設定 -> その他のツール -> デベロッパーツール)を起動
- デベロッパツールの Select an element in the page to inspect it を選択
- 変更範囲内が選択されるようにカーソルを記事に移動
- 変更範囲内が選択されたときに表示されつ div.class名 のclass名を記録する
style.css の編集
次に調べたclass名をもとにstyle.css を変更します。
変更方法は次の通りです。
- WORDPRESS設定画面 → 外観 → テーマの編集を選ぶ
- style.css を表示させる。
- style.cssの最下層にコートを追加する
見出し2(h2)を変更するコードの例は次の通りです。
1 2 3 4 5 6 |
.クラス名 h2{ padding: 15px; clear: both; background-color: #fDfDfD; border-left: 5px solid #000000; } |
コード内の クラス名 の部分は先ほど調べた変更範囲のclass名を入れてください。
これを適用すれば、Blog記事内の見出し2の書式が変更されるはずです。
同様に h2 を h3, h4 に変えたものをstyle.cssに書き込めば同様に見出し3、4も変更されます。
変更結果
変更前
変更後
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*entry-content = クラス名*/ .entry-content h2{ padding: 15px; clear: both; background-color: #fDfDfD; border-left: 5px solid #000000; } .entry-content h3 { clear: both; border-bottom: 3px solid #000000; padding: 10px 5px; } .entry-content h4{ clear: both; padding: 10px 5px; } |
まとめ
- 文章をより見やすくするために、見出しを使用する。
- 見出しの見た目を変更するには、style.css にh2やh3のスタイルを記述する。
- 特定の場所のh2・h3を変更する場合には、その見出しのクラス名を調べる。
- クラス名を調べるにはデベロッパツール等を利用すると便利。