Stinger8よく使う「h」タグを装飾してみた。 [WordPress]

ブログを書く上で、よく使うタグの一つが「h」タグではないでしょうか。
なので、カスタマイズしたくもなります。

デフォルトだとこんな感じです。

今回手を入れたのは、「h2」タグと「h3」タグ。
「h4」タグはデフォルトのままで。

style.cssに追加。

フォントスタイルを変更

游ゴシックは線が細いので、メイリオをメインに変更。

.post h2, .post h2 span, .post h3, .post h3 span, .entry-title, .post .entry-title {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
}

「h2」タグの変更点

• センタリング
• 背景色（グラデーション）
• ボーダー調整

h2 {
    background: linear-gradient(#f3f3f3, #ffffff, #f3f3f3);
    border-top: 1px solid #ccc;
    text-align: center;
}

「h3」タグの変更点

• padding調整
• ボーダーの調整
• フォントサイズの調整

.post h3 {
	padding: 5px 15px;
    border-bottom: 1px #999999 solid;
    border-left: 5px solid #999999;
}

※フォントサイズの調整は以下の箇所で設定

/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

	/*--------------------------------
	各フォント設定
	---------------------------------*/
	.post h3 {
	font-size: 18px;
	}