シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加
  • 17
stinger5-aside-h4-customize-0-web


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

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

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

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

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

では、いってみよう!johnny-c

カスタマイズする理由

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

当ブログはこんな感じにしています。
stinger5-aside-h4-customize-web

前回の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」あまり使いたくないので、当ブログでは見出しのデザインにしか使ってないです。今のところ..

johnny-tubuyaki

あまりカスタマイズしすぎないのがコツ!
【STINGER5】サイドバーの見出しh4のカスタマイズ(背景に画像を入れる方法)
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク