記事の中で一番目立つ存在が見出しです。
ちょっと変えるだけでオリジナリティを出すことができるので、優先的されがちです。
今回は見出しを吹き出し風にアレンジする方法を解説します!
それでは早速やっていきましょう!
とりあえず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: “”;
}
これで吹き出し風の見出しになります。
↑こんな感じです。
終わりに
貼り付けだけでもできますが、自分好みにアレンジした方が愛着もわきます。
いろいろやってみましょう。
コメント