ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

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

   

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

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

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

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

image2993

こんな感じ。

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

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;
}
/*

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

image3004

実に簡単でした。

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

まとめというか感想

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

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

と言う感じでした。

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

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

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

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

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

月額100円(税抜)~容量最大400GB!大人気のWordpressも簡単インストール★

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

 - Stinger5, Web, wordpress