【Cocoon】見出しのカスタマイズ方法《H2》のデザイン例

見出しとは

見出しは、その項目を一言で分かりやすく説明したもの。

例えるならば、上の「見出しとは」の一言が見出しになります。

Word Pressにおける見出しのタグは<H1><H2><H3>…で統一されています。<H1>はサイトの記事タイトルに利用されており、<H2>は見出しタグの始めに利用されています。

<H2>は必ずといっていい程に利用されている見出しタグで、見出し<H2>に限っては記事タイトルの次に目立つため、優先してカスタマイズされる方もいらっしゃいます。

今回は、見出し<H2>に絞ってデザインの例（サンプル）を紹介していきます。

ソースコード（スタイルシート）を編集する手順

まずは、ソースコードを編集、追加する手順を解説します。

1. 左メニューの「外観」から「テーマファイルエディター」をクリック
2. スタイルシート（style.css）にソースコードを記述する

ソースコードを編集するにはCocoonの子テーマをダウンロードし、子テーマの中の「style.css」にソースコードを追加、編集します。

子テーマ用のスタイルを書くと記載された「以下の欄」にソースコードを追加していきましょう。

サンプル例「黒いノート」

一つ目のサンプル例は「黒いノート」

サンプル（ソースコード）の前に画像で示すと、

黒いノートは「白」と「黒」のコラボレーション。

背景を白く見せることで見出しの文章が自然と強調されています。

.article h2{
    font-size: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-bottom:solid 1px #000000;
    border-left: solid 6px #000000;
    border-radius: 2px;
}

サンプル例「青いノート」

二つ目のサンプル例は「青いノート」

サンプル（ソースコード）の前に画像で示すと、

青いノートは「青」と「白」と「黒」のコラボレーション。

背景を白く見せて見出しの文章を強調し、太い青線を見出し始めに置くことで始めの文字が視界に映りやすくなります。

また、ただの黒い線では無く、破線を利用することで点と点の間に空白ができます。この空白が文章の窮屈さを無くし、より自然に見出しを強調させることができます。

.article h2{
	font-size: 24px;
        padding: 20px;
        background-color: #ffffff;
	border-bottom:dashed 1px #000000;
	border-left: solid 6px #1e90ff;
        border-radius: 2px;
}

サンプル例「赤いノート」

三つ目のサンプル例は「赤いノート」

サンプル（ソースコード）の前に画像で示すと、

赤いノートは「赤」と「白」と「黒」のコラボレーション。

左に太い線、上下に点線を設置しました。

一度、四隅を線で囲ってみたものの、窮屈になったので左、上、下のみを点線、太線で見出しを囲うようにしてみました。

.article h2{
	font-size: 24px;
        padding: 20px;
        background-color: #ffffff;
	border-top:dashed 1px #000000;
	border-bottom:dashed 1px #000000;
	border-left: solid 2px #dc143c;
        border-radius: 2px;
}

サンプル例「マリンブルー」

四つ目のサンプル例は「マリンブルー」

サンプル（ソースコード）の前に画像で示すと、

マリンブルーは「淡青」と「薄青」と「黒」のコラボレーション。

背景を青色にしてみたものの、文字が目立たなくなったので薄い青色へと設定し、上下に黒線、左に見出しを強調するための太い線を配置してみました。

.article h2{
	font-size: 24px;
        padding: 20px;
        background-color: #f5fffa;
	border-top:solid 1px #000000;
	border-bottom:solid 1px #000000;
	border-left: solid 6px #008b8b;
        border-radius: 2px;
}

サンプル例「みかんの木」

五つ目のサンプル例は「みかんの木」

サンプル（ソースコード）の前に画像で示すと、

みかんの木は「橙色」と「灰色」のコラボレーション。

シンプルだけど中々良い感じ。

背景色はCocoonの見出しに設定されていた元々の値を活用しています。

.article h2{
	font-size: 24px;
        padding: 20px;
	border-left: solid 6px #f4a460;
        border-radius: 2px;
}

見出し<H2>をカスタマイズしてみよう！

今回は、シンプルな見出しを作成してみました。

ソースコードに関してもコピー＆ペーストで利用頂けるはずです。

もしも、元々の見出しを変更してみたい方は、この記事のサンプルを活用して見出しを変更してみてはいかがでしょうか。また、カラーを変更するだけでも、見出しの印象やイメージが大きく変わると思います。サンプルを参考にしてカスタマイズしてみましょう。