おれじなる

「どうせ自分なんか」から「こんな自分でも」へ導くブログメディア

h2タグをCSSで吹き出しのデザインに一括変更する方法

time 2015/10/13

h2タグをCSSで吹き出しのデザインに一括変更する方法
スポンサーリンク

俵谷 龍佑(@tawarayaryusuke)です。

最近まで、見出しのデザインに悩んでいました。吹き出しのデザインにしたいなとタグをいじっていて試行錯誤してようやく修正できました。

今日はそれについて。

CSSのhタグ部分にペーストするだけ!

以前の見出しはデザインがシンプルすぎて面白くなかったので、こんな感じの吹き出しにしたいと思っていました。

無題11

しかし、なかなか自分の理想の吹き出しのデザインタグを紹介しているサイトが見つからず、そしてとうとう見つけました。このサイトを参考にしました。

http://pointsite-net.info/css-design-tag/

このサイトは非常に参考になりました。吹き出しのタグのみならず、他のデザインもあったので。コードが読めない初心者でも「どこにはればいいのか」分かるコードで助かった!! 以下で解説していきます!

hタグは[テーマの編集]でデザインを変えられる

h2に限らず、h3、h4全ての見出しタグはテーマ編集の[スタイルシート]という場所で変更ができます。

(※コードの修正をする場合は、事前に必ず元のコードをコピペしてメモ帳にでも貼り付けておいてください。cssは少し間違えただけで大幅にデザインが崩れることがあります。)

スポンサーリンク

無題54

スタイルシートに入ったら、[h2]で検索(ショートカットはCtrl+F)をかけます。

/************************************
** 見出し(H1-6)
************************************/

この項目の下部にh2を修正できる場所があるので、そこに以下のコードを挿入します。

どういう構成になっているか簡単に解説すると、beforeの部分が”枠”、afterの部分は吹き出しの”▼”の部分にあたる。(このコードだと背景色と線の色が一緒だから枠がないように見えるが、本当は枠がある)

これを挿入すると、今私がブログで使っているブログの見出しになります。

 色はカラーコードを直打ちして修正する

色の修正は、「#英語と数字」で構成されている文字をいじると、色が変わります。色に関しては、「カラーコード」と検索すれば山のように出てきますので、そこで見つけたコードをコピペして、プレビュー画面で見ながら調整するとよいでしょう。ちなみに自分は下記のサイトをよく使っています。

http://www5.plala.or.jp/vaio0630/hp/c_code.htm

「角丸吹き出し」にするならこちら

「角丸吹き出し」にしたいなら、このコードを上に書いた手順でコピペすればOK。

ちなみにh3、h4にも応用できるテクなので、ぜひ修正を加えて応用してみてください!

スポンサーリンク

著者

俵谷龍佑(タワラヤリュウスケ)

俵谷龍佑(タワラヤリュウスケ)

「社内失業」になり、1年で大手企業を退職。その後、ADD(軽度)が発覚。 それを機に、「強みを伸ばす」の重要性に気付き、向いてない事を諦めてやりたいことだけやる人生を目指す。28歳、作曲も歌も未経験という状態から、昔からの夢「音楽で食べていく」ことに向けてようやく本気で取り組み始める。今は、まだ作曲中、歌練習中で、音楽では食えてません。フリーライターで生計を立てています。 [詳細]