Cocoon 見出しのデザインを変えたい

見出しのデザインを変えるには？

このブログはCocoonを利用させていただいているのですが、Cocoonのデフォルトでは見出し（H1〜H4）のデザインが下記のようになります。

私個人的には、H2のようにガッツリ背景が灰色になるのは少し好みに合わなかったので、変更方法を調べてみると、様々なブロガーさんがCocoonのカスタマイズ方法をまとめていらっしゃる！それらを参考に変更してみることにします。

結論としては、自分でカスタマイズするにはCSSの記述を追記する必要があります。

「CSSってなにそれ初耳だけど？」という方や、名前は聞いたことあるけどCSS自体が実質的に何かよくわからないという方の為に簡単に説明しておきます。

WEBサイトというのは、大きく考えて、文字や画像というコンテンツ部分の内容がHTMLというプログラミング言語で記述されており、それら要素のレイアウトやデザインに関わる部分をCSSという言語で指定しています。

例えるならば、原稿を書くライターがHTML、もらった原稿を紙面に合わせてレイアウトするデザイナーがCSSといった感じでしょうか。Word文書や画像ファイルだけでは雑誌として印刷できないので、これらを雑誌の体裁に仕上げる必要がありますね。

この “見た目” をちゃんとさせる役割を担うのがCSSです。

それでは、具体的な変更方法について触れていきましょう。

やみくもにCSSを書き始めても仕方ないので、とりあえずザックリとイメージを作ってみます。他の箇所のカスタマイズが一切進んでいない現段階で凝りすぎてもなんなのでシンプルさを保ちつつ、少し色が入ればいいなぁ……程度の要望で以下のイメージを作りました。これをベースにCSSを変更します。

Cocoonの記事には “article” というクラスが全体で割り当てられているようなので、article というクラス内の h1 〜 h4 について、各々の変更したい仕様で追加するCSSを書いていきます。
気に入らなければ、後ほど再び変えれば良いので、とりあえずざっくり。

書体や太字については既に初期設定で指定されているので、今回は無視としました。
また色々な方のブログでCSSをリセットする記述をされている方も多くいるのですが、今回はガッツリ変更というよりかは試験的に記述をするだけなので上記のような中途半端なソースコードです。

CSSを変更するには、左メニュの【外観】→【カスタマイズ】→【追加 CSS】を選択すると【追加CSS】という画面が出てくるので、こちらに記述したCSSを貼り付けます。

右側の画面にプレビューが出てくるので、こちらで調整。

完了したら同画面内にある【公開】を押せば反映されます。

……ちなみに、今回は “追加” CSS という方法でカスタマイズしました。大元のCSS自体を変更することも可能で、左メニューの【外観】→【テーマエディター】がこれに当たります。私のようなコーディング初心者はテンプレに変なことをして取り返しがつかなくなるのが怖いので触りませんが……