見出し《H3》について
見出し《H3》は《H2》の次によく利用されるタグです。
《H2》は大見出し、《H3》は中見出しとして使用されており、ブログ、Webサイトの記事を書く上では必ずといっていい程に使用されます。
《H2》タグのカスタマイズは以下のリンクを参考にしてください。
Webフォントを利用する場合は「Font Awesome 5」を設定
見た目にWebフォントを採用する場合は「Font Awesome 5」を設定しましょう。
ここでは、Font Awesome 5 を使ったサンプルも公開しています。
Webフォントを利用されてい無い方も、今後、利用される予定があるようでしたら、Font Awesome 5 を設定することをお勧めします。
設定方法について以下のリンクで解説しています。
スタイルシートを追加する方法
一応、ソースコードを追加する手順を解説します。
- 左メニューの「外観」から「テーマファイルエディター」をクリック
- スタイルシート（style.css）にソースコードを記述する
ソースコードを追加する際にはCocoonの子テーマをダウンロードし、子テーマの中の「style.css」にソースコードを追加、編集するようにしましょう。
子テーマ用のスタイルを書くと記載された「必要ならばここにコードを書く」以下にソースコードを追加していきましょう。
見出し《H3》の要素
Cocoonにおける見出し《H3》の要素は以下の通りです。
.article h3{
/*ソースコードを書く*/
}この《article》クラスの中の《h3》タグに要素を追加します。
尚、以下からはサンプルの例（画像）では小見出しと記載されていますが、中見出し《H3》用にカスタマイズしています。
サンプル例「シンプル・イズ・シルバー」
一つ目のサンプル例は「シンプル・イズ・シルバー」
サンプル（ソースコード）の前に画像で示すと、
シルバーをベースに各線の太さだけを変更してみました。
.article h3{
border-left: 7px solid #888;
border-right: 0px solid #ddd;
border-top: 0px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 22px;
padding: 12px 20px;
}サンプル例「ノート」
二つ目のサンプル例は「ノート」
サンプル（ソースコード）の前に画像で示すと、
ノートの一角をイメージしてみました。シンプルで良いと思います。
.article h3{
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
font-size: 22px;
padding: 12px 20px;
}サンプル例「ぴんくもどき」
三つ目のサンプル例は「ぴんくもどき」
サンプル（ソースコード）の前に画像で示すと、
分かりにくですが背景に淡い桃色を使用しています。上下左の線で見出しを囲っています。
.article h3{
border-left: 8px solid #000000;
border-right: 0px solid #000000;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
background-color: #fffafa;
font-size: 22px;
padding: 12px 20px;
}サンプル例「緑ペン」
四つ目のサンプル例は「緑ペン」
サンプル（ソースコード）の前に画像で示すと、
Font Awesome 5 を使ってアイコンを表示しています。
見出しということで緑ペンをイメージしました。
.article h3{
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
font-size: 22px;
padding: 12px 5px;
}
.article h3 span:before{
color:#228b22;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f5b7";
}サンプル例「芝生ノート」
五つ目のサンプル例は「芝生ノート」
サンプル（ソースコード）の前に画像で示すと、
Font Awesome 5 を使ってアイコンを表示し、シンプルに下線だけで表現しました。
.article h3{
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
font-size: 22px;
padding: 12px 5px;
}
.article h3 span:before{
color: #2f4f4f;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f0c5";
}中見出し《H3》をカスタマイズしてみよう！
中見出し《H3》のカスタマイズ方法とサンプルを紹介しました。
見出しにWebフォントを利用するだけで、全体の印象が全く違ってきます。様々なアイコンが用意されているので個性的な見出しが完成すると思います。
もしも、中見出しをカスタマイズしようとお考えの方は参考にしてみてはいかがでしょうか。
コメント