【コピペOK】Cocoonの見出しカスタマイズ~ステップアップ編~

Cocoon

こんにちは。

BEGINNER NET(ビギナーネット)のいけだです。

 

前回はちょー簡単に見出しを変える方法をご紹介しました。
※こちらを読んでいない方は、ぜひ一度目を通してみてください。

~コピペOK~Cocoonの見出しを簡単カスタマイズ【追加CSS】がちょー便利!
初心者でも!CSSがわからなくても!コピペで簡単に見出しをかわいく変える方法をお伝えします!「カスタマイズしたいけど、やり方がむずかしそう」と思っている人にぜひ見ていただきたいです。WordPressテーマCocoonをご利用の方なら、すべてコピペで完了するようになっています。セレクタを変更すれば他のテーマにも対応できます。

 

今回は、そのステップアップ編ということで、

「もっと他の見出しがいいな~」

という方向けに、いろんな見出しデザインを用意してみました。

 

こんな見出しが作れます。

お好きなものを選んでコピペできるようになっています。

色や文字サイズの変更方法は後述していますので、さらにカスタマイズすることもできます。

こんな見出しが作れます

 

見出し変更手順

今のままでは元の設定が影響してしまうので、

まず元の見出しの設定(線と背景色)を消しておきましょう。

元の見出しの設定をリセットする

 

1.変えたい見出し(h1~h6)のコードをコピーして【追加CSS】に貼り付ける。

これで不要な線と背景色を一度リセットします。


 
【h1を変更する場合】
.article h1{
 padding: 0.6em;/*余白*/
}
 
【h2を変更する場合】
.article h2{
    padding: 0.6em;/*余白*/
    background: none;/*背景色をリセット*/
}
 
【h3を変更する場合】
.article h3{
    border: none;/*線をリセット*/
}
 
【h4を変更する場合】
.article h4{
    border: none;/*線をリセット*/
}
 
【h5を変更する場合】
.article h5{
    border: none;/*線をリセット*/
}
 
【h6を変更する場合】
.article h6{
    border: none;/*線をリセット*/
}
 

Cocoon以外のテーマをご利用の方は、セレクタを変えて使ってください。

↓赤文字がセレクタ
.article h1{
 padding: 0.6em;/*余白*/
}

 

追加CSSへの入力方法はこちらの記事にまとめています。

~コピペOK~Cocoonの見出しを簡単カスタマイズ【追加CSS】がちょー便利!
初心者でも!CSSがわからなくても!コピペで簡単に見出しをかわいく変える方法をお伝えします!「カスタマイズしたいけど、やり方がむずかしそう」と思っている人にぜひ見ていただきたいです。WordPressテーマCocoonをご利用の方なら、すべてコピペで完了するようになっています。セレクタを変更すれば他のテーマにも対応できます。

2.変更したい見出しデザインを選び、コードをコピーする。

下線

border-bottom: solid 3px #b2d8ff;

 

左線

border-left: solid 6px #b2b2ff;

 

上下に線

border-top: solid 3px #8d93c8;
border-bottom: solid 3px #8d93c8;

 

背景色

background: #f4f9ff;

 

背景色と下線

background: #f4f9ff;
border-bottom: solid 3px #cce5ff;

 

背景色と左線

background: #fff4f9;
border-left: solid 6px #ffd1e8;

 

ステッチ風

background: #fff7ef;
box-shadow: 0px 0px 0px 4px #fff4ea;
border: dashed 1px #ffd8b2;

 

マーカー風

background: linear-gradient(transparent 70%, #ffffcc 70%);

 

3.【追加CSS】に貼り付ける。

コピーした記述を、追加CSSに貼り付けて【公開】をクリックすれば完成です。

 

順番が大切!必ず先程リセットしたコードのに貼り付けてくださいね。

 

変更例

念のため、追加CSSへの記述の例を見てみましょう。
 
 
【h1をステッチ風に変更する場合】
.article h1{
 padding: 0.6em;
 background: #fff7ef;
box-shadow: 0px 0px 0px 4px #fff4ea;
border: dashed 1px #ffd8b2;
}
 
【h2を上下線に変更する場合】
.article h2{
   padding: 0.6em;
   background: none;
 border-top: solid 3px #8d93c8;
border-bottom: solid 3px #8d93c8;
}

 

【h2】の背景色をなくさずに、色だけ変更する場合は【 background: none;】ではなく、【 background: #色番号】という記述になります。

 

 

余白・色・文字サイズの変更方法

では、もっと自分好みにカスタマイズするための方法を見ていきましょう。

余白の変更

padding】は余白の設定です。h3~h6は元の設定のままにしてあります。

見出しのデザインによって余白をどれくらいとるか、変えたくなる場合もあるかと思います。

 

変更する場合は、数字の部分を少しずつ変えて調節してみてください。

h3~h6の余白を調節するときは、【padding: 0.6em;】コピペして数字を調節してくださいね。

 

色の変更

先ほどのコードの中で、色は【#8d93c8】この部分です。

この数字の部分を変えることで、色を変えることができます。

 

色選びには、このサイトが便利です。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

 

好きな色を見つけたら、【#4169e1】のように、シャープ+数字をメモします。

そして、メモした数字をCSSに入力すれば、お好きな色に変更できます。

 

文字サイズの変更

文字サイズを変えたい場合は、

font-size: 〇px; と入力してください。

 

Cocoonでは、通常の文字サイズ(見出し以外の文字)は18pxに設定されています。

数字が大きくなるほど文字サイズも大きくなります。

 

数字は偶数で指定しましょう。

(奇数にするとスマホでちゃんと表示されない場合があります。)