俵谷 龍佑(@tawarayaryusuke)です。
最近まで、見出しのデザインに悩んでいました。吹き出しのデザインにしたいなとタグをいじっていて試行錯誤してようやく修正できました。
今日はそれについて。
CSSのhタグ部分にペーストするだけ!
以前の見出しはデザインがシンプルすぎて面白くなかったので、こんな感じの吹き出しにしたいと思っていました。
しかし、なかなか自分の理想の吹き出しのデザインタグを紹介しているサイトが見つからず、そしてとうとう見つけました。このサイトを参考にしました。
このサイトは非常に参考になりました。吹き出しのタグのみならず、他のデザインもあったので。コードが読めない初心者でも「どこにはればいいのか」分かるコードで助かった!! 以下で解説していきます!
hタグは[テーマの編集]でデザインを変えられる
h2に限らず、h3、h4全ての見出しタグはテーマ編集の[スタイルシート]という場所で変更ができます。
(※コードの修正をする場合は、事前に必ず元のコードをコピペしてメモ帳にでも貼り付けておいてください。cssは少し間違えただけで大幅にデザインが崩れることがあります。)
スタイルシートに入ったら、[h2]で検索(ショートカットはCtrl+F)をかけます。
/************************************
** 見出し(H1-6)
************************************/
この項目の下部にh2を修正できる場所があるので、そこに以下のコードを挿入します。
どういう構成になっているか簡単に解説すると、beforeの部分が”枠”、afterの部分は吹き出しの”▼”の部分にあたる。(このコードだと背景色と線の色が一緒だから枠がないように見えるが、本当は枠がある)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | h2{ position:relative; margin:1.5em0; padding:0.5em00.3em1em; border:2pxsolid#A9A9A9; font-size:130%; font-weight:bold; color:#FFFFFF; background:#A9A9A9; } h2:before{ content:" "; position:absolute; top:100%; left:24px; width:0; height:0; border-width:12px; border-style:solid; border-color:transparent; border-top-color:#A9A9A9; } h2:after{ content:" "; position:absolute; top:100%; left:28px; width:0; height:0; border-width:8px; border-style:solid; border-color:transparent; border-top-color:#A9A9A9; z-index:1; } |
これを挿入すると、今私がブログで使っているブログの見出しになります。
色はカラーコードを直打ちして修正する
色の修正は、「#英語と数字」で構成されている文字をいじると、色が変わります。色に関しては、「カラーコード」と検索すれば山のように出てきますので、そこで見つけたコードをコピペして、プレビュー画面で見ながら調整するとよいでしょう。ちなみに自分は下記のサイトをよく使っています。
「角丸吹き出し」にするならこちら
「角丸吹き出し」にしたいなら、このコードを上に書いた手順でコピペすればOK。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | h2{ position:relative; margin:1.5em0; padding:0.5em00.3em1em; font-size:130%; font-weight:bold; color:#FFFFFF; background:#00008B; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } h2:after{ position:absolute; bottom:-15px; left:10%; z-index:90; margin-left:-15px; border-top:15pxsolid#00008B; border-left:15pxsolidtransparent; border-right:15pxsolidtransparent; border-bottom:0; content:""; } |
ちなみにh3、h4にも応用できるテクなので、ぜひ修正を加えて応用してみてください!

俵谷 龍佑

最新記事 by 俵谷 龍佑 (全て見る)
- 京都移住して1ヶ月!住んでみたら分かった意外な点10 - 2021年7月18日
- 【長岡・山古志】日本に元気を灯す。山花火と棚田・棚池のライトアップ - 2020年12月2日
- 未経験から叩き上げで、プロのコンテンツライターになるまで〜後編〜 - 2020年8月28日
- 未経験から叩き上げで、プロのコンテンツライターになるまで〜前編〜 - 2020年8月15日