【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。

Cocoonカスタマイズ

こんにちは、さいとう(@S41T0H)です。

最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。

その中で多いのが「カスタマイズが適用されない!!!!!!!!」というもの。

せっかく当サイトを見つけてくださったのですから、こういった悩みはなくしたいものです。

そこで、今回は当サイトで紹介しているCSSカスタマイズの適用方法を紹介します。

カスタマイズがうまく動かない際にチェックしたい注意点もあわせて紹介しますよ。

めざせ悩み、ゼロ。

スポンサーリンク

Cocoonカスタマイズ時のCSSはどこにコピペすればいい?

※必ず「子テーマ」を使用してください。

Cocoonをカスタマイズする際は、必ず子テーマ(Cocoon Child)を有効化してください。

子テーマは、Cocoonの配布ページにて配布されています。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。
子テーマを使用せず親テーマを直接編集すると、アプデ時に上書きされてしまったり、テーマ自体に不具合をきたす可能性があります。
もし親テーマを編集してテーマが正しく表示されなくなった場合は、慌てずにCocoon親テーマを再インストールしてみてください。

コピペするのは「テーマの編集」画面のstyle.css!

カスタマイザーの「追加CSS」画面からCSSを追加している方も多くいらっしゃいます。

しかし、WordPress標準のカスタマイザーは重く、画面も狭く見づらくなっています。

当サイトでは、CSSの追加は「外観」→「テーマの編集」から。

「子テーマ(Cocoon Child)」のスタイルシート(style.css)の編集をオススメしています。

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カスタマイズの作成など、お気軽にご利用ください!

ブログのCSSカスタマイズ相談に乗ります WordPress初心者ブロガーの方向け|WordPress制作・カスタマイズ | ココナラ
【自己紹介】 WordPress向け無料テーマ「Cocoon」のCSSカスタマイズを紹介しているサイト『LISBLO.』 を運営し...

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント