【Cocoon】初心者でも簡単!見出しデザインのカスタマイズ

Cocoon 見出しのカスタマイズ Cocoon

こんにちは、ikuzo(いくぞう)です。

今回は見出し(h2~h6)のカスタマイズについて説明させていただきます。

しかも、とても簡単なやり方です。

いつも通り、初心者の方にも分かりやすいように図を交えて解説していきます。

見出しの付け方やルールがよく分からない、という方はこちらの記事も読んでみて下さい。

【WordPress】見出しの付け方とルールをかんたんに解説
スポンサーリンク

CSSの書き方

カスタマイズはCSSを使います。

余談ですが、私は1年半前にブログを始めて、それまではCSSの「し」の字も知りませんでした。

今、私がこうやってCSSを多少でも語れるのはサルワカさんの「CSS入門」のおかげです。

とても分かりやすく書いてあるので、これからCSSを勉強しようと思っている方に

サルワカさんの「CSS入門」は超おすすめです。

初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!
初心者でも理解できるよう0からCSSについて解説します。CSSとは何か?からCSSの書き方まで丁寧に図解していきます。

 

といいつつも、今回はCSSを勉強しなくてもカスタマイズできるように進めてまいりますので、

初心者の方はどうぞご安心下さい(^_^)

一応、CSSの書き方だけ覚えてくださいね。

CSSの書き方はこのように決まってます。

CSSの基本文法

セレクタで「どこの」、プロパティで「なにを」、値で「どうする」かを指定します。

つまりここでは、.article h2見出し2の){color文字の色を):blue青にする);}と指定してます。

プロパティと値の間には : コロン)を入れて、

複数のプロパティを指定する場合は ; セミコロン)で区切ります。

セレクタの調べ方

これも一応なんですが、セレクタを調べる方法も書いておきます。

サルワカさんの記事でCSSを勉強して、あとはセレクタさえ調べることができれば、

けっこう自分ひとりで色んなところがカスタマイズできるようになりますよ。

 

セレクタを調べるには、Google Chromeを使います。

調べたい場所(今回は見出しですね)の上で右クリック→「検証」を押します。

見出しの上で右クリック→「検証」を押す

 

すると画面右側にデベロッパーツールというものが開きます。

デベロッパーツールが開いた

 

かなりゴチャゴチャして最初は見づらいと思いますが、「Styles」と書かれた下に

見出しの背景色(background)や文字の色(color)などが書かれたCSSが表示されています。

その先頭にあるのがお目当てのセレクタです。

見出しのセレクタを発見

 

これでCocoonの「見出し2」のセレクタは、[.article h2]ということが分かりました。

同じように調べてみると「見出し3」のセレクタは[.article h3]

「見出し4」のセレクタは[.article h4]ということが分かります。

 

スポンサーリンク

デザインを選んで見出しのカスタマイズ

セレクタさえ見つけてしまえば、あとは簡単です。

サルワカさんのサイトに68個のデザイン例があるので、そこから好きな見出しを選びましょう。

見出しの色は後から変えることができるので、とりあえずデザイン重視で選んで下さい。

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

 

使う見出しが決まったら「コードを表示」を押して、CSSをコピーします。

見出しのCSSをコピー
サルでも分かる図解解説マガジン(サルワカ様)の一部を使わせていただきました。

 

このCSSをCocoonのスタイルシートに貼り付けます。

やり方は、ダッシュボードの「外観」→「テーマエディター」をクリック。

ダッシュボードの「外観」→「テーマエディター」をクリック

 

スタイルシートが「Cocoon Child」になっていることを確認します。

もし別のものになっていたら「Cocoon Child」を選択して下さい。

スタイルシートが「Cocoon Child」になっていることを確認

 

「** 子テーマ用のスタイルを書く」という欄がありますので、そこに先ほどコピーしたCSSを貼り付けます。

見出しのCSSを貼り付けた

スタイルシートは、必ずバックアップをとっておきましょう。スタイルシートのCSSを全てコピーしてメモ帳などに貼り付けておけば、何かトラブルがあってもすぐに元に戻せます。

 

このデザインを見出し2で使う場合は[h1]の部分を、見出し2の[.article h2]に変更します。

見出し3にする場合は[.article h3]、見出し4なら[.article h4]を使います。

セレクタを「.article h2」に差し替えた

 

[h1]の後ろに[:before]や[:after]がある場合も、[h1]の部分だけを変更します。

[h1]の部分だけを差し替え

 

これはやってもやらなくてもいいですが、

こんなふうに説明書きをつけておくと後で何のCSSなのかが一目で分かりますよ。

( /* と */で挟めば、CSSには一切影響しません。)

説明書きをつけたCSS

 

最後に一番下にある「ファイルを更新」を押します。

「ファイルを更新」を押す

 

これで見出し2が変わりました。

見出し2が変わった

 

しかし、背景に青っぽい色がついてますね。

サルワカさんのデザインでは、背景色は白(無色)でした。

見出しは、スキンやキーカラーなどによって予期せぬ影響を受けることがあります。

次の章では、この対処法やカスタマイズした見出しの調整方法を説明します。

 

スポンサーリンク

カスタマイズした見出しを調整する

見出しの背景色を変更

では、さきほどの色のついた背景を無色にしましょう。

次のCSSをスタイルシートに追加します。

background: none;/*背景色を消す*/

[background]は背景のプロパティで、値の[none]は消去するときに使います。

背景色を消すCSSを追加した

背景色が消えた見出し2

 

もしCSSを追加したのに変化がなければ、

次の章にCSSが効かないときの対処法を書きましたので、試してみて下さい。

[none]の代わりに#6桁のカラーコードを入れると、好きな色をつけることも可能です。

