こんにちは、さいとう（@S41T0H）です。
最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。
その中で多いのが「カスタマイズが適用されない！！！！！！！！」というもの。
せっかく当サイトを見つけてくださったのですから、こういった悩みはなくしたいものです。
そこで、今回は当サイトで紹介しているCSSカスタマイズの適用方法を紹介します。
カスタマイズがうまく動かない際にチェックしたい注意点もあわせて紹介しますよ。
めざせ悩み、ゼロ。
Cocoonカスタマイズ時のCSSはどこにコピペすればいい？
※必ず「子テーマ」を使用してください。
Cocoonをカスタマイズする際は、必ず子テーマ（Cocoon Child）を有効化してください。
子テーマは、Cocoonの配布ページにて配布されています。
もし親テーマを編集してテーマが正しく表示されなくなった場合は、慌てずにCocoon親テーマを再インストールしてみてください。
コピペするのは「テーマの編集」画面のstyle.css！
カスタマイザーの「追加CSS」画面からCSSを追加している方も多くいらっしゃいます。
しかし、WordPress標準のカスタマイザーは重く、画面も狭く見づらくなっています。
当サイトでは、CSSの追加は「外観」→「テーマの編集」から。
「子テーマ（Cocoon Child）」のスタイルシート（style.css）の編集をオススメしています。
この際、子テーマの下記ヘッダー部分を削除してしまわないように注意してください（下記は子テーマver.0.0.2のもの）。
正しく動かなくなります。
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 0.0.2
*/誤って削除してしまった場合は、焦らずに上記コードを子テーマstyle.css最上部にコピペして戻しておいてくださいね。
正しくCSSが追加できたら、エディター下部の「ファイルを更新」をクリックするのをお忘れなく。
カスタマイズが適用されない場合は「キャッシュを削除」しよう
「正しくコピペしたのに反映されねえー！！！」
そんなときは必ずキャッシュを削除したか確認してください。
キャッシュとは表示を高速化するための一時ファイルのこと。
一時的にデータを残しておくことで、不要な通信を避けるのですね。
しかし、このキャッシュが残ってしまうことで、行った設定が反映されないことがあるのです。
キャッシュには「サーバーキャッシュ」と「ブラウザキャッシュ」の2種類があります。
- サーバーキャッシュ
サイトのデータを保管しているサーバーがキャッシュしているデータのこと。
WordPressのプラグイン「LiteSpeed Cashe」などを使用しているとこのサーバーキャッシュが残ります。
LiteSpeed Casheを使用している方は、Cocoonの設定やCSSに変更を加えた際は必ず管理画面上部の◆の形をしたアイコンをクリックして「キャッシュをパージ」してください。
- ブラウザキャッシュ
Google Chromeなどのブラウザ側にもキャッシュが残ります。
こちらはCtrl+F5（Macの場合はCmd+Shift+R）のショートカットを使って再読込みすることでキャッシュをクリアすることができます。
こちらも忘れずに覚えておきましょう。
それでも解決しない場合はお問い合わせください
上記方法をすべて確認した上で、それでも解決しない場合は当サイトのコメント欄やTwitterのDMでお問い合わせください。
可能な限りご対応いたします。
また、ココナラではCSSカスタマイズの相談を承っています（有料）。
複雑な相談やオリジナルCSSカスタマイズの作成など、お気軽にご利用ください！
【支援お待ちしております！】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）
継続的な更新・サポートのためにご支援お願いいたします……！
▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！
その他のカスタマイズは下記ボタンから。
コメント
初めまして。
最近ワードプレスでHPを作成中なのですが、質問させていただけますか。
コクーンを適用しているのですが、CSSのスタイルを編集する際、初期に入っていたものを全て削除してしまいました。
元に戻すには全てを初期化するしかないのでしょうか。
お忙しい中お手数ですが、よろしくお願いします。
初めまして。テーマはcocoonを使っています。
ブログを始めたばかりで、わからない事がいっぱいあるのですが、
今１番困っているのが、見出しのカスタマイズが反映されない事です。
いろんな人の記事を読んでいろんなやり方を試したのですが、
元々の見出しと重なったり、
全く何も変わらなかったり、トップページの記事の下に反映されたり・・・
で、なかなかうまいこといきません。
今まで試した事↓
・キャッシュ系のプラグインを停止
・Simple Custom CSSを使う
・デフォルトを無効にするＣＳＳを貼ってから
希望の見出しのＣＳＳを貼る
もうほんとに何をやっても変わらなくて辛いです。。。
今はトップページに反映されたままです。
（貼ってたＣＳＳを消したのに、何故か消えなくて放置）
https://chonaolog.com/
教えてほしいです。お願いします(:_;)
こんばんは、さいとうさん
cocoonのカスタマイズ時、CSSをコピーする際にテーマの編集を開くとこんな画面が出ます。
↓
注意 !
WordPress ダッシュボードでテーマを直接編集しているようです。直接編集しないようお勧めします。直接テーマを編集するとサイトの崩壊につながるおそれがあります。また将来の更新により変更が失われる場合があります。
どうしても直接編集に進もうと決めた場合には、ファイルマネージャーを使って新しい名前でファイルのコピーを作成し、元のファイルを手放さないでください。 そのようにすれば、何かがうまく行かない場合でも、機能するバージョンのファイルを再び有効化できます。
テーマは子テーマが有効になっています。
どうしたら いいですか？
はじめまして。質問失礼致します。
アイキャッチ画像の項目がどこにも出てきません。
いろいろ検索して、試したのですが、表示オプションにはチェック入ってます。黒テンが縦に３つ並んでるところにも、出てきません。何が原因なのでしょうか？
はじめまして。質問失礼致します。
アイキャッチ画像の項目がどこにも出てきません。
いろいろ検索して、試したのですが、表示オプションにはチェック入ってます。黒テンが縦に３つ並んでるところにも、出てきません。何が原因なのでしょうか？