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

スポンサーリンク

俵谷 龍佑(@tawarayaryusuke)です。

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

今日はそれについて。

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

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

無題11

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

見出しタグのCSSデザインサンプルです。コピペするだけですぐに使えるサンプル15種類。普段CSSはあまり触らないという方のために、1行ずつ解説を添えています。色のコードを変更したり線の太さを変更するだけでも、あなたのサイ

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

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

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

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

スポンサーリンク

無題54

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

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

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

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

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

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

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

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

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

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

スポンサーリンク
The following two tabs change content below.
俵谷 龍佑

俵谷 龍佑

ライターの仕事を中心に、小規模事業者さんのWeb集客のお手伝いしています。マーケティングの実験の場として、音楽活動やイベントを開催しております。 ADD(注意欠陥障害)の症状に悩まされながらも日々奮闘しています。
LINE@始めました!

スマホの方はこちらから↓
友だち追加

PCの方はこちらから↓

良いと思ったらシェア!

よく読まれている記事はこちら