シェアする

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

【STINGER5】h2、h3見出しデザインのカスタマイズ

シェアする

  • このエントリーをはてなブックマークに追加
  • 18
stinger5-h2-customize-00-web


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

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

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

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

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

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

カスタマイズする理由

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

当ブログの場合、〝クリエイターチェック〟なのでh2見出しにオリジナルの〝チェックマーク(画像)〟を表示させて、文字色も変えようと思います。それに伴いh3の文字色も変更!

カスタマイズ方法(手順)

h2のカスタマイズは、function.php内の「中見出し」部分からh2の箇所をすべて削除してから、CSSの変更を行うやり方もありますが、当ブログでは、function.phpはそのままで、style.cssにh2コードを追加して「!important」を使用する方法でカスタマイズします。

「!important」とは?

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

カスタマイズ スタート

/*h2カスタマイズ開始*/
h2 {
	background: #fff url(画像のURL) no-repeat !important;
	font-weight: bold !important;
	padding-top: 8px !important;
	padding-left: 45px !important;
}
/*h2カスタマイズ終了*/


「画像のURL」に表示させたい画像のURLを記入してください。当ブログでは40×40サイズがピッタリでした。

文字色は、WordPress管理画面の左メニューの「外観」→「カスタマイズ」の「基本色(キーカラー)」で好きな色に変更しています。

/*h3カスタマイズ開始*/
.post h3 {
	font-size: 18px !important;
	margin-bottom: 20px !important;
	margin-top: 10px !important;
	padding-top: 15px !important;
	padding-right: 10px !important;
	padding-bottom: 10px !important;
	padding-left: 10px !important;
	color: #005379 !important;
	line-height: 27px !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	margin-left: 0 !important;
	border-bottom: 1px #999999 dotted !important;
}
/*h3カスタマイズ終了*/


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

まとめ(感想)

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

johnny-tubuyaki

あまりカスタマイズしすぎないのがコツ!
【STINGER5】h2、h3見出しデザインのカスタマイズ
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

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

フォローする

スポンサーリンク