ためしに[#ffff00]を入れて、背景を黄色にしてみましょう。

見出しの背景を黄色にするCSSを追加した

背景が黄色になった見出し2

基本的なカラーコードを探すには、こちらが便利です ⇒ カラーコード表

見出しの文字色と文字の大きさを変更

文字の色も、カラーコードを指定して好きな色に変更できます。

文字色を赤にするCSS

文字の色が赤になった見出し2

 

文字の大きさを変えるには、次のCSSを追加します。

現在24px(ピクセル)の文字を18pxに変更してみます。

font-size: 18px;/*文字の大きさ18px*/

見出しの文字を18pxに変更するCSSを追加した

文字の大きさが小さくなった見出し2

見出しの線の種類・太さ・色を変更

線はひとつのプロパティで、3つの値(種類・太さ・色)を一度に指定できます。

線のプロパティと値の書き方
※値は1つか2つだけでも可。

 

3つの値の順番に決まりはありません。

ただし、値の間には必ず半角スペースを入れましょう。

プロパティは、4方向すべてを指定できる[border]と、4方向のうち一つだけを指定するものがあります。

線のプロパティ 線の位置
border 4方向すべて
border-top 上の線だけ
border-right 右の線だけ
border-bottom 下の線だけ
border-left 左の線だけ

線の種類

[solid]は実線で、他に点線[dotted]や破線[dashed]、二重線[double]などがあります。

HTML 線の種類

 

実線を点線に変えてみましょう。

見出しの上下の線を点線にするCSS

上下の線が点線になった見出し2

線の太さ

太さは[3px]の数字を大きくすれば太く、小さくすれば細くなります。

指定していないのに、スキンなどの影響で線が残ってしまう場合は、

値を[0px]もしくは[none]で指定すれば線を消去できます。

上の線を消して(線を消す見本のCSSです)、下の線を[6px]にしてみます。

見出しの上の線を消して、下の線を6pxにするCSS

上の線が消えて下の線が6pxになった見出し2

見出しの余白を変更

余白はプロパティ[paddingパディング]で指定します。

見出し(余白)のCSS

 

paddingの値は[0.5em 0]になっていますが、

これは上下の余白が0.5文字分で、左右の余白がゼロという意味です。

見出しの上下と左右の余白

 

文字の左側にも0.5文字分の余白を入れるには、

paddingの値を[0.5em 0.5em]、もしくは[0.5em]にします。

値を[0.5em]ひとつにすると、4方向とも0.5文字分の余白になります。

paddingの値を[0.5em]ひとつにした

 

4方向をバラバラで指定する場合は、値を上・右・下・左の順番で書きます。

上から時計回りと覚えましょう。

見出しの余白を4方向バラバラに指定したCSS

左の余白0.5emと1.0emの比較

 

スポンサーリンク

CSSが効かないときの対処法

以上が見出しのカスタマイズと調整のやり方でしたが、もし

指定したはずのCSSが効かない、なんてときは次の方法を試してみて下さい。

誤字脱字がないか確認する

ひとつでも文字が抜けたり、間違った文字を使っているとCSSは効かなくなります。

また全角文字を使うのもNGです。

スペースを含めて、文字はすべて半角を使って下さい。

コピペをやめて手で入力してみる

面倒だと思いますがコピペしたCSSが効かない場合は、手で入力し直してみると案外あっさり効くこともあります。

理由は分かりませんが「コピペだから間違いないだろう」と思わずに、ダメ元でやってみて下さい。

デベロッパーツールで調べてみる

CSSが効かないときもデベロッパーツールが役に立ちます。

プレビュー画面でデベロッパーツールを開くと、CSSが有効か無効かが一目で分かります。

こんなふうに!マークがあって取り消し線が引かれていると、そのCSSは何かしらの理由で無効になってます。

取り消し線が引かれて無効なCSS

 

あとは余分なスペースも消してみましょう。

プロパティの前は見やすいように余白を設けていますが、

私の経験上、この余白が原因でCSSが効かないということがありました。

プロパティの前に余白がある無効なCSS

プロパティの前にある余白を消せば解決するかも

[!important]を追加してみる

どうしてもCSSが効かない場合は値とセミコロンの間に[!important]を入れてみましょう。

値とセミコロンの間に[!important]を入れたCSS

他のCSSが干渉していて、指定したはずのCSSが効かない、なんてことがよくあります。

[!important]を入れるとそのCSSが最優先になるので試してみて下さい。

最後に

お疲れさまでした。

サルワカさんの見出しに、ちょこちょこっと手を加えるだけで様々なバリエーションの見出しが出来上がりますね。

見出しは、初心者の方でも手をつけやすい部分なので、あれこれ試してみて下さい。

カスタマイズしているうちにCSSにも慣れてくると思います。

本日は最後まで読んでいただき、ありがとうございました。

コメント

  1. 寺田 より:

    大変参考になりました。
    トラック運転手さんなのにこんなに詳しくなれるのだなと勇気を貰いました。

    私もサルワカさんのブログを一から読み直してお勉強しようと思います。

    最近cocoonにテーマを変更したのでいくぞーさんのブログに行き着けました。
    勝手に縁だと思ってます。

    ありがとうございます

    • ikuzo|いくぞう より:

      寺田さん、こんにちは。
      コメントをいただき、ありがとうございます。

      サルワカさんのサイトは最高に分かりやすいです。
      ブログを始めて2年ですが、サルワカさんにはいっぱい知識をもらいました。
      ただ…、始めてまだ2年なので間違った情報を発信してないか、常にドキドキしながら書いてます(笑)

      今後とも当ブログを宜しくお願い致します。
      こちらこそ素敵なご縁をありがとうございます(^_^)