見出し《H4》について
見出し《H4》は記事中の小見出しとして利用されています。
大見出しは《H2》、中見出しは《H3》、小見出しは《H4》というように、見出しは小さなタイトルのような役割を持ち、一目見て分かりやすい様に見出し以下の内容を要約したようなものです。
Cocoonの見出し（デフォルト）のデザインは以下の通りです。
今回は、小見出しのデザインをカスタマイズしていきます。
Webアイコン（Font Awesome 5）の設定
小見出しにWebアイコン（フォント）を利用する場合は、Cocoonの設定項目にあるFont Awesome 5を有効にします。
有効にする方法は以下のリンクで解説しています。
ただし、Font Awesome 4に対応したWebアイコンを利用する場合、そして、バージョン４向けのソースコードを正しく書けば、Webアイコン（Font Awesome 4）はそのまま利用することができます。
今回は、Font Awesome 5向けのアイコン、ソースコードを追加してカスタマイズしていきます。
見出し《H4》の要素
小見出し《H4》をカスタマイズする前にどのソースコードを編集すればいいのかを見極めます。
その要素《H4》を探し出すためにはファンクションキー「F12」を押して、該当する箇所を右クリックし、検証を押すことで、右スライドウィンドウに要素が表示されます。
ファンクションキー「F12」キーを利用して、該当するソースコードを見つけ出す方法は以下のリンク先にて解説しています。
Word Pressで小見出しを編集する際の要素は、
.article h4 {
}この要素を編集してカスタマイズしていきます。尚、元々、Cocoonの《H4》に設定されたソースコードは以下の通りです。
.article h4 {
border-top: 2px solid #ddd; /*上線*/
border-bottom: 2px solid #ddd; /*下線*/
}上記のソースコードを編集してデザインを変更していきます。
サンプル例「左線シンプル」
一つ目のサンプル例は「左線シンプル」
サンプル（ソースコード）の前に画像で示すと、
大、中見出しのデザインよりシンプルに…を意識して左のみの線で表現しました。
.article h4 {
border-left:1px solid #000000;
border-bottom: 0px solid #ffffff;
border-top: 0px solid #ffffff;
}サンプル例「下線シンプル」
二つ目のサンプル例は「下線シンプル」
サンプル（ソースコード）の前に画像で示すと、
下線のみというのもシンプルで他の見出しよりも目立たなくて良いかもしれません。
.article h4 {
border-left:0px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px solid #ffffff;
}サンプル例「左線、下点線シンプル」
三つ目のサンプル例は「左線、下点線シンプル」
サンプル（ソースコード）の前に画像で示すと、
少し目立つものの、左線と下点線で表現しました。
.article h4 {
border-left:2px solid #000000;
border-bottom: 1px dashed #808080;
border-top: 0px solid #ffffff;
}サンプル例「左矢印シンプル」
四つ目のサンプル例は「左矢印シンプル」
サンプル（ソースコード）の前に画像で示すと、
Webフォントを利用して小見出しを編集してみました。小見出しだけにシンプルなデザインです。
.article h4 {
border-left:0px solid #000000;
border-bottom: 0px dashed #808080;
border-top: 0px solid #ffffff;
}
.article h4 span:before{
color: #000000;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f105";
}サンプル例「猫の歩く場所」
五つ目のサンプル例は「猫の歩く場所」
サンプル（ソースコード）の前に画像で示すと、
Webアイコンには様々なアイコンが用意されています。猫のアイコン、犬のアイコンと、そのサイトに合ったアイコンを利用することで訪問者の目に見出しが留まりやすくなるかもしれません。
.article h4 {
border-left:0px solid #000000;
border-right: 0px dashed #000000;
border-bottom: 2px dashed #808080;
border-top: 0px solid #ffffff;
}
.article h4 span:before{
color: #008080;
margin-right:7px;
font-size: 25px;
font-family: "Font Awesome 5 Free";
content: "\f6be";
}見出し《H4》をカスタマイズしてみよう！
今回は小見出しと呼ばれる箇所にカスタマイズを加えました。
個人的に、小見出しのデザインは少し派手さを抑えめにした方が良いと思いました。
他の見出しよりも強調しないようなデザインにした方が訪問者からするとサラッと目に留まりやすくなるかもしれません。
もしも、小見出しに編集を加える際には紹介したソースコードを参考にしてカスタマイズしてみてはいかがでしょうか。
コメント