今回の記事では「Cocoonをインストールしてスキンを設定したのに見た目が変わらない！」という問題を解決していきます。
結論から言うとSSL(HTTPS)化を行った時に、一部のコードにHTTPが残ってしまっているのが原因です。
スキンの適用が出来ないとCocoonを使っているメリットの多くを失っているといっても過言ではありません。是非これを機会にこの問題を解決してブログのデザインを改善して行きましょう。
またこの記事に記載している対応を行い問題が起きた場合には、出来る範囲でこちらでも調査はしますが、あくまで自己責任で変更をお願いします。
スキンとは
問題の解決の前に簡単にスキンとは何かについて触れておこうと思います。
Cocoonではブログのデザインを簡単に変更出来るスキンが色違いなども含めると50種類ほど用意されています。
これらのスキンはどれもクオリティが高く、そしてボタン1つで変更出来るので初心者の方でもブログのデザインに時間を掛けること無くすぐに記事の作成に取り組めるというメリットがあります。
Cocoonのスキンが反映されない
ここからが本題です。
本来ならCocoonの設定画面からボタン1つで簡単に変更出来るスキンですが、ワードプレスの設定やCocoonのインストールしたタイミングによっては正常に反映されない場合があります。
この現象になっていると、Cocoonの設定画面のプレビューに何も表示されなくなるのが特徴です。
もしスキンが反映されない問題に直面していて、このプレビューが表示されていないのであれば今回の対応で改善する可能性が高いです。
エラーを確認しよう
スキンが反映されない事を確認したら下記の手順で実際のエラー内容を確認してみましょう。
- スキンを設定した状態でブログを開く
- スキンが反映されていないことを確認する
- ブログ内の適当な部分を右クリックし、「検証」を選択
- 画面右、または下に新たな表示領域が出現するので「Console」を選択する
- 画面に赤い文字で英語の文章が表示されているかを確認する
スキンが反映されない方の殆どはこのMixed Contentのエラーが出ているのが原因です。
このエラー内容を要約するとブログ本体はHTTPSになっていてセキュリティ的に安全だが、読み込もうとしているCocoonのスキン(css)はHTTPになっていて安全ではないのでブロックしましたというものになっています。
ワードプレスの設定を確認しよう
エックスサーバー
などでは管理画面からボタン1つで簡単にSSL化を行うことが出来ます。
しかしサーバーの設定を変更してもワードプレスの設定内のURLはHTTPのまま残ってしまうケースがあります。
- ブログの管理画面を開く
- 設定の一般を選択
- WordPressアドレスとサイトアドレスがhttpsになっているかを確認
もし先程のMixedContentのエラーが出ていて上記の設定がhttpの場合は「https://ブログのドメイン」となるように修正をして保存しましょう。
ワードプレスの設定を変更しても直らない場合
上記のワードプレスの設定を変更しても直らない場合があります。
その場合はCocoonのテーマを再度インストールしなおしましょう。
アンインストールと聞くと怖いですが記事の内容は消えないので安心してください。
ただテーマのカスタマイズを独自で行っていた場合は消えてしまうのでそこだけメモ帳などに追加した内容を保存しておきましょう。
Cocoonの削除方法
Cocoonのアンインストールは下記の方法で行います。
- ブログの管理画面を開く
- 外観 => テーマの順番で選択をする
- Cocoon以外のテーマを有効にする
- Cocoonのテーマ詳細を開く
- 右下の「削除」ボタンを選択して削除
またCocoonを削除する際にはCocoonの子テーマも念の為同じ手順で削除しておきましょう。
有効（使用中）になっているテーマは削除が出来ないので、他のテーマに切り替えてから削除を行いましょう。
Cocoonを再インストール
削除が終わったら再度Cocoonをダウンロードしてテーマのアップロードを行いましょう。
子テーマのダウンロードも忘れないようにしましょう。
Cocoonの設定画面を確認する
ダウンロードをし、外観のテーマから再度アップロードが完了したら、Cocoonの子テーマを有効にしてみましょう。
そして「Cocoon設定」の画面を開き、プレビューが表示されているかを確認しましょう。
プレビューが表示されてスキンの反映も出来るようになっていれば解決です。
スキンが反映されなくなった原因
これはあくまで僕がこの問題に直面した時の状況からの推測ですが、ワードプレスの一般設定のURLがHTTPの状態でCocoonをインストールするとこの問題が発生するのではと考えています。
- 別のテーマを使用していた
- SSL（HTTPS）化を行った
- Cocoonにテーマを変更
- スキンのプレビューが表示されずスキンも反映されない
- ワードプレスの一般設定のURLがHTTPのままだったので修正
- まだスキンが反映されない
- Cocoonを再インストール
- スキンが反映されるようになった！ 解決！
まとめ
公式のフォーラムでもスキンが反映されない問題についての報告はありましたが、この方法では僕の環境では直りませんでした。
そこで僕なりに色々と調べて解決した流れが今回の内容となります。
今回紹介した方法はあくまで1つの解決方法として参考にしてもらえればと思います。
またこの対応を行って問題が起きた場合はコメントを頂ければ分かる範囲で対応はしますが、あくまで自己責任で対応をお願いします。
国産のWordPressテーマ、「STORK19」
はブロックエディタ（Gutenberg）にも最適化された最新のテーマです。マニュアルなしでも利用可能なほどシンプルで使いやすいテーマなので、ブログカスタマイズにお悩みの方はテーマ変更を検討してみるのもありです
