WordPressのテーマ「Cocoon」には、さまざまなデザインのスキンが用意されています。
今回、新しく作ったブログに「Made in Heaven（メイドインヘブン）」というスキンを使ってみることにしました。
ヘッダーに動画が使えるみたいだったので、前から使ってみたかったんです。
実は以前にも使おうとしたことがあったのですが、ヘッダーの設定場所が見つからず、そのときは諦めてしまいました。
今回はもう一度挑戦してみることに。
ところが、最新版への更新からヘッダーの設定まで、思っていた以上に難しく、完成するまでにかなり時間がかかりました。
それでも、何とか設定することができました。
特に困ったのは、次の3つです。
- Cocoonでスキンを選択しただけでは、最新版になっていなかった
- 最新版をダウンロードして、サーバーのスキンフォルダに入れる方法がわからなかった
- ヘッダーなどの設定場所が、普段使っているCocoonと違っていた
今回は、実際にエックスサーバーで作業した経験をもとに、Made in Heavenの導入からカスタマイズまでをご紹介します。
※この記事は、2026年10月に作業した内容をもとにしています。スキンのバージョンやWordPressの環境によって、画面や操作方法が異なる場合があります。
Made in HeavenはCocoonで使えるスキン
Made in Heavenは、WordPressテーマ「Cocoon」で利用できるスキンです。
私もこれまでCocoonを使ってきたので、今回も同じように設定できると思っていました。
まずはWordPressの管理画面から、
「Cocoon設定」→「スキン」
を開いて、Made in Heavenを選択しました。
通常なら、これでスキンのデザインが反映されます。
しかし、今回使いたかった新しいバージョンにはなっていませんでした。
スキンを選択しただけでは最新版とは限らない
ここが最初につまずいたところです。
Cocoonに最初から入っているMade in Heavenを選択しても、配布元で公開されている最新版と同じとは限りません。
そのため、最新版を利用するには、別途ダウンロードして更新する必要がありました。
① Made in Heavenの最新版をダウンロードする
まず、Made in Heavenの配布元を開きます。
配布元の案内を確認し、最新版のスキンファイルをダウンロードしました。
👇ここにあります
私がダウンロードしたファイルは、
skin-made-in-heaven.zip
というZIP形式のファイルでした。
ここまでは、それほど難しくありませんでした。
問題は、このZIPファイルをどこに入れればよいのかということです。
通常のWordPressプラグインのように、管理画面からZIPファイルをアップロードする方法とは違いました。
② エックスサーバーのファイルマネージャーを開く
今回はエックスサーバーを利用しているため、サーバーのファイルマネージャーから作業しました。
- エックスサーバーの管理画面にログインする
- ファイルマネージャーを開く
- 対象ブログのフォルダを探す
- WordPressのテーマが保存されている場所まで移動する
今回、作業したスキンの保存場所は次のとおりです。
wp-content/themes/cocoon-master/skins/
この skins フォルダには、Cocoonで利用できるスキンが保存されています。
注意： サーバー内のファイルを間違えて削除・上書きすると、サイトが正常に表示されなくなる可能性があります。作業前に必ずバックアップを取ってください。
③ ダウンロードしたZIPファイルをスキンフォルダに入れる
ここが、今回一番苦労した作業でした。
ダウンロードしたZIPファイルを展開し、Cocoonの skins フォルダ内に、最新版のスキンファイルを正しく配置する必要がありました。
ただ、最初はZIPファイルのまま入れるのか、解凍してから入れるのかもわかりませんでした。
さらに、エックスサーバーのファイルマネージャーでは、普段パソコンでファイルを移動するときとは操作が違い、何度も迷ってしまいました。
ZIPファイルを展開する
スキンとして読み込ませるには、必要なファイルが正しいフォルダ構成で配置されていることが大切です。
ZIPファイルをアップロードした場合は、展開して中身を確認します。
フォルダが二重になっていたり、別の場所に保存されていたりすると、正しく反映されない可能性があります。
新しいフォルダと古いフォルダができてしまった
私の場合、作業中に次の2つのフォルダがありました。
skin-made-in-heaven：もともとあったフォルダskin-made-in-heaven-1：新しく追加したフォルダ
この状態で、どちらを使えばよいのかわからなくなりました。
そこで、新しくダウンロードしたフォルダの内容を確認し、既存のフォルダに必要なファイルをコピーして更新することにしました。
一度にまとめてコピーできない場面もあり、ファイルを一つずつ確認しながら進めました。
functions.phpなどのファイルも確認
作業中には、functions.php や style.css などのファイルも確認しました。
同じ名前のファイルがあるため、どちらが新しいものなのか、上書きしてよいのかがわかりにくかったです。
ここで注意したいのは、古いファイルと新しいファイルのコードを単純につなぎ合わせないことです。
更新するときは、配布元の手順に従い、必要なファイルを正しい場所に配置します。
また、自分で追加したコードや設定がある場合は、上書きによって消える可能性があるため、事前に保存しておく必要があります。
今回は何度もファイルを確認しながら、ようやく更新作業を終えることができました。
④ WordPressに戻ってスキンを確認する
サーバーでの作業が終わったら、WordPressの管理画面に戻ります。
「Cocoon設定」→「スキン」を開き、Made in Heavenが選択されていることを確認しました。
さらに、実際のブログを表示して、デザインが反映されているかを確認します。
ここまでできて、ようやくひと安心。
ところが、次はヘッダーの設定で迷うことになりました。
⑤ Made in Heavenのヘッダー設定はどこにある？
私はこれまでCocoonを使っていたので、今回も「Cocoon設定」からヘッダーを変更しようとしました。
ところが、探していたヘッダーの設定項目が見つかりません。
しばらく設定画面を探していたのですが、Made in Heavenでは、今回変更したかった項目の設定場所が違っていました。
「外観」→「カスタマイズ」から設定する
今回のMade in Heavenでは、次の場所から設定できました。
WordPress管理画面 → 外観 → カスタマイズ → Made in Heaven
ここを開くと、Made in Heaven用のカスタマイズ項目が表示されました。
普段のCocoon設定ばかり探していたので、なかなか気づけませんでした。
同じようにヘッダーの設定が見つからない方は、まず「外観」→「カスタマイズ」を確認してみてください。
Made in Heavenでヘッダーを動画にする方法
ヘッダーに動画を設定する場合は、次の順番で操作します。
- WordPress管理画面の「外観」を開く
- 「カスタマイズ」を選択
- 「Made in Heaven」を開く
- 「メインビジュアル」を選択
- 一番上の表示設定を「動画」に変更
- その下にある動画の設定欄に、使用したい動画を指定する
- 「公開」をクリックして保存する
通常のCocoon設定とは場所が違うため、最初は少し戸惑いました。
※通常のCocoonにもヘッダー関連の設定はあります。ここでは、今回Made in Heavenで変更したかったスキン独自の設定について説明しています。
⑥ カスタマイズしたら公開を忘れずに
設定を変更したら、画面上部の「公開」ボタンで変更を保存します。
プレビューでデザインが変わっていても、公開していなければ設定が保存されない場合があります。
最後にブログを開き直して、変更が反映されているか確認しました。
Made in Heavenの導入でつまずいたこと
今回、特に大変だったところをまとめておきます。
| 困ったこと | 解決方法 |
|---|---|
| スキンを選んでも最新版にならない | 配布元から最新版をダウンロードする |
| ZIPファイルの保存先がわからない | Cocoonの skins フォルダを確認する |
| 新旧2つのフォルダができた | フォルダ構成とファイルを確認する |
| ファイルをまとめてコピーできない | 必要なファイルを確認しながら作業する |
| ヘッダーの設定が見つからない | 外観→カスタマイズ→Made in Heavenを開く |
| 変更が反映されない | 保存状態やキャッシュを確認する |
まとめ｜Made in Heavenは更新方法と設定場所を知っておくと安心
今回は、Cocoonのスキン「Made in Heaven」を最新版に更新し、ヘッダーなどを設定するまでの作業をご紹介しました。
私が最初に勘違いしていたのは、Cocoonでスキンを選択すれば、最新版がそのまま使えると思っていたことです。
実際には、配布元から最新版をダウンロードして、サーバーのスキンフォルダを更新する必要がありました。
また、ヘッダーの設定場所も、普段使っているCocoonとは違っていました。
一度わかってしまえば理解できるのですが、初めての作業ではなかなか難しいものですね。
今回は何度も確認しながら、なんとか設定を終えることができました。
同じようにMade in Heavenの更新や設定で困っている方の参考になれば嬉しいです。
Made in Heavenで作ったブログはこちら
今回、Made in Heavenを使って、新しいブログ「筆と彩り｜私の己書日記」を作りました。
トップページのヘッダーには動画を設定しています。
実際にどのようなデザインになるのか、よかったらご覧ください。
👇 筆と彩り｜私の己書日記
コメント