STINGER7：サイドバーの見出しデザインをカスタマイズする方法

当サイトではWordPressテーマ「STINGER7」を使用させていただいています。
今回はサイドバーの見出しのデザインを少し変えてみました。

cssをちょこっと追加するだけなんですぐ終わりますが、せっかくなのでやり方をご紹介したいと思います。

この記事の目次

子テーマの使用方法
style.cssを編集
ちょっと解説
まとめ

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

style.cssを編集

さて、今回はちょー簡単！
下記コードを子テーマの「style.css」に追加するだけです↓

#side aside h4.menu_underh2 { /* paddingはこのクラスで指定 */
	padding: 0 0 0 30px;
}
#side aside h4 {
	font-size: 18px;
	line-height: 1.6em;
	font-weight: normal;
	color: #666;
	border-bottom: 4px dotted #47bea0; /* 下にドットのボーダーライン */
	margin: 20px 0 10px 0;
	position: relative;
}
#side aside h4:before { /* 緑の丸いやつ */
	content: " ";
	width: 20px;
	height: 20px;
	background: #47bea0;
	border-radius: 50%;
	position: absolute;
	bottom: 6px;
	left: 0;
}
#side aside h4:after { /* 黄色の丸いやつ */
	content: " ";
	width: 10px;
	height: 10px;
	background: #f9d635;
	border: 2px solid #f9d635;
	border-radius: 50%;
	position: absolute;
	bottom: 14px;
	left: 10px;
}

するとこんな感じになります↓