CSS変更によるWORDPRESSの見出しスタイルを変更する方法

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

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

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

 

 

見出しとは

見出しとは のことです。

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

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

 

変更範囲

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

また今回は見出し2~4(つまり<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名を記録する

 

 

class名の特定

 

style.css の編集

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

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

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

 

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

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

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

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

変更結果

変更前

変更前

変更後

 

 

 

変更後

 

 

まとめ

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA