どうも、妖狐(@yo_ko)です。
本記事ではワードプレス無料テーマ「Cocoon」のCSSが正常に反映されない時の対処法について解説いたします。
【Cocoon】子テーマのCSSが反映されない時に確認すべき４つの事
まず初めに、「Cocoon」にCSSを入力する箇所というのは２つしかありません。
１. 外観→カスタマイズ→追加CSS
⬇︎
２. 外観→テーマエディター→子テーマのスタイルシート
⬇︎
上記２箇所はどちらに記載しても反映されますので、まずはきちんとCSSが入力出来ているか確認しましょう。また、CSSコードが重複している場合は削除推奨です。
それでもまだきちんと反映されない時は、親テーマのCSSが邪魔をしている可能性があります。
親テーマのCSSを削除してみよう
原則として、ワードプレスを使用する際は子テーマが基準となります。親テーマを基準にすると、アップデート時に元に戻ってしまうからです。
しかし、何らかの原因で親テーマのCSSと子テーマのCSSが同時に反映された場合は、対処しないと表示がおかしくなります。例えば、私が使用しているH2は下記ですが、
⬇︎
親テーマの純正H２と同時に反映されたら、こんな感じになっちゃいます。
⬇︎
このように、要素が混ざり合って正確に反映されない場合は、親テーマの該当CSSを削除すると効果的です。
※ただし、スタイルシートをいじる際は予めバックアップを取っておかれる事をおすすめいたします。
親テーマの該当CSSを削除
親テーマのスタイルシートから該当部分を削除。当ブログのH２の場合なら、赤枠部分は必要ありません。
⬇︎
随分スッキリしました。これで正常にCSSが反映されます。
PHPとワードプレスのVer.を確認
他にもCSSが正常に反映されない原因として、動作環境があげられます。「Cocoon」公式サイトでは、PHPとワードプレスのVer.について記載されています。
・PHP７.０以上
・ワードプレス５.０以上
上記以外の環境では、「Cocoon」が正常に動作しない可能性があるという事です。必ず確認してアップデートしましょう。
ワードプレスのVer.アップデート方法
ダッシュボード→更新からアップデートが可能。旧バージョンを使っていたら自動的に教えてくれます。
PHPのVer.切り替え
PHPは各サーバーによって切り替え方が異なります。ここでは当ブログも使用しているエックスサーバーの切り替え方法について解説いたします。
１. インフォパネルからサーバー管理へ
⬇︎
２. 画面右下「PHP Ver.切替」へ
⬇︎
３. ドメインを選択
⬇︎
４. バージョンを切り替える
バージョン７.０以上が推奨ですが、出来れば最新のものにしておきましょう。
おわりに
・CSSの入力場所はあっているか？
・コードが重複していないか？
・親テーマと同時反映していないか？
・PHP &ワードプレスのVer.は大丈夫か？
以上４つがCSSが反映されない時の対策でした。まだわからない事がある場合は、「Cocoon」公式サイトのフォーラムに同じ問題がないか確認してみましょう。
コメント