WordPressの見出しをカスタマイズ(装飾デザイン)して記事を見やすくしよう!

記事を見やすくする方法はいくつかありますが、見出しを上手に使うことによって、格段に読みやすくなります。

見出しがあることで、次に書かれている内容について予想がつくからです。

その見出しもWordPressのテーマによって、初期設定されているデザインが異なります。人それぞれの好みもありますが、読者にとって読みやすいデザインの方がいいですよね。

今回は、自分で見出しをカスタマイズする方法について、分かりやすく説明したいと思います。

スタイルシート(CSS)を触りますので、初めての方は多少抵抗があるかもわかりませんが、それほど難しくはありませんので、練習だと思ってやってみてください。

実際に触ってみると、仕組みが少しは理解ができて面白いですよ。

スポンサーリンク

1.見出し2以降の修正

見出し一覧

見出し1は記事タイトルになります。

記事内の見出しについては、見出し2~6を使用します。

カスタマイズするのは、見出し2以降です。

こまでカスタマイズするか人によって異なると思いますが、よく使う見出しをカスタマイズすればよいでしょう。

ちなみに僕は今のところ、見出し2、3、4をカスタマイズして、見出し5、6はそのままです。

2.子テーマの準備

WordPressをカスタマイズする際、通常子テーマを準備してカスタマイズしていきます。

これは、親テーマがアップデートされるとせっかくカスタマイズした内容まで消えてしまうからです。

一方、子テーマでカスタマイズされた内容は親テーマがアップデートされても消えません。

子テーマをインストールする理由と方法についてはこちらの記事をご覧ください。

お使いのテーマによっては、子テーマが用意されていますのでインストールしておきましょう。
(このブログはsimplicity2の子テーマでカスタマイズしています。)

3.スタイルシート(CSS)にコードをコピペ

①スタイルシートを開き、バックアップする。

WordPressの管理画面から[外観]-[テーマの編集]をクリックし、画面右端にある子テーマのstyle.cssを開きます。

この段階のコードをTeraPadなどのエディターにコピペしてバックアップしておくことをおすすめします。万が一、わけがわからなくなっても元に戻せます。

より安全に作業をしたい場合は、ファイル転送ソフトでサーバーからstyle.cssファイルをダウンロードし、コピーした上でファイルを更新し、再度アップロードしてください。

ファイル転送ソフトFileZillaの使い方はこちらの記事をご覧ください。

スタイルシート

②見出しのコードを入手する。

ネットで検索すると、見出しのコードを公開してくれているサイトが見つかります。

例えば、『サルワカ』様のHPには豊富な見出しの種類がありますので、参考にしてみてください。

このブログでカスタマイズした見出しのコードは、以下のとおりですので、お好みの色を変えるなどして使ってみてください。

見出しごとに色を変えるのではなくて、同じ色もしくは似たような色で統一した方が見やすくなるかと思います。

色の見本は『原色大辞典』をご覧ください。

見出し2

<CSSコード>

/* 見出しh2の変更 */
 .article h2 {
 background-color: #339900;
 border-left: 0 none;
 font-size:24px;
 color: #fff;
 padding: 15px 15px;
 }

見出し3

<CSSコード>

/* 見出しh3の変更 */
.article h3 {
 font-size:23px;
 border-bottom:5px solid #339900;
 padding:10px 0;
}

見出し4

<CSSコード>

/* 見出しh4の変更 */
.article h4 {
 font-size: 1.2rem;
 font-weight: 600;
 border-left: 6px solid #339900;
 border-bottom: 0px;
 padding: 5px 0 5px 12px;
}

③コードをスタイルシートに貼り付ける。

入手したコードをstyle.cssの

/* Simplicity子テーマ用のスタイルを書く */

の下に貼り付けます。

cssサンプル

POINT

ビジュアルエディターでもカスタマイズした見出しを反映させるためには、ビジュアルエディターのスタイルシート(editor-style.css)にも貼り付けておきます。

バックアップをとっておくことを忘れずに!

※ビジュアルエディターのスタイルシートを編集する場合、
”.article”の部分を ”body#tinymce.wp-editor”に置き換えてください。

ビジュアルエディター

以上で見出しのカスタマイズは終了です。

投稿画面でカスタマイズした見出しを確認してみてください。

まとめ

記事をはじめて見た時に、見にくいと思われたら内容も読まずにすぐに離れていってしまいます。

少しでも記事を見やすくする工夫をして、まずは内容を読んでもらうことが大切です。

カスタマイズした見出しを上手に使って、記事を見やすくするよう心掛けるとよいと思います。

それでは。