スキンを変えるだけでサイトの印象は激変する
「スキン」とは、もともとは「皮膚・外皮」という意味ですが、コンピュータやウェブの世界では 見た目(デザインや外観)を切り替える仕組み を指す言葉です。ChatGPT-5 2025-09-25
いきなり ChatGPT-5 の引用で始めてしまいましたが(笑)、WordPressのCocoonテーマには「スキン」という便利な仕組みがあります。
スキンとは、テーマ自体のレイアウトや機能はそのままに、見た目のデザインだけを簡単に切り替えられるもの。いわば「洋服の着せ替え」のようなものです。
このサイトでも、最初は「モノクロ」から「手書きノート風(グリーンオレンジ)」に変更したことで、ガラッと印象が変わりました。さらに同じ「手書きノート風」スキンでも、色を少し変えるだけで印象が大きく変わっていきます。
- ブルーコーラル → 爽やかで軽快な印象
- ダークスカイ → 落ち着いたシックな印象
「ブルーコーラル」から「ダークスカイ」へ。ほんの配色の違いだけで、サイト全体の雰囲気がここまで変わるのは面白いですね。まさに車のボディカラーを変えると雰囲気が一変するのと同じ感覚。その時の気分や季節に合わせてスキンを楽し無事もできそうです。
スキン変更で思わぬ落とし穴?モバイル表示が激変!
前回、スキンを「ブルーコーラル」から「ダークスカイ」へと切り替えたのですが……そこで思わぬ問題が発生しました:


なんと、モバイル表示の7つのボタンが3つに激減していたのです。最初は「設定を間違えたかな?」と思いましたが、調べてみるとどうやらCocoonの「ダークスカイ」スキン特有の現象のようでした。
実際にCocoon公式サイトの「【CSS修正】てがきノート『ダークスカイ』をご利用中のユーザー様へ」という案内を見つけて、「ああ、これか!」と納得。原因は一部テキストカラーが背景と同化して見えなくなっていたためでした。そこで、追加CSSを設定して色を修正。無事、モバイルのヘッダーとフッターのメニューが復活しました:

スキンの色合い変更で、モバイルのメニューが“歯抜け”になってしまうなんて、ちょっと可笑しいですよね。でも解決できてひと安心。