みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

STINGER 見出しデザインを変更する方法

更新日:

見出しデザイン変更記事の記事内アイキャチ画像

WordPress(STINGERテーマ)を使用していて、見出しデザインを変更したい方に、読んでほしい記事です。

STINGERテーマでは、見出し(ここの場合 <h2>)がグレーの背景デザインになっていますが、明るく目にとまりやすいデザインにしたかったため、下記のようにデザインを変更しました。

見出しデザイン変更記事のビフォーアフィター画像

もし、同じように見出しデザインの変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。

なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

スポンサーリンク

PC300×250




見出しデザインの選定

まず、変更したい見出しのデザインを決めます。

私の場合、デザインの知識がまったくなかったので、下記のサンプル集を参考にしました。

【参考】見出しデザインの参考にしたい CSSで作るhタグのサンプル集

サンプル集にある「見出しサンプル02」のデザインが気に入ったので、このデザインの色や線を調整し、実装していきます。

よくわかならい・・という方は、とりあえずコピペで良いので試してみてください。

「style.css」のコード変更

「style.css」の2箇所のコードを変更します。

1箇所目、2箇所目のコードは似ていますが、1箇所目が上部、2箇所目が下部にあるコードになります。

▪︎1箇所目の変更前

/* 中見出し */

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;
}

▪︎1箇所目の変更後

/* 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_「中見出し変更」など変更内容メモ ここまで*/

1箇所目のコード変更だけの場合、スマホ(タブレット)はデザイン変更ができているのですが、PCのデザイン変更ができていないため、2箇所目のコード変更をおこないます。

▪︎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;
}

▪︎2箇所目の変更後

/* 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>以下の見出しデザインも変更可能です。

お付き合い頂き、ありがとうございました!

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2024 All Rights Reserved.