当ブログは、WordPressの人気テーマである「STINGER PLUS+」を利用しています。
人気であるということは、それだけ利用者が多いということ。デフォルトのままだと、他のサイトとデザインが同じになってしまうので、どこかで個性を出したいところ。
そこで、記事内で使われる見出し（h2、h3、h4）のデザインを変更してみました。
少しは差別化できたかな？
ビフォーアフター
まずはカスタマイズ前後でどのように変化したか比較してみましょう。
こちらがカスタマイズ前の見出しデザイン。
シンプルでどんなサイトでも使いやすい感じですよね。もちろんデフォルト状態でも構わないんですが、もう少しオリジナリティを出したいかな。
そして、こちらがカスタマイズ後の見出しデザイン。
- h2：背景色のみでシンプル
- h3：斜めストライプの下ボーダー
- h4：Font Awesomeアイコンと下ボーダー
- 色は緑色で統一
こんな感じに変更してみました。デフォルトと比較すると違いが分かりやすいと思います。
「STINGER管理」の設定変更
カスタマイズをスムーズに行うために、見出しに影響を及ぼす機能を停止しておきます。
WordPress管理画面で「STINGER管理」へ。
「デザイン・レイアウト関連設定」にある「オリジナルテーマカスタマイザーを使用する」のチェックを外しておきます。
「投稿・固定記事設定」にある「H3タグにチェックマークを適応する」のチェックも外しておきます。
見出しデザインをカスタマイズ
私が行ったカスタマイズを紹介していきます。
WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。
/* 見出しデザイン変更 */
h2 {
margin: 40px 0px 25px;
padding: 10px 20px;
border: none;
background: #228b22;
color: #fff;
font-size: 20px;
line-height: 27px;
}
.post h3 {
position: relative;
margin: 10px 0px 20px;
padding: 10px;
border: none;
color: #1a1a1a;
font-size: 18px;
line-height: 27px;
}
.post h3::after {
position: absolute;
bottom: 0px;
left: 0px;
content: '';
width: 100%;
height: 5px;
background: repeating-linear-gradient(-45deg, #228b22, #228b22 3px, #fff 3px, #fff 6px);
}
.post h3.comment-reply-title::after {
background: none;
}
.post h4 {
position: relative;
margin-bottom: 20px;
padding: 10px 15px 10px 38px;
border-bottom: dotted 1px #228b22;
background: none;
font-size: 17px;
line-height: 26px;
}
.post h4::before {
position: absolute;
top: 50%;
left: 15px;
margin-top: -12px;
content: "\f046";
font-family: "FontAwesome";
color: #228b22;
font-size: 19px;
}
.post h4.point::before {
content: none;
}上記のコードを追記することで、当ブログで採用している見出しと同じデザインにすることができます。
各見出しごとに解説していくので、好みに合わせてアレンジしてみてください。
h2：背景色のみでシンプル
h2 {
margin: 40px 0px 25px; /* 要素の外側の余白 */
padding: 10px 20px; /* 要素の内側の余白 */
border: none; /* 枠線 */
background: #228b22; /* 背景色 */
color: #fff; /* 文字色 */
font-size: 20px; /* 文字サイズ */
line-height: 27px; /* 行の高さ */
}h2は記事内で必ず使うため、パッと見て分かりやすくしました。余分な装飾はせず、シンプルに背景色のみを指定しています。
また、見出し毎に少しスペースを空けて区切りを付けたほうが読みやすいと思ったので、上部の余白を多めに取っています。
h3：斜めストライプの下ボーダー
.post h3 {
position: relative;
margin: 10px 0px 20px; /* 要素の外側の余白 */
padding: 10px; /* 要素の内側の余白 */
border: none; /* 枠線 */
color: #1a1a1a; /* 文字色 */
font-size: 18px; /* 文字サイズ */
line-height: 27px; /* 行の高さ */
}
.post h3::after {
position: absolute;
bottom: 0px; /* 下からの位置 */
left: 0px; /* 左からの位置 */
content: '';
width: 100%; /* 幅 */
height: 5px; /* 高さ */
background: repeating-linear-gradient(-45deg, #228b22, #228b22 3px, #fff 3px, #fff 6px); /* ストライプ(方向, 1色目の始点の位置, 1色目の終点の位置, 2色目の始点の位置, 2色目の終点の位置) */
}
.post h3.comment-reply-title::after {
background: none;
}h3は比較的使う頻度が高いので、他サイトであまり見かけない斜めストライプのボーダーを取り入れてみました。色はh2と揃えています。
疑似要素を使った際にコメント欄のタイトルにも反映されてしまったので、それを打ち消すコードも付け足しています。
h4：Font Awesomeアイコンと下ボーダー
.post h4 {
position: relative;
margin-bottom: 20px; /* 要素の外側の余白 */
padding: 10px 15px 10px 38px; /* 要素の内側の余白 */
border-bottom: dotted 1px #228b22; /* 枠線 */
background: none; /* 背景色 */
font-size: 17px; /* 文字サイズ */
line-height: 26px; /* 行の高さ */
}
.post h4::before {
position: absolute;
top: 50%; /* 上からの位置 */
left: 15px; /* 左からの位置 */
margin-top: -12px; /* 上下の位置調整 */
content: "\f046"; /* アイコンの種類 */
font-family: "FontAwesome";
color: #228b22; /* アイコンの色 */
font-size: 19px; /* アイコンのサイズ */
}
.post h4.point::before {
content: none;
}h4は使用頻度は多くないですが、私が使用するときはリストのような使い方をするので、Webアイコンフォントの「Font Awesome」を使ってチェックアイコンを見出しの頭に付けました。
こちらも疑似要素を使った際に関連記事のタイトルに反映されてしまったので、それを打ち消すコードも記述しています。
STINGER PLUS+ならば、Font Awesomeを利用するのも簡単です。種類も豊富なので好みに合わせて変更してください。
Font Awesome, the iconic font and CSS toolkit
上記のサイトにアクセス後、上部の「Icons」をクリックし、お好きなアイコンを選択してください。
表示されるUnicodeをコピーし、
content: "\f046"; /* アイコンの種類 */
コード内の私が使っているUnicodeと置き換えてください。あとは、必要であれば大きさや位置を調整するだけです。
参考サイト
見出しデザインを考える際に参考にさせていただきました。ありがとうございました。
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
まとめ
見出しデザインを変更することは、他サイトと差別化を図るのにうってつけだと思います。簡単なカスタマイズでも印象がガラッと変わります。
階層構造を意識して見出しをデザインすることで、閲覧者にとって読みやすい記事に仕上がるはずです。
それにオリジナリティを出したデザインにすれば、より自分のサイトに愛着が湧きますしね。
ぜひ見出しデザインを変更してみてください。