WordPressテーマ「STINGER5」のサイドバーのタイトル(見出し)をカスタマイズ

WordPress WordPress

レスポンシブデザインのWordPressテーマ「STINGER5」をカスタマイズします。

今回は、サイドバーのタイトル(見出し)の部分です。

シンプルでいいのですが、ちょっと素っ気ないというか、もうちょっと分かりやすく(見やすく)したいなと思うわけです。

ということで、頭にアイコン画像でもつけてみます。

なお、今回のバージョンは以下です。

  • stinger5ver20150505b
スポンサーリンク

デフォルトの状態

デフォルトの状態はこちら。

STINGER5 サイドバー タイトル(見出し)

カテゴリーとアーカイブという文字のところですね。

スタイルシートを見てみると、スタイルが指定されているのは、以下の2箇所(各フォント設定、サイドバー設定)のようです。

/* サイドバーの見出し */
#side aside h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	line-height: 28px;
}
#side aside h4 {
	font-size: 14px;
	font-weight: bold;
	line-height: 25px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}

スタイルのカスタマイズ

では、スタイルを追加してみます。

カスタマイズは、子テーマを作成して行いましょう。

詳細はこちらを参照してください。

WordPressテーマ「STINGER5」で学ぶ子テーマの作成方法

今回は「WEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコン」というところの、フリー素材のアイコン画像を利用させていただきました。

ダウンロードしたアイコン画像を、テーマフォルダ「images」に配置し、「style.css」ファイルに、以下のスタイルを追加しました。

/*--------------------------------
サイドバー
---------------------------------*/
/* サイドバーの見出し */
#side aside h4 {
	background-image: url(images/aside-icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 15px;
}

見出しに背景画像を指定し、左余白を空けることで右にずらして、文字と被らないようにしています。

で、こんな感じになりました。

STINGER5 サイドバー タイトル(見出し)

ちょっとは見やすくなったかな?

「border」で下線を入れてみても見やすいかもしれませんね。

コメント

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