【初心者向け】Cocoonの見出しカスタマイズでの注意点

Cocoon

どうも。ままん(@maman_selfish)です。

カスタマイズの沼によく行っていたおかげで、カスタマイズ関連のネタがホイホイ思いつきます。笑

まず第1弾として、過去に苦戦した割にすっかり忘れていたCocoonにおける見出しカスタマイズの基本的な注意点について書いていきますね。

ブログカスタマイズで最初に手をつける方が多いのが、見出し部分のカスタマイズかと思います。

CSSってとこにコピペすれば楽々でしょ♪と思いがちですが、そう上手くいかないことも割とあるんですねぇ・・・。

よくあるのが、書いたCSSが反映されない問題や、なんか知らん線が出てくる問題

せっかく素敵なデザインのコードを貼り付けたのに反映されない!という場合に考えられる大きな原因は2つあります。

CSS反映されないあるある
  • コードの問題
  • キャッシュの問題
  • 実際にわたしもハマって『なんやねんCocoon!!ヲイ!!』となった経験があるので、ココに気をつけるといいゼ!☆というポイントをまとめてみます。

    参考になったらいいなと思いつつ書いていきます。

    スポンサーリンク

    コードの問題を解消する方法

    せっかく素敵なデザインのコードを貼ったのにどうして?!とパニックになりがちなCSS反映されない問題。

    そんなときは、まず1度落ち着いて貼ったコードをよく見てみることをおすすめします。

    コピー元のコードと、自分が貼り付けたコードをじっくりと見比べてみるところから始めてください。

    そもそもコードが間違っている

    わたし的に1番よくあると思うのが、コードのコピー漏れです。

    コードの1番最初にあることの多い【.】や、コードの最後にある【}】が漏れていることが結構あります。

    ここが漏れていると、コードが始まってすらいなかったりコードが終わっていなかったりして反映されません。

    そのコードはちゃんと始まっていますか?しっかり終わっていますか?

    また、ミスタッチなどでうっかり1文字足していたり、部分的に消してしまっていることもよくあります。

    1文字1文字擦り合わせるくらいの本気度で見比べるようにするといいですよ。

    必要なコードが足りていない

    出回っている見出しデザインは、コードが【.h2 {~】と始まるものが多いですよね。

    ところがCocoonでは、デフォルトの設定で【.article h2 {~】という、.h2よりも優先度の高いコードで見出しデザインの設定をしてあります。

    ですので、コピーしてきたものをそのまま貼り付けても全く反映されないはずです。(はい、経験者です!←)

    そんな時は、貼り付けたコードの【.h2 {~】の部分を【.article h2 {~】に書き換えると案外すんなり反映されるかもしれません。

    ・・・他の部分に問題がなければ←

    デフォルトのコードが干渉している

    素敵なデザインだと思ってCSSに書き込んだのに、なんか知らん線が出てきて素敵なデザインが台無し!なんてこともよくありますよね。

    この場合は、Cocoonのデフォルト設定が干渉している可能性が高いです。

    例えば、Cocoonのデフォルト設定で下に線が指定されているのに、新しく下に線の指定がないデザインをコピーしてきた場合は、デフォルトの下の線だけが取り残されてしまいます。

    Cocoonの場合、デフォルトで線の指定があるのはh3・h4・h5・h6ですね。

    これがなんか知らん線の正体の場合が多いです。

    そこで、h2~h6までの見出しごとにデフォルトコードと打ち消しコードを載せておきますね。

    h2見出しのデフォルトコード

    ▼ h2デフォルトのデザイン見本 ▼

    h2のデフォルト見出し

    ▼ デフォルトのCSS ▼

    .article h2 {
    font-size: 24px;/* フォントの大きさの指定 */
    padding: 25px;/* 見出し内の余白の指定 */
    background-color: #f3f4f5;/* 背景の色の指定 */
    }

    h2タグでは特に打ち消す必要のない部分の指定ばかりですので、打ち消しコードはいらないかなと思います。

    そのまま追記すれば反映されるはずです。

    h3タグのデフォルトコードと打ち消しコード

    ▼ h3デフォルトのデザイン見本 ▼

    h3のデフォルト見出し

    ▼ デフォルトのCSS ▼

    .article h3 {
    border-left: 6px solid #777; /* 左線の指定 */
    border-right: 1px solid #ccc; /* 右線の指定 */
    border-top: 1px solid #ccc; /* 上線の指定 */
    border-bottom: 1px solid #ccc; /* 下線の指定 */
    font-size: 22px; /* フォントの大きさの指定 */
    padding: 6px 20px; /* 見出し内の余白の指定 */
    }

    ▼ デフォルトの打ち消し(部分) ▼

    .article h3 {
    border-left: none; /* 左線の打ち消し */
    border-right: none; /* 右線の打ち消し */
    border-top: none; /* 上線の打ち消し */
    border-bottom: none; /* 下線の打ち消し */
    }

    それぞれの線を個別で消したい場合にお使いください。

    そのまま使いたい線がある場合は、使いたい線の行だけ消してコピーしてくださいね。

    ▼ デフォルトの打ち消し(全て) ▼

    .article h3 {
    border: none; /* 全ての線の打ち消し */
    }

    デフォルトの線は全ていらないという場合は、このコードをそのままコピーしてくださいね。

    h4タグのデフォルトコードと打ち消しコード

    ▼ h4デフォルトのデザイン見本 ▼

    h4のデフォルト見出し

    ▼ デフォルトのCSS ▼

    .article h4 {
      border-top: 2px solid #ccc;
      border-bottom: 2px solid #ccc;
    }

    ▼ デフォルトの打ち消し(部分) ▼

    .article h4 {
      border-top: none;
      border-bottom: none;
    }

    上下の線を個別で消したい場合にお使いください。

    どちらかの線はそのまま使いたいという場合は、使いたい線の行だけ消してコピーしてくださいね。

    ▼ デフォルトの打ち消し(全て) ▼

    .article h4 {
      border: none;
    }

    デフォルトの線は全ていらないという場合は、このコードをそのままコピーしてくださいね。

    h5タグのデフォルトコードと打ち消しコード

    ▼ h5デフォルトのデザイン見本 ▼

    h5のデフォルト見出し

    ▼ デフォルトのCSS ▼

    .article h5 {
      border-bottom: 2px solid #cccccc;
    }

    ▼ デフォルトの打ち消し ▼

    .article h5 {
      border-bottom: none;
    }

    下の線だけなので、いらない場合はそのままコピーしてくださいね。

    h6タグのデフォルトコードと打ち消しコード

    ▼ h6デフォルトのデザイン見本 ▼

    h6のデフォルト見出し

    ▼ デフォルトのCSS ▼

    .article h6 {
      border-bottom: 1px solid #cccccc;
    }

    ▼ デフォルトの打ち消し ▼

    .article h6 {
      border-bottom: none;
    }

    下の線だけなので、いらない場合はそのままコピーしてくださいね。

    スポンサーリンク

    キャッシュの問題を解消する方法

    最近のインターネッツさんは大変優秀ですので、1度開いたページに関して設定などを記憶し、次に開いた際にサクッと開けるようにしてくれる機能があります。

    この記憶がキャッシュと呼ばれるものです。

    ですから、CSSを書き込む前の記憶(キャッシュ)が残っている場合は、せっかくの素敵なデザインが反映されないように見えることがあるんですね。

    この場合は、Chromeなどからキャッシュを削除してみましょう。

    スポンサーリンク

    見出しカスタマイズの注意点まとめ

    わたしがブログテーマをCocoonに変更して、1番最初にカスタマイズしたのが見出しでした。

    全然反映されなかったり変な線が出たりと、ここに書いたカスタマイズあるあるは自ら全て経験済みです。

    ここで再度、見出しカスタマイズの注意点についてまとめておきます。

    見出しカスタマイズ注意点まとめ

    • コピーでのミスが案外多いので1文字1文字照らし合わせつつ確認する
    • Cocoonの場合は、.h2~ではなく.article h2~となるので必ず修正する
    • デフォルトの線が残ることが多いので必ず打ち消しコードも貼る
    • コピーしてきたコードに間違いがない場合はキャッシュのクリアをする

    カスタマイズを始めたばかりの頃は、なかなか1回で上手くいかないこともあるかもしれません。

    でも、思った通りのカスタマイズが自分のブログに反映された時のうれしさをぜひ経験して欲しいと思います。

    もしすでにCSSに書き込んでいる際は、必ずバックアップ(全文コピーしてメモにでも貼り付けておく)を取り、いろいろなカスタマイズを楽しみましょう♪

    コメント