この記事では、Cocoonのテーマファイルに同梱されていない独自スキンをサーバーにアップロードする方法と、アップロードしたスキンを適用する方法を紹介します。
独自スキンをアップロードする
ここでは、以下の3つの方法でスキンをアップロードします。
好きなものを選んでアップロードしてください。
- FTPクライアントソフト（FFFTP）
- エックスサーバーの「ファイルマネージャー」
- ロリポップの「ロリポップ！FTP」
FTPクライアントソフトの場合、ソフトのダウンロードや接続設定などの事前作業がありますが、それさえ終わってしまえば、簡単にアップロードできます。
レンタルサーバーがエックスサーバーかロリポップの場合は、FTPクライアントソフトは不要です。
独自のFTP接続ツールを使ってアップロードしますが、多少手順が長いです。
また、どの手順の場合でもアップロードの前提条件があるので、次の「子テーマへのアップロードが前提」をよく読んで、アップロードの手順に進んで下さい。
子テーマへのアップロードが前提
ここで紹介する手順は、親ではなく子テーマの方にアップロードする前提となっているため、子テーマが有効になっている必要があります。
もし、親テーマの場合、Cocoonのバージョンアップのたびにスキンの再アップロードとなるので、非常に面倒です。
子テーマの場合は、バージョンアップがあってもスキンは残るので、削除される心配はありません。
ちなみに、Cocoonの公式サイトでも以下のように書かれていますが、「子テーマを有効化」することが推奨されています。
親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。
引用元：Cocoonテーマをインストールする方法 | Cocoon
子テーマをインストールすることで、テーマカスタマイズを保持したままアップデートができます。
CSSやテンプレートをカスタマイズしない場合でも、子テーマを利用することをおすすめします。
現在の有効状態を確認する
現在、親テーマ、子テーマのどちらが有効になっているかわからない場合は、次の手順で確認できます。
WordPressの管理者画面のメニューから、「外観」→「テーマ」を選択。
子テーマもインストールされている場合は、以下のようにCocoonの画像が２つ表示されます。
この時、「有効」と表示されているテーマの方が有効な状態です。
下の画像では「Cocoon」の表示がある親テーマの方が有効。（子テーマは「Cocoon Child」）
「Cocoon Child」のテーマ画像が表示されていない場合は、子テーマがインストールされていないため、以下の記事を参考に子テーマをインストールしてください。
上の画像のように、親テーマが有効になっている場合は、子テーマの画像にマウスを乗せると「有効化」のボタンが表示されます。
そのままクリックして子テーマを有効化してください。
ただし、「子テーマを有効にする」前に、親テーマの設定を子テーマの方に移行させる必要があります。
子テーマを有効化すると、現在のCocoonの設定がリセットされてしまいます。
そのため、事前に親テーマの設定をバックアップし、子テーマの有効化後に設定を復元する作業が必要です。
以下の記事を参考に、設定のバックアップ→復元をやってみてください。
事前準備）アップロードしたいスキンを用意
アップロードしたいzip形式のスキンファイルを適当なフォルダに保存し、解凍しておきます。
独自スキンをアップロード（FTPクライアントソフト）
FTPクライアントソフト（FFFTP）を使ったアップロードの方法です。
以下のFTPクライアントソフト（FFFTP）の公式サイトにアクセスします。
「その他のダウンロード」にある「最新版のインストールなし版はこちら。」の下にある「ダウンロード開始」をクリックして、適当なフォルダにダウンロードします。
ダウンロードしたzipファイルを解凍し、「FFFTP.exe」をダブルクリック。
「接続」をクリック。
「新規ホスト」をクリック。
以下の赤枠部分に、FTP接続のためのホスト名、ユーザー名、パスワードを入力し、「OK」をクリックします。
ホスト名、、ユーザー名、パスワードはサーバ契約完了時に送られてきたメールの中に「FTP情報」として記載されているものを入力してください。
※ホストの設定名は、接続先（サーバー）がわかるような名前にします。
接続設定が完了したので、「接続」をクリック。
「OK」をクリック（最初の接続時だけに表示）
「はい」をクリック。
右の画面にサーバーのフォルダ（ディレクトリ）が表示されるので、以下の順番でフォルダをダブルクリックして展開していきます。
「アップロードするブログのドメイン」 ※この例では「zvalinf.info」
「public_html」
「wp-content」
「themes」
「cocoon-child-master」
「skins」
次に、左のPC側の画面で解凍したスキンのフォルダをドラッグして、右のサーバ側にドロップします。
ドロップすると、右のサーバー側にスキンフォルダがアップロードされたのがわかります。
独自スキンをアップロード（エックスサーバー）
レンタルサーバーがエックスサーバーの場合に、「ファイルマネージャー」を使ってアップロードする方法です。
以降の手順では、このブログ（ドメインはzvalinf.info）に「ダークレッド」スキンをアップロードする場合を例として書いています。
エックスサーバーの「ファイルマネージャー」にログインします。
ファイルマネージャ – ログイン | レンタルサーバーならエックスサーバー
最初に、アップロードしたいドメイン（zvalinf.info）をクリックし、以降は以下の赤枠通りにクリックします。
「新規フォルダ」をクリック。
名前には解凍したスキンフォルダ名を入力し、「作成」をクリック。
スキンのフォルダが作成されるので、ダブルクリック。
「アップロード」をクリック。
「フォルダを選択」をクリック。
解凍したスキンのフォルダを選択し、「アップロード」をクリック。
「アップロード」をクリック。
「アップロード」をクリック
作成したスキンフォルダに、CSSファイル（style.css）などのファイル一式がアップロードされます。
今回の手順ではファイルはstyle.cssのみですが、スキンによってはoption.csvなど他のファイルが含まれる場合があります。
独自スキンをアップロード（ロリポップ）
レンタルサーバーがロリポップの場合に、「ロリポップ！FTP」を使ってアップロードする方法です。
ロリポップの「ユーザー専用ページ」にログインします。
「サーバーの管理・設定」→「ロリポップ！FTP」とクリック。
最初に、アップロードしたいブログのドメインをクリックします。
その後は、以下の順番でフォルダをクリックしていきます。（最終的には赤枠のフォルダパスになる）
「wp-content」
「themes」
「cocoon-child-master」
「skins」
次に、上の「フォルダ作成」アイコン（赤枠）をクリック。
「フォルダ名」に、PCに解凍したスキンフォルダ名（ここではskin-dark-red）を入力して、「保存する」をクリック。
「OK」をクリック。
これでスキンのフォルダが作成できたので、そのフォルダをクリック。
上のある「アップロード」アイコン（赤枠）をクリック。
「ファイルを選択する」をクリック。
解凍したスキンのフォルダをダブルクリック。
全てのファイルを選択し、「開く」をクリック。
今回の手順ではファイルはstyle.cssのみですが、スキンによってはoption.csvなど他のファイルが含まれる場合があります。
「アップロードする」をクリック。
以下のように「style.css」がアップロードされます。
アップロードしたスキンを適用する
無事、スキンがアップロードできたので、アップロードしたスキンを適用してみます。
WordPressの管理者画面のメニューから「Cocoon設定」をクリック。
「スキン」タブをクリック。
「表示スキン」で「子テーマのスキンのみ表示」にチェックをつけて「変更をまとめて保存」をクリック。（チェックをつけただけではスキン一覧は変わりません）
すると、「スキン一覧」に、アップロードしたスキンが表示されるので、チェックをつけて「変更をまとめて保存」をクリック。
ブラウザのURLにドメイン名（http://ドメイン名）を入力すると、独自スキンが表示されるはずです。
独自スキンのアップロードのまとめ
Cocoonをインストールする場合は、親テーマと子テーマの両方をインストールし、子テーマを使う（有効化）ことが推奨されています。
Cocoonのバージョンアップに影響されないように、子テーマを使うことを強くおすすめします。
コメント