見出しはBlog記事だけではなく、通常の文章でも内容を分かりやすくするために非常に大切です。

しかし私が使っているWordpressテーマ初期設定ではBlog記事の見出しが見にくいと感じたため、より見やすい見出しに変更する方法を調べた。

見出し変更にはプラグインによる方法と、CSS変更による変更があるりますが、今回はCSS変更による方法を行いました。

 

 

見出しとは

見出しとは ↑ のことです。

見出しを使用する理由として次のようなものがあります。

• 文章の構造が把握しやすくなる
• 見えやすく、文章の視認性が上がる

 

変更範囲

今回はBlog記事内の見出しのみ変更し、記事以外の見出し部分は変更されないようにします。

また今回は見出し２～４（つまり<H2> ~ <H4>)までの見出しスタイルを変更します

 

 

CSSの変更

記事範囲のclass名を調べる

まず変更したい範囲の div タグのclass名を調べます。

class名を調べる方法はいくつかあると思いますが、今回私はGoogle chromeの デベロッパーツール を使用しました。

方法は次の通りです。

 

1. Blog記事をブラウザで表示し、chromeのデベロッパツール（Google chromeの設定　-> その他のツール -> デベロッパーツール）を起動
2. デベロッパツールの Select an element in the page to inspect it を選択
3. 変更範囲内が選択されるようにカーソルを記事に移動
4. 変更範囲内が選択されたときに表示されつ div.class名 のclass名を記録する

 

 

 

style.css の編集

次に調べたclass名をもとにstyle.css を変更します。

変更方法は次の通りです。

1. WORDPRESS設定画面　→　外観　→　テーマの編集を選ぶ
2. style.css を表示させる。
3. style.cssの最下層にコートを追加する

 

見出し２(h2)を変更するコードの例は次の通りです。

コード内の クラス名 の部分は先ほど調べた変更範囲のclass名を入れてください。

これを適用すれば、Blog記事内の見出し２の書式が変更されるはずです。

同様に h2 を h3, h4 に変えたものをstyle.cssに書き込めば同様に見出し３、４も変更されます。

変更結果

変更前

変更後

 

 

 

 

 

まとめ

• 文章をより見やすくするために、見出しを使用する。
• 見出しの見た目を変更するには、style.css にh2やh3のスタイルを記述する。
• 特定の場所のh2・h3を変更する場合には、その見出しのクラス名を調べる。
• クラス名を調べるにはデベロッパツール等を利用すると便利。