WordPressSTINGER7

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

eye_stinger7

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

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

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

20160409a

ちょっと解説

padding(テキスト周囲の余白)は最初の「 #side aside h4.menu_underh2 」で指定します。
初期値がこのクラスでpadding指定されているので、同じクラスで上書きします。

#side aside h4:before 」と「 #side aside h4:after 」の擬似要素で2つの円を描いています。
border-radius: 50%; 」を削除すれば円じゃなくて四角になります。

これをカラーや位置など変えて使っても良いですし、cssで色々と他のデザインにもできますので試してみてください。
記事中の見出しデザインについて書いた記事も参考にどうぞ↓

STINGER7/Plus:記事中と投稿編集画面の見出しデザインをカスタマイズする方法
...

まとめ

当サイトの「STINGER7」カスタマイズも少しずつ進んできました。
まだまだ途中ですが今後も色々やっていくので何かの参考になれば幸いです。

ではまた〜♪

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。
WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

タイトルとURLをコピーしました