この記事では、Cocoonのスキンをリアルタイムに切り替えながら確認できサイトを紹介します。
対象のテーマは、Cocoonです。
有料テーマに負けないほど高機能で大人気の無料テーマのCocoonですが、特徴の1つに「スキン」があります。
「スキン」を使うと、ブログ（サイト）の見栄えをガラっと変えることができます。
着せ替え人形のように見た目を簡単に変えることができる機能だと思えばいいですね。
そして、Cocoonがリリースされて以降「スキン」はどんどん増え続け、2023/10/06現在、同梱されているスキンの数はなんと100を超えました。
ちなみに、「スキン」はそのほとんどが有志の人達によって作られたものです。（Cocoonの開発者である「わいひら」さん作成のスキンもあり）
でも、これだけ数が多いと、好みのスキンを選ぶのも一苦労なんですよね。
しかも、スキンのイメージ画像を見てスキンを設定しても、「思っていたのと違ってた」なんてこともあります。
とにかく、スキンを決めるのに時間がかかるんです。
そこで、「指定したスキンに切り替わったページをリアルタイムに確認できるサイト」を作ってみました。
ここでは、スキンをリアルタイムに確認できるサイトを紹介します。
スキンを適用した時のイメージは？
ここでは、Cocoonのスキンを使ったことがない人向けに、スキンでどう変わるのかを説明します。
切り替わったイメージを見てもらった方がわかりやすいので、以降でいくつかのスキンを適用したイメージを貼り付けてます。
参考にしてください。
スキンを適用していないサイトイメージ
↓は、スキンを適用していない「素の状態」のサイト（ブログ）イメージで、かなりさっぱりしたデザインです。
スキンを適用したサイトイメージ
以下は、スキンを適用した時のデザインです。
スキン「SILK」
スキン「てがきノート」
スキン「アリス」
スキン「VeilnuiSimplog」
Cocoon設定からのスキン選択手順
ここでは、Cocoonのスキンを使ったことがない人向けに、スキンを適用する手順を説明します。
WordPressの管理画面にログインし、左のメニューから「Cocoon設定」→「Cocoon設定」（①）をクリック。
「スキン」タブをクリック（画面を開いた直後は選択済みとなっている）
各スキンの「画像」のアイコンにマウスを乗せると、そのスキンのイメージ画像が表示されます。
あとは好みのスキンにチェックをつけて、下にある「変更をまとめて保存」をクリックすれば、OKです。
リアルタイムにスキンを確認するサイトの紹介
スキンを切り替えた時に、スキンが適用されたページをリアルタイムに確認できるのが、以下のサイトです。
※このサイトは切り替え用の専用サイトとなっています。
切り替えの詳細は上記ページに書いていますが、簡単に書くと2つのウィンドウ（ページ）を使います。
- スキンの一覧ページ（このページでスキンを切り替える）
- 切り替えたスキンが適用されるページ
2つのウィンドウを横に並べると使いやすいので、PCでの使用をおすすめします。
まとめ
Cocoonのスキンは数が多くて、好みのスキンを決めるは大変です。
先に紹介したサイトを利用して、効率よくスキンを選んでください！