こんにちは、さいとう（@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カスタマイズの支援をお待ちしています！
その他のカスタマイズは下記ボタンから。
コメント