最近ブログ等で、よくh2タグやh3タグの見出しに「下向きの三角」をつけ、「吹き出し風」にデザインされているのを見かけます。

このスタイルを賢威7で実装する方法をご紹介します。

分かりやすかったサイトをご紹介

今回ご紹介する方法は以下のサイトを参考にしました。とても分かりやすいのでご紹介します。

参考CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる

賢威7のh2タグに実装する例

以下のソースは、デフォルトよりも文字の大きさを小さくし、行間も若干縮め、背景を薄いグレーにした例になります。

当サイトの場合は、賢威の子テーマで運用しているため、子テーマディレクトリの「base.css」に追記しています。

.article-body h2{
font-size: 1.2em;
font-weight: bold;
color: #333;
background-color: #E7EAE6;
position: relative;
line-height: 1.5em;
padding: 0.85em 1em;
}
.article-body h2:before{
content: "";
position: absolute;
bottom: -23px;
left: 10%;
border: 12px solid transparent;
border-top: 12px solid #E7EAE6;
}

これで冒頭の画像のように、吹き出し風の下三角を実装できます。