97:スキン変更で発生したモバイル表示トラブルを追加CSSで解決!

ブログサイト成功の鍵 - コクーンの設定 作り方
ブログサイト運用を成功させる鍵の一つがコクーンの設定をしっかり行うことです
この記事は約2分で読めます。

スキンを変えるだけでサイトの印象は激変する

「スキン」とは、もともとは「皮膚・外皮」という意味ですが、コンピュータやウェブの世界では 見た目(デザインや外観)を切り替える仕組み を指す言葉です。
ChatGPT-5 2025-09-25

いきなり ChatGPT-5 の引用で始めてしまいましたが(笑)、WordPressのCocoonテーマには「スキン」という便利な仕組みがあります。

スキンとは、テーマ自体のレイアウトや機能はそのままに、見た目のデザインだけを簡単に切り替えられるもの。いわば「洋服の着せ替え」のようなものです。

このサイトでも、最初は「モノクロ」から「手書きノート風(グリーンオレンジ)」に変更したことで、ガラッと印象が変わりました。さらに同じ「手書きノート風」スキンでも、色を少し変えるだけで印象が大きく変わっていきます。

  • ブルーコーラル → 爽やかで軽快な印象
  • ダークスカイ → 落ち着いたシックな印象

「ブルーコーラル」から「ダークスカイ」へ。ほんの配色の違いだけで、サイト全体の雰囲気がここまで変わるのは面白いですね。まさに車のボディカラーを変えると雰囲気が一変するのと同じ感覚。その時の気分や季節に合わせてスキンを楽し無事もできそうです。

スキン変更で思わぬ落とし穴?モバイル表示が激変!

前回、スキンを「ブルーコーラル」から「ダークスカイ」へと切り替えたのですが……そこで思わぬ問題が発生しました:

なんと、モバイル表示の7つのボタンが3つに激減していたのです。最初は「設定を間違えたかな?」と思いましたが、調べてみるとどうやらCocoonの「ダークスカイ」スキン特有の現象のようでした。

実際にCocoon公式サイトの「【CSS修正】てがきノート『ダークスカイ』をご利用中のユーザー様へ」という案内を見つけて、「ああ、これか!」と納得。原因は一部テキストカラーが背景と同化して見えなくなっていたためでした。そこで、追加CSSを設定して色を修正。無事、モバイルのヘッダーとフッターのメニューが復活しました:

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

タイトルとURLをコピーしました