WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

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

   

STINGER5

出典:http://wp-fun.com/

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

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

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

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

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

  • stinger5ver20150505b

スポンサード リンク

デフォルトの状態

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

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

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

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

スタイルのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

 - HTML/CSS, STINGER5