WordPress（STINGERテーマ）を使用していて、見出しデザインを変更したい方に、読んでほしい記事です。
STINGERテーマでは、見出し（ここの場合 <h2>）がグレーの背景デザインになっていますが、明るく目にとまりやすいデザインにしたかったため、下記のようにデザインを変更しました。
もし、同じように見出しデザインの変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。
なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。
スポンサーリンク
見出しデザインの選定
まず、変更したい見出しのデザインを決めます。
私の場合、デザインの知識がまったくなかったので、下記のサンプル集を参考にしました。
【参考】見出しデザインの参考にしたい CSSで作るhタグのサンプル集
サンプル集にある「見出しサンプル02」のデザインが気に入ったので、このデザインの色や線を調整し、実装していきます。
よくわかならい・・という方は、とりあえずコピペで良いので試してみてください。
「style.css」のコード変更
「style.css」の２箇所のコードを変更します。
１箇所目、2箇所目のコードは似ていますが、１箇所目が上部、2箇所目が下部にあるコードになります。
▪︎１箇所目の変更前
/* 中見出し */
h2 {
position: relative;
background: #f3f3f3;
color: #1a1a1a;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}▪︎１箇所目の変更後
/* 20XXXXXX_「中見出し変更」など変更内容メモ ここから*/
/*中見出し*/
h2 {
position: relative;
background: #FFFFFF;
border-left:8px solid #00A8C6;
border-bottom:1px solid #00A8C6;
color: #1a1a1a;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: '';
position: absolute;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: '';
position: absolute;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
/* 20XXXXXX_「中見出し変更」など変更内容メモ ここまで*/１箇所目のコード変更だけの場合、スマホ（タブレット）はデザイン変更ができているのですが、PCのデザイン変更ができていないため、2箇所目のコード変更をおこないます。
▪︎２箇所目の変更前
/*中見出し*/
h2 {
position: relative;
background: #f3f3f3;
color: #1a1a1a;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 50px;
}
h2:before {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 50px;
}▪︎２箇所目の変更後
/* 20XXXXXX_「中見出し変更」など変更内容メモ ここから*/
/* 中見出し */
h2 {
position: relative;
background: #FFFFFF;
border-left:8px solid #00A8C6;
border-bottom:1px solid #00A8C6;
color: #1a1a1a;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: '';
position: absolute;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: '';
position: absolute;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
/* 20XXXXXX_「中見出し変更」など変更内容メモ ここまで*/これで見出しのデザインが変わりました。
コード変更箇所の説明
変更前と変更後のコードをよく見ると、少ししか変更していないことがわかります。
それぞれ簡単に説明していきます。
background: #FFFFFF;
背景色を白にするために「#FFFFFF」と指定しています。（デフォルトは灰色でしたね。）
背景色を白以外にしたい場合は、カラーコード表から好きな色のコードを記載してください。
【参考】HTML,CSS カラーコード一覧表
border-left:8px solid #00A8C6;
見出し左の横棒の太さ、色を指定しています。
横棒の太さを変えたい場合は「8px」、色を変えたい場合は「#00A8C6」を変えてください。
border-bottom:1px solid #00A8C6;
見出し下線の太さ、色を指定しています。
横棒の太さを変えたい場合は「1px」、色を変えたい場合は「#00A8C6」を変えてください。
border-top: 10px solid transparent;
デフォルトの場合、見出しの下に三角の吹き出しが残ってしまうため、「transparent」と記載します。
他のデザインも試してみたい方は、先ほどのサンプル集にあるコードを参考に、自分の好みにあったデザインに変更してみてください。
本記事は以上になります。
見出しデザインの変更だけで、ブログの雰囲気や読みやすさも変わってきますので、ぜひ色々と試してみてはいかがでしょうか。
本記事では、<h2>の見出しデザインだけの変更でしたが、同様の手順で<h3>以下の見出しデザインも変更可能です。
お付き合い頂き、ありがとうございました！