サイトアイコン やっとこブログ

WordPressでh2・h3タグをカスタマイズする方法（テーマ：xeory）

やっとこブログ

ブログを書いていて、hタグの見出しが見づらいな・・見出しがパッと分かりづらいな・・と感じたことはありませんか？

hタグは見出しなので、文章との差別化をしっかりとして、パッと見ただけで、見出しはここで文章はここ・・と分かるようにした方が良いです。

差別化がしっかりとされていないサイトは、せっかく訪れたユーザーも内容を読むことなく離れていってしまいます。

今回変更をするWordPressのテーマ「xeory」では、初期段階で「h2」「h3」タグの見出しは下図のようになっています。

スッキリしていて格好良いのですが、少し薄いグレーを使用しているのでパッと見出しが分かりづらいです。これを下図のようにカスタマイズしていきます。

コアラ
カスタマイズした方が断然みやすいな！

下記で順に「h2」「h3」タグをカスタマイズ方法を紹介するので、読みやすく分かりやすい「見た目の良い」サイトを目指しましょう。

1.見出しの重要性

見出しは読み手にとっても書き手にとっても重要です。

「読み手」にとっては

「書き手」にとっては

「webサイト」にとっても

と、「読み手」にとっても「書き手」にとっても「webサイト」にとっても、良いことがありますので、見た目も中身もしっかりと設定して、正しく使用しましょう。

2.WordPressの設定画面に移動

WordPressの設定画面の左のメニューから、「外観　→　テーマの編集」をクリックします。

「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。

3.変更箇所の検索

キーボードの「ctrl」キーを押しながら「F」キーを押して、検索バーを表示させてから「.post-content h2」と検索します。検索すると下図の箇所が表示されるはずです。

この部分とすぐ下にある「.post-content h3」のCSSをカスタマイズしていきます。

4.CSSのカスタマイズ

場所の検索が完了したら、「h2」と「h3」の見出しのカスタマイズを順に説明していきます。

4-1.「h2」タグのカスタマイズ

先程検索した「.post-content h2」の部分のCSSを変更・追記していきます。

初期設定の「h2」のCSS部分は下記のように設定されています。

.post-content h2 {
  padding:0 0 12px;
  clear: both;
  border-bottom:1px solid #efefef;
}

この部分を下記のように変更します。

.post-content h2 {
  padding: 15px;
  clear: both;
  background-color: #f6f6f6;
  border-left: 5px solid #f2ab13;
}

今回追記するCSSは

上記CSSです。各CSSの指定している箇所は下図のようなイメージです。

引く線の太さを調整すれば、見栄えの良い見出しになります。線の色や背景色は、自分のサイトに合った色にカスタマイズしてください。

コアラ
自分の好みに変更して設定しよう！

 

無事に変更・追記が完了したら、左下にある「ファイルを更新」をクリックして、サイトを確認してみましょう。

変更・追記した内容に間違いがなければ、「h2」を設定した見出しがカスタマイズされているはずです。

4-2.「h3」タグのカスタマイズ

先程検索した「.post-content h2」のすぐ下にある「.post-content h3」部分のCSSを変更・追記していきます。

初期設定の「h3」のCSS部分は下記のように設定されています。

.post-content h3 {
  clear: both;
  border-left: 5px solid #e5e5e5;
  padding: 0 13px;
}

この部分を下記のように変更します。

.post-content h3 {
  clear: both;
  border-bottom: 2px solid #f2ab13;
  padding: 10px 5px;
}

「h3」は「h2」とは別の見た目で、[h2]より目立たなくすると見やすくなると思いますので、今回は初期設定の左側のグレー色を削除して、「h3」の下部分に線を引いていきます。

追記するCSSは

・border-bottom　：　指定した部分の下側に線を引き、太さや色・スタイルを指定する

上記CSSです。各CSSの指定している箇所は下図のようなイメージです。

引く線の太さを調整すれば、「h2」より目立たないが、パッと見ただけで見出しだと分かるようになります。線の色や太さは、自分のサイトに合わせてカスタマイズしてください。

無事に変更・追記が完了したら、「更新をする」をクリックして、サイトを確認してみましょう。

変更・追記内容に間違いがなければ、「h3」を設定した見出しがカスタマイズされているはずです。

5.まとめ

以上で、「WordPressでh2・h3タグをカスタマイズする方法（テーマ：xeory）」の説明は完了です。
一度実際に変更して、変更する場所さえ分かってしまえば、今後「h2」「h3」タグの見出しを変更したい場合にも、すぐにカスタマイズすることが可能です。
今回はやっとこブログの「h2」「h3」タグと同じカスタマイズを紹介しましたが、自分のサイトに合わせて自由に変更してみてください。

 

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

モバイルバージョンを終了