Stinger5　カスタマイズ – h2の吹き出しを修正

このサイトはStinger3で作ってある。

このサイト以外はもっぱらStinger5を使っているけど、そのカスタマイズとしてメモ。

Stinger5のh2タグを使うと吹き出しデザインになっている

下図はStinger5でh2タグを使った場合のデザイン。

こんな感じ。

吹き出しデザインになっていますね。

Stinger5のh2タグを使っても吹き出しデザインにならないようにする

これを普通のデザインにするためのカスタマイズ。

style.cssのh2の部分をちょっと修正するだけ。

style.cssの修正

例によって、WordPressの管理画面から、「外観」→「テーマの編集」へ移動して、「style.css]を開く。

修正は簡単。

「h2:after」と「h2:before」をコメントアウトするだけ。

PC用の箇所とタブレット用の箇所で2ヶ所あるので注意。

2箇所ともコメントアウトします。

下記がソース。

/*中見出し*/
h2 {
	position: relative;
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
/*
h2:after {
	content: '';
	position: absolute;
	border-top: 10px solid #f3f3f3;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	bottom: -10px;
	left: 50px;
}
h2:before {
	content: '';
	position: absolute;
	border-top: 10px solid #f3f3f3;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	bottom: -10px;
	left: 50px;
}
/*

そして出来上がったデザインがこちら。

実に簡単でした。

自分はこちらの方が好みです。

まとめというか感想

デザインの好みは人それぞれなので何とも言えませんが、hタグを使ったときに吹き出しデザインというのはちょっと好みではなかったのでカスタマイズしました。

ググってみてもこのカスタマイズ方法ってなかなか出てこなくてどうしよう。。

と言う感じでした。

今後もこのカスタマイズやりそうなのでメモ的に投稿することにしました。

Stinger3とStinger5って結構というか、構造全然違いますよね。

最近もっぱらStinger5を使わせてもらっていて、ちょいちょいカスタマイズしたりするんですが、メモ的にやっぱり書いておかないと忘れてしまう。。。

そんなわけで、こちらのサイトは放置しがちなんですが、ちょいちょいメモ的ブログ続けていこうかと思います。

------------------------------PR------------------------------
★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★

月額100円（税抜）～容量最大400GB！大人気のWordpressも簡単インストール★

------------------------------PR------------------------------

 - Stinger5, Web, wordpress