WordPress記事の見出しの色・デザインを変更してオシャレに！

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

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

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

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

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

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

WordPressの見出しの変更は「見出し２」以降
WordPressの見出しの変更は子テーマで！
スタイルシート（CSS）にコードをコピペするだけ！
まとめ

WordPressの見出しの変更は「見出し２」以降

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

記事内の見出しについては、見出し２～６を使用します。

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

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

ちなみに僕は今のところ、見出し２、３、４をカスタマイズして、見出し５、６はそのままです。

WordPressの見出しの変更は子テーマで！

WordPressをカスタマイズする際、通常「子テーマ」と呼ばれるものを準備してカスタマイズしていきます。

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

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

このあたりのワードプレスの仕組みは、子テーマをインストールする理由と方法をご覧ください。

このブログは、Cocoonというテーマを使っています。もちろん子テーマもインストール済ですので、子テーマのスタイルシートを編集していくことになります。

スタイルシート（CSS）にコードをコピペするだけ！

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

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

この段階のコードをTeraPadなどのエディターにコピペしてバックアップしておくことをおすすめします。

万が一、わけがわからなくなっても元に戻せます。

参考記事

プラグインBackWPupを使ってバックアップする方法

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

参考記事

ファイル転送ソフトFileZillaの使い方

見出しのコードを入手

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

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

このブログでカスタマイズしたのは、「見出し２」、「見出し３」、「見出し４」です。

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

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

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

【見出し２】

＜CSSコード＞

/* 見出しh2の変更 */
.article h2 {
position: relative;
color: #fff;/*文字色*/
padding: 0.7em;
border-radius: 0.2em;/*角丸*/
background: #004d25;/*背景色*/
}

.article h2:after {
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #004d25;/*背景色*/
width: 0;
height: 0;
}

【見出し３】

＜CSSコード＞

/* 見出しh3の変更 */
.article h3 {
border: none;
padding: 0.5em;/*文字周りの余白*/
background: #f7ffef;/*背景色*/
border-left: solid 10px #004d25;/*左線（実線太さ色）*/
}

【見出し４】

＜CSSコード＞

/* 見出しh4の変更 */
.article h4{
border: none;
position: relative;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.3em 1.5em;
border-bottom: 3px solid #89c997;/*下線*/
}
.article h4:before{
content: “”;
position: absolute;
background: #37a34a;/*上側の四角*/
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.article h4:after{
content: “”;
position: absolute;
background:#89c997;/*下側の四角*/
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}