Cocoonの見出しをカスタマイズしてみました

Cocoonテーマ Cocoonテーマ

こんにちは。低気圧が近づくとなんだか頭が重たいカタアヤです。

今日は、Cocoonテーマの見た目を大きく左右する 記事内の見出し部分のカスタマイズについてまとめてみます。

Cocoonとはわいひら様が作成・公開している超有能なWordPress無料テーマです!↓

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

読みやすさを左右する見出し

見出しとは説明するまでもないと思いますが、↑のような、文章の区切りで挿入されるタイトルのようなものです。

Cocoonテーマは、見出しで目次が自動生成されるようになっていますので(なんと、プラグイン不要です!)すぐに読みやすいblogを書くことができます。見出しは、ユーザーさんが記事を読むたび何度も目にする部分ですので、お気に入りの色やデザインに変更すれば、「自分のサイトらしさ」をとても強く感じられる部分だと思います。私のように見た目から入る者としては、特にこだわりたい部分ですね。

ですが、Cocoonテーマでは 単純にCSSで h1、h2 とデザイン指定しますと、記事内の見出しだけでなく、「コメント」や「関連記事」などの 思いもよらぬ部分の文字までがデザイン変更されて あわあわしてしまうことに。。。(←繰り返しますがワタクシはWP超初心者

それでは記事内の見出し部分だけ、デザインを変更するには どうしたらいいのでしょうか?

Cocoonテーマの classセレクタを理解する

ズバリ!超初心者のワタクシ、検索させて頂きました。Cocoonテーマでの 各見出しのセレクタは下記のとおりになります。

見出し1(記事タイトル) ・・・.article h1
見出し2 ・・・.article h2
見出し3 ・・・.article h3
見出し4 ・・・.article h4
見出し5 ・・・.article h5
見出し6 ・・・.article h6

 

当サイトのカスタマイズは、見出し部分以外にも、unlimited ch@os様「無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました」という記事と、wとら様「【初心者向け】Cocoon(コクーン)で使えるCSSを追加する方法」という記事を、大変参考にさせて頂いております!

[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました | unlimited chaos
リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょ...
【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

お2人ともABOUTページなど拝読させて頂いたのですが、記事紹介NGでしたらご連絡ください!

CSSを追加して実際に変更してみました

以下が、私が追加しました 見出し変更のCSSコードになります。デフォルト設定のシンプルさが好きだったので、基本的にあまり大きくいじってはいないです。

見出し1(記事タイトル)

.article h1 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: solid 3px black;/*線の種類(実線) 太さ 色*/
}
デフォルトだと文字が詰まって感じたので、文字間隔を調整。
アイキャッチ画像が無い時でも、記事タイトルと本文の境界線をハッキリさせたいと思って 文字下に太線を引きました。

見出し2

.article h2 {
letter-spacing: 0.2em;/*文字間*/
color: #fff;/*文字色*/
background: #222222; /*背景色*/
padding: 0.5em 0.75em;/*文字周りの余白*/
border-radius: 0.3em;/*角の丸み*/
}
.article h2:before {margin-left: 0.5em;}
見出し1と同じく、文字間隔を調整。
背景色を薄いグレーから黒に変更したので、画面が重くならないよう 余白を調整して背景色部分を細くしました。サイドカラムのメニュータイトルと同じ印象になるような設定にしています。
「.article h2:before」の部分は文字の表示はじめ部分の微調整です。角丸にした場合、数字上で同じ余白に設定しても左に詰まった感じに見えてしまうため、このようにしています。

見出し3

.article h3 {
letter-spacing: 0.2em;/*文字間*/
border-left: solid 10px #77ccbb;/*左カラー*/
}
こちらもまず 文字間隔を調整。
デフォルトでは黒かったボックス左の部分を、サイトのキーカラーのひとつである 緑みの青(#77ccbb)に指定しています。

見出し4

.article h4 {
letter-spacing: 0.2em;/*文字間*/
border-color: #77ccbb;
}
こちらもまずは 文字間隔を調整。
デフォルトでは黒かった上下のラインを、サイトのキーカラーのひとつである 緑みの青(#77ccbb)に指定しています。
見出し5
.article h5 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: dashed 2px #77ccbb;
}
こちらもまずは 文字間隔を調整。
デフォルトでは黒かった文字下のラインを、サイトのキーカラーのひとつである 緑みの青(#77ccbb)に指定しています。遊び心でただの直線から点線に変更。
見出し6
.article h6 {
letter-spacing: 0.2em;/*文字間*/
border-bottom: 0px;
}
こちらもまずは 文字間隔を調整。
見出しも6ぐらいになったら、特に目立たせる内容で使わないな、と思い 下線を取り除いてあります。

まとめ

以上が、私のした Cocoonテーマの見出しのカスタマイズになります。
WordPressテーマのカスタマイズ記事、私も普段よく調べては参考にさせて頂いているので、この記事が誰かの参考になってくれたら嬉しいです。

もっと可愛く!装飾などにもこだわりたい方は、有名どころですが サルワカ様のCSSコード紹介ページが、とっても素敵ですよ!

コピペでつかえて、便利で簡単! 手っ取り早く見た目だけ変更したい方にもおすすめ!

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

Cocoonテーマは 他にもサイドメニューやヘッダーなどを地味~にいじくっているので、また紹介記事を書きたいと思います。

コメント

  1. アール より:

    はじめまして、アールと申します。ワードプレス初心者です。

    私もCocoonを使っているのですが、見出しをカスタマイズしたいと思ってこちらのサイトにたどりつきました。
    角を丸くしたかったので、このページがとても参考になりました。
    ありがとうございました。

    • カタアヤ カタアヤ より:

      アールさん
      コメントいただきありがとうございます! 私の拙い記事がアールさんのお役に立てたようで、とても嬉しく思います。
      すっかり更新が滞っておりますが、今後も初心者ならではの視点で カスタマイズ記事を書いていきたいと思っていますので、よかったらまた覗きにきてください!
      ご丁寧にご報告いただいて ありがとうございました。

  2. […] […]