WordPressCocoon

【Cocoon】見出し(h1〜h4タグ)を再カスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

見出し

見出しについては、以前「【Cocoon】見出し(h1〜h6タグ)をカスタマイズする」のエントリー記事でカスタマイズを行いました。

【Cocoon】見出し(h1〜h6タグ)をカスタマイズする
ブログを書く際の見やすさとして重要になるのが「見出し」です。「見出し」は新しくまとまった文章を書き始める最初に設定します。ブログ記事の項目として重要となる【見出し1~6(h1~h6タグ)】のカスタマイズについて書いたエントリー記事です。

設定出来る見出しは、「見出し1(h1タグ)」「見出し2(h2タグ)」「見出し3(h3タグ)」「見出し(h4タグ)」「見出し(h5タグ)」「見出し(h6タグ)」の6パターンです。

その時にカスタマイズした見出しのデザインは下記になります。

【Cocoon】見出し(h1〜h4タグ)を再カスタマイズする

最近この見出しがシンプル過ぎると思い出したので、少しだけ変化を付けることにしました。

見出しのカスタマイズ

今回の見出しのカスタマイズは、「見出し1(h1タグ)」~「見出し(h4タグ)」に対して少しだけ折り目のデザインを付けることにしました。

【Cocoon】見出し(h1〜h4タグ)を再カスタマイズする

カスタマイズ内容

「見出し1~4(h1~h4タグ)」のカスタマイズ内容は、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」の「見出し1(h1タグ)」~「見出し(h4タグ)」の設定と入れ替えます。

上記の「見出し1(h1タグ)」~「見出し(h4タグ)」のカスタマイズの中で、追加分は下記の通りです。

または、このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

カスタマイズ後の見出し

今回のカスタマイズによって、「見出し1(h1タグ)」~「見出し(h4タグ)」のデザインは次のようになりました。

【Cocoon】見出し(h1〜h4タグ)を再カスタマイズする

右上に折り目を付けたことで、立体感が強調される形になったと思います。

最後に

「Cocoonカスタマイズ総まとめ」のエントリー記事をアップしたばかりですが、今後も気になる点が有る場合には随時カスタマイズを行っていきたいと思います。

コメント