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

見出し WordPress・PC

 

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

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

 

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

 

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

 

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

 

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

 

スポンサーリンク

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

見出し一覧

 

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

 

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

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

 

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

 

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

 

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

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

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

 

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

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

 

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

 

スタイルシート(CSS)にコードをコピペするだけ!

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

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

 

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

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

参考記事

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

 

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

参考記事

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

 

見出しのコードを入手

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

 

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

 

このブログでカスタマイズしたのは、「見出し2」、「見出し3」、「見出し4」です。

 

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

 

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

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

 

【見出し2】

<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;
}

 

【見出し3】

<CSSコード>

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

 

【見出し4

<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);
}

 

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

入手したコードをstyle.cssの下図の場所に貼り付けます。

 

 

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

 

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

 

まとめ

記事をはじめて見た時に、見出しがあって知りたいことがぱっと見て分かる方が読者の方にとってありがたいですよね。

なので、見出しの設定は必ずするとして、その見出しをどこまで自分好みにカスタマイズするかですね。デフォルト(標準)のままでよければそれでも構いませんし、もう少しオシャレにしたい方は、上で説明した方法でいろいろ試してみるといいと思います。

 

ネットで検索すれば、オシャレなコードをいくつも公開してくれているありがたい人もいますので。

 

見出しをオシャレにする方法でしたが、参考になれば幸いです。

 

タイトルとURLをコピーしました