【STINGER5】サイドバーの見出しh4のカスタマイズ（背景に画像を入れる方法）

 
どうも、ジョニー（@creatorcheck）です。

当ブログで使用しているテーマ（STINGER5）のカスタマイズした箇所の備忘録です。
（ちょいちょい書いていきます）

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね！

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

では、いってみよう！

カスタマイズする理由

デフォルトでもよいのですが、よりサイトに合ったデザインにしたかったのでカスタマイズします。

当ブログはこんな感じにしています。

前回のh2、h3タグ同様（前回の記事はコチラ）に「!important」を使って、style.cssにコードを加える方法でカスタマイズします。

「!important」とは？

スタイルを記述する時に、値の後にスペース（半角）を挟んで「!important」を記述すると、優先的にスタイルが適用される！というものです。

カスタマイズ スタート

/*aside h4カスタマイズ開始*/
aside h4 {
	background: url(画像のURL) repeat !important;
	padding: 5px 10px !important;
	margin-bottom: 10px !important;
}
/*aside h4カスタマイズ終了*/

 
「画像のURL」に表示させたい画像のURLを記入してください。
（ちなみに当ブログは299 × 33サイズです）

 
上記を参考にお好きにカスタマイズどうぞ。

まとめ（感想）

なんとなく「!important」あまり使いたくないので、当ブログでは見出しのデザインにしか使ってないです。今のところ..

あまりカスタマイズしすぎないのがコツ！

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14

Amazon

楽天市場

Yahooショッピング