Hello! Gorila.

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

この記事は約2分で読めます。

記事の中で一番目立つ存在が見出しです。

ちょっと変えるだけでオリジナリティを出すことができるので、優先的されがちです。

今回は見出しを吹き出し風にアレンジする方法を解説します!

それでは早速やっていきましょう!

スポンサーリンク

とりあえず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: "";
}

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

↑こんな感じです。

終わりに

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

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

ごり子
ごり子

読んでくれてありがとう!

Technology
スポンサーリンク
Study Gorilla

コメント