cocoonはワードプレスの無料テーマの中で、
無料テーマで1番使いやすい！！これ以上の無料テーマはない！！！
とわたしが敬愛してやまないテーマです。
参考記事
わたしのワードプレス開設ワークショップでもcocoonをインストールしてもらっています。
きょうはコピペだけで簡単にcocoonの見出しカスタマイズをする方法をお伝えしまーす！
cocoonデフォルトの見出し
cocoonのデフォルトの見出しはこんな感じ。
とってもシンプルなので、シンプル好き、モノクロ好きさんにはすごく良いかと思うんですが
もう少し装飾や色があったほうがいいな～という方には少し物足りない感じ。
これを、カスタマイズしていきます。
まずは今の見出し設定をリセットします
いま見出しに設定している背景色やボーダー(線)を、まずはすべてリセットする必要があります。
コピペするだけ！のようなサイトで紹介してくれている見出しのCSSを貼り付けても、リセットしていないとデフォルトの設定が残ったままになってしまうのでおかしな表示になっていしまいます。
例）
２重のオレンジ線だけにしたいのにグレーの背景色が残ってしまってる～！！
というわけで、このデフォルトの設定をリセットしてしまいましょう。
１．以下のコードをコピーしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* 見出しカスタマイズ */ /* H2 */ .article h2{ background:none; padding: 0; } /* H3 */ .article h3{ border-top:none; border-bottom:none; border-left:none; border-right:none; padding: 0; } /* H4 */ .article h4{ border-top:none; border-bottom:none; padding: 0; } /* H5 */ .article h5{ border-bottom:none; padding: 0; } /* H6 */ .article h6{ border-bottom:none; padding: 0; } |
２．コピーしたコードを以下に貼り付けます
ワードプレスの外観→テーマ編集の
「子テーマ用のスタイルを書く」
の下にペタッと貼り付けてください。
ぺたーーー！！
これでリセット完了！こんな感じになります。
どんな見出しにしたいかを選ぼう
いつもお世話になっているサルワカさんのサイトには、かわいい見出しがめちゃくちゃいっぱいあります。
ここから、どんな見出しにしようかなー？と選んでください。
もちろんサルワカさん以外のサイト様から選んでもらってもOKですよ～！
選んだら、コードを貼り付けるだけ
では例えば、
「上下に線」のデザインにしよう！という場合は、
赤枠の中だけコピーしてください。
コピーしたものを
外観→テーマの編集に貼り付けたコードの間に貼り付けます
「！」が表示されている場合はエラーなので、これを修正します
「！」が表示されない場合ももちろんあります！その場合はこれで終了～！
簡単！エラーの修正方法
エラーの原因は「padding」を2度指定しているから。
上のpaddingはリセットのために記述していたものです。
今回の見出しではリセットするのではなく新しい設定をするので、リセットするための記述を消してあげましょう
こんな感じ！
これでエラーも解消されて、完成です！
色を変えたい場合
色を変えたい場合は
ここのカラーコードを変えてくださいね。
※色は「 # 」から始まるコードで書かれていることが多いのでわかりやすいと思います！たまに、「 black 」とか英単語で指定されてることもあり。
参考記事
カラーコードを確認するのはこちらのサイトが便利です
カラーコードを変えてみると・・
こんな感じ！
さいごに
いかがでしたか？
コピペだけで簡単に見出しのカスタマイズができちゃいましたね！（デリートとかもいるけどなっ！）
今この記事を、作業はせずに文章だけ読んでる・・という方はあまりピンとこないかもしれませんのでぜひ実際に作業してみてください！
簡単さが実感できるので～！！
ではでは！
