【Cocoon】記事の見出しを吹き出し風にアレンジ

記事の中で一番目立つ存在が見出しです。
ちょっと変えるだけでオリジナリティを出すことができるので、優先的されがちです。
今回は見出しを吹き出し風にアレンジする方法を解説します!
それでは早速やっていきましょう!

目次

とりあえずCSSをリセットする

これはどっちでもいいです。

ただ見出しのCSS部分をリセットしてしまえば、後は自分の思う通りになるのでやりやすくなります。

やり方

.article h2 {
padding: 0;
background: none;
}

↑これを子テーマのスタイルシート「style.css」に書き込めば、h2見出しはリセットされます。

他の見出しであれば、h2のところを変えてください。

後は好きなコードをリセットコードの後に書くだけです。

吹き出しの見出しを追加する

.article h2 {
position:relative;
background: #4aa7bf;/* 背景色 */
color: #fff;/* 文字色 */
font-size: 125%;/* 文字サイズ */
font-weight: 700;/* 太さ */
padding: 1em 1.1em;
margin-top: 2.1em;
margin-bottom: 1em;
-webkit-border-radius: 3px;
border-radius: 3px;/* 丸み */
box-shadow: 0 1px 5px rgba(0,0,0,.03);
}
.article h2:before {
position: absolute;
left: 40px;/* 吹き出し位置左右 */
bottom: -12px;/* 上下*/
border-top: 12px solid #4aa7bf;/* 色 */
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 0;
content: “”;
}

これで吹き出し風の見出しになります。

↑こんな感じです。

終わりに

貼り付けだけでもできますが、自分好みにアレンジした方が愛着もわきます。

いろいろやってみましょう。

コメント

コメントする

目次