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

俵谷龍佑（@tawarayaryusuke）です。

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

今日はそれについて。

CSSのhタグ部分にペーストするだけ！
hタグは[テーマの編集]でデザインを変えられる
色はカラーコードを直打ちして修正する
「角丸吹き出し」にするならこちら

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

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

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

301 Moved Permanently

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

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

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

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

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

/************************************
** 見出し（H1-6）
************************************/

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

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

h2 {
  position: relative;
  margin: 1.5em 0;
  padding: 0.5em 0 0.3em 1em;
  border: 2px solid #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;
}

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。

h2 {
  position: relative;
  margin: 1.5em 0;
  padding: 0.5em 0 0.3em 1em; 
  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: 15px solid #00008B;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
    content: "";
}

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にも応用できるテクなので、ぜひ修正を加えて応用してみてください！

この記事を書いた人
最新の記事

俵谷龍佑

京都が好きすぎて移住｜25歳で独立｜未経験でライターに｜顧客課題を共に考える｜採用・地方創生とBtoB向けSEOが専門領域｜気合いではなく仕組みで解決｜トラベルライター｜ADHDグレーゾーン｜自分らしく働ける人を増やす｜大衆食堂と町中華｜新しい働き方LAB 京都コミュマネ｜ハフコミュ 2期｜信楽たぬき｜