ブログ PR

Cocoonでスキンが反映されない問題を解決!思い通りのスキンを反映出来るようにしよう

Cocoonでスキンが 反映されない問題を解決! 好きなスキンを反映出来るようにしよう
記事内に商品プロモーションを含む場合があります

今回の記事では「Cocoonをインストールしてスキンを設定したのに見た目が変わらない!」という問題を解決していきます。

結論から言うとSSL(HTTPS)化を行った時に、一部のコードにHTTPが残ってしまっているのが原因です。

 

スキンの適用が出来ないとCocoonを使っているメリットの多くを失っているといっても過言ではありません。是非これを機会にこの問題を解決してブログのデザインを改善して行きましょう。

 

今回の対応は公式のフォーラムに記載されている方法では解決しなかった場合の対処法として記載しています。まだ公式のフォーラムを確認されていない方は、下記のリンクの内容を確認し、解決しなかった場合にこの記事の内容をお試しください。

Cocoonテーマに関する質問 | スキンが反映されない

またこの記事に記載している対応を行い問題が起きた場合には、出来る範囲でこちらでも調査はしますが、あくまで自己責任で変更をお願いします。

スキンとは

問題の解決の前に簡単にスキンとは何かについて触れておこうと思います。

Cocoonではブログのデザインを簡単に変更出来るスキンが色違いなども含めると50種類ほど用意されています。

cocoon-skin

これらのスキンはどれもクオリティが高く、そしてボタン1つで変更出来るので初心者の方でもブログのデザインに時間を掛けること無くすぐに記事の作成に取り組めるというメリットがあります。

Cocoonのスキンが反映されない

ここからが本題です。

本来ならCocoonの設定画面からボタン1つで簡単に変更出来るスキンですが、ワードプレスの設定やCocoonのインストールしたタイミングによっては正常に反映されない場合があります。

この現象になっていると、Cocoonの設定画面のプレビューに何も表示されなくなるのが特徴です。

cocoon - スキンプレビューが真っ白

もしスキンが反映されない問題に直面していて、このプレビューが表示されていないのであれば今回の対応で改善する可能性が高いです。

エラーを確認しよう

スキンが反映されない事を確認したら下記の手順で実際のエラー内容を確認してみましょう。

エラーの確認方法

  1. スキンを設定した状態でブログを開く
  2. スキンが反映されていないことを確認する
  3. ブログ内の適当な部分を右クリックし、「検証」を選択
  4. 画面右、または下に新たな表示領域が出現するので「Console」を選択する
  5. 画面に赤い文字で英語の文章が表示されているかを確認する
右クリックで検証を選択
右クリックで検証を選択
Consoleを選択
Consoleを選択
cocoon_mixed-content-error
エラーの内容

スキンが反映されない方の殆どはこのMixed Contentのエラーが出ているのが原因です。

このエラー内容を要約するとブログ本体はHTTPSになっていてセキュリティ的に安全だが、読み込もうとしているCocoonのスキン(css)はHTTPになっていて安全ではないのでブロックしましたというものになっています。

ワードプレスの設定を確認しよう

エックスサーバーなどでは管理画面からボタン1つで簡単にSSL化を行うことが出来ます。

しかしサーバーの設定を変更してもワードプレスの設定内のURLはHTTPのまま残ってしまうケースがあります。

ワードプレス内の設定確認方法

  1. ブログの管理画面を開く
  2. 設定の一般を選択
  3. WordPressアドレスとサイトアドレスがhttpsになっているかを確認
ワードプレス - 一般設定

もし先程のMixedContentのエラーが出ていて上記の設定がhttpの場合は「https://ブログのドメイン」となるように修正をして保存しましょう。

ワードプレスの設定を変更しても直らない場合

上記のワードプレスの設定を変更しても直らない場合があります。

その場合はCocoonのテーマを再度インストールしなおしましょう。

アンインストールと聞くと怖いですが記事の内容は消えないので安心してください。

ただテーマのカスタマイズを独自で行っていた場合は消えてしまうのでそこだけメモ帳などに追加した内容を保存しておきましょう。

Cocoonの削除方法

Cocoonのアンインストールは下記の方法で行います。

Cocoonの削除方法

  1. ブログの管理画面を開く
  2. 外観 => テーマの順番で選択をする
  3. Cocoon以外のテーマを有効にする
  4. Cocoonのテーマ詳細を開く
  5. 右下の「削除」ボタンを選択して削除

またCocoonを削除する際にはCocoonの子テーマも念の為同じ手順で削除しておきましょう。

有効(使用中)になっているテーマは削除が出来ないので、他のテーマに切り替えてから削除を行いましょう。

Cocoonを再インストール

削除が終わったら再度Cocoonをダウンロードしてテーマのアップロードを行いましょう。

Cocoonテーマのダウンロード

子テーマのダウンロードも忘れないようにしましょう。

Cocoonの設定画面を確認する

ダウンロードをし、外観のテーマから再度アップロードが完了したら、Cocoonの子テーマを有効にしてみましょう。

そして「Cocoon設定」の画面を開き、プレビューが表示されているかを確認しましょう。

プレビューが表示されてスキンの反映も出来るようになっていれば解決です。

スキンが反映されなくなった原因

これはあくまで僕がこの問題に直面した時の状況からの推測ですが、ワードプレスの一般設定のURLがHTTPの状態でCocoonをインストールするとこの問題が発生するのではと考えています。

スキンが反映されなかった時の流れ

  1. 別のテーマを使用していた
  2. SSL(HTTPS)化を行った
  3. Cocoonにテーマを変更
  4. スキンのプレビューが表示されずスキンも反映されない
  5. ワードプレスの一般設定のURLがHTTPのままだったので修正
  6. まだスキンが反映されない
  7. Cocoonを再インストール
  8. スキンが反映されるようになった! 解決!

まとめ

公式のフォーラムでもスキンが反映されない問題についての報告はありましたが、この方法では僕の環境では直りませんでした。

そこで僕なりに色々と調べて解決した流れが今回の内容となります。

今回紹介した方法はあくまで1つの解決方法として参考にしてもらえればと思います。

またこの対応を行って問題が起きた場合はコメントを頂ければ分かる範囲で対応はしますが、あくまで自己責任で対応をお願いします。

 

国産のWordPressテーマ、「STORK19」はブロックエディタ(Gutenberg)にも最適化された最新のテーマです。マニュアルなしでも利用可能なほどシンプルで使いやすいテーマなので、ブログカスタマイズにお悩みの方はテーマ変更を検討してみるのもありです

STORK19

ABOUT ME
himakuro
新卒で入社したブラック企業から脱出して超ホワイトな会社に転職。エンジニア歴は7年で普段はウェブサービス作ったりブログを書いたり、MENTAで未経験者の方にプログラミングを指導しています。
PR
RUNTEQ(ランテック)|超実戦型エンジニア育成スクール