はじめに
このブログは、私が初めて立ち上げたWordPressブログです。
最初は右も左も分からない状態でしたが、生成AI（Gemini）を良きパートナーとして活用することで、最終的に「Cocoonのオリジナルスキン」を自作し、自分好みのデザインにフルカスタマイズすることができました。
「ブログのデザインにこだわりたいけれど、CSSの知識に自信がない」 そんな方に向けて、私が実践した「Xserver × Cocoon × Gemini」を使った最強のカスタマイズ手順をマニュアル化して公開します。この流れに沿えば、初心者でも必ず自分だけのオリジナルデザインが作れます！
前提条件と環境
今回のカスタマイズは、以下の環境で行っています。
- サーバー： Xserver（エックスサーバー）
- テーマ： WordPress 無料テーマ「Cocoon」
- AIツール： Gemini（ChatGPTやClaudeでも代用可能）
※WordPressの基本設定や初期プラグインの導入は完了している前提で進めます。
以下のリンクを踏めばサーバーの取得から基本設定まで一気に完了できます。
私はGeminiは有料版のGoogle AI Pro（月額2,900円）を利用しています。最初の1か月は無料で使えますので、まだ使ったことがない人はこれを機に使ってみる価値は十分あると思います。
【準備編】自分専用のカスタムスキンを立ち上げる
Cocoonには便利な「スキン」機能がありますが、既存のものを直接いじるのではなく、自分専用の「子テーマ用スキン」を作るところから始めます。
1．ベースを決める まずはCocoon設定から、自分のイメージに近い既存スキンを選んで適用しておきます。
2．Xserverのファイル管理を開く Xserverのサーバーパネルから「ファイル管理」を開きます。
3．スキンのディレクトリへ移動 以下の階層まで進みます。 [あなたのドメイン名]/public_html/wp-content/themes/cocoon-child-master/skins
4．オリジナルフォルダの作成 skins フォルダの中に、任意の名前で新しいフォルダを作成します。（例：skin-custom-green）
5．style.cssの作成 作成したフォルダの中に style.css という空のファイルを作成します。
これで「自分専用のスキン」の枠組みが完成しました！
【実践編】Geminiと回す「爆速カスタマイズ・ループ」
ここからが本番です。以下のサイクルを回すだけで、デザインがみるみる変わっていきます。
Step1：ブラウザの開発者ツール（F12）で現状を確認
自分のブログ画面を開き、キーボードの「F12」を押してデベロッパーツール（Source）を開きます。 色や形を変えたい部分を矢印アイコン（検証ツール）でクリックし、「今どんなCSSクラスがあたっているか」を確認して、その部分のソースコードをコピーします。
Step2：Geminiに「現状」と「要望」を投げる
コピーしたコードと一緒に、Geminiにざっくばらんに指示を出します。難しく考える必要はありません。友達に相談する感覚でOKです。
「今Cocoonでブログいじってるんだけど、ここのタイトル文字を半透明の箱で囲みたい！今のCSSこれなんだけど、どう書き換えればいい？」
Step3：Xserver上で編集・保存
- 先ほど作った
skin-custom-greenの中のstyle.cssの編集画面を開きます。 - Geminiが出力してくれたコードを貼り付けます。
- 「更新」を押して保存します。
Step4：Cocoon設定で適用＆確認
- WordPress管理画面の「Cocoon設定」＞「スキン」タブを開きます。
- 下の方にある「スキン（子テーマ）のスキンのみ表示する」にチェックを入れると、先ほど作った自分のスキン（例：カスタムグリーン）が表示されるので選択。
- 「変更をまとめて保存」を押します。
あとは自分のブログを確認するだけ！ 【F12でコピー → Geminiに投げる → Xserverで更新 → 画面を確認する】 このループを繰り返すだけで、思い通りのデザインに組み上がっていきます。
【壁にぶつかったら】どうしてもうまくいかない時の修正ループのコツ
Geminiは優秀なアシスタントですが、魔法使いではありません。時には何度コードを貼り直してもデザインが崩れたまま、という状況に行き詰まることもあります。 そんな時は、以下の4つのコツを意識して話しかけると突破口が一気に開けます。
1. 「何がどう変わったか」を具体的にフィードバックする
AIにはあなたの画面が見えていません。「ダメだった」ではなく、提示されたコードを入れた結果、画面がどう変化したかを言葉で伝えてあげてください。
- ❌ 悪い例：「うまくいかないから別のコード教えて」
- ⭕️ 良い例：「文字は白くなったけど、今度は背景の箱が左端に寄っちゃった！真ん中に戻すにはどうしたらいい？」
2. 「原因を正しく読み解く方法を教えて」と聞いてみる
ひたすらコードをコピペして試すのを一度やめて、AIに「解説者」になってもらうのも非常に効果的です。
「何回やっても箱の高さが縦に伸びちゃうんだけどなんで？コード出す前に、なんでこうなってるのか原因と仮説を教えて！」
このように聞くと、AIは根本的な原因に気づきやすくなります。また、提示してくれたソースコードの「どこをどう変えたのか」を解説してもらうことで、自身のCSSの勉強にもなり一石二鳥です。
3. CSSだけでなく「HTMLの構造」も一緒に投げる
AIが「変更したい要素の外側にどんな箱があるか」を把握できていないと、正しいコードは書けません。一つ外側の親要素のクラス名なども一緒にコピーして、「HTMLはこういう親子関係になってるよ」と伝えると、回答精度が劇的に上がります。
苦労した実例：ヘッダーの文字が見えない問題
この一連のループを使って、私が最もこだわって、そして一番苦戦したのがヘッダー部分の実装です。
淡い緑色の背景画像を設定したところ、ブログタイトルの白文字が同化して見えなくなってしまいました。 そこで、Geminiに「タイトルとキャッチフレーズを、文字幅にぴったり合う半透明の箱で囲みたい」と相談しました。
CocoonはデフォルトのCSS設定がしっかりしているため、単に背景色をつけるだけだと「箱が縦に巨大化する」「横幅いっぱいに広がる」といった問題が頻発しました。しかし、先ほどのコツを使ってGeminiとエラーの原因をキャッチボールし、最終的に display: flex と fit-content を駆使したコードを提案してもらうことで、無事に理想の「半透明ボックス」を実装することができました。
番外編：AIと一緒に決める「テーマカラー」と「ヘッダー画像」
CSSのコーディングだけでなく、デザインの根幹となる部分も生成AIの力をフル活用しています。
1. テーマカラーの決め方
「ブログのテーマカラーを緑にしたい」という漠然としたイメージしかなかったので、これもGeminiにフランクに相談しました。
「ブログのメインカラーを淡い緑系にしたい。アクセントカラーなど、Cocoonで使用する配色を考えてそれぞれのカラーコードを教えて。」
このように提案してもらうことで、現在の「カスタムグリーン（#8ab692）」という絶妙な色合いに辿り着きました。
2. ヘッダー画像の生成
ブログの顔となるヘッダー画像も画像生成AIで作成しています。ここでも、自分の思い描くイメージをそのままAIにぶつけました。
「勇往邁進がテーマのブログのヘッダー画像（イラスト）を作りたい。いくつかの目標に向かって小さな旗を立ててロードマップを進む人。ブログのメインカラーを踏襲。画像生成AIに作らせるためのプロンプトを生成して。」
これで生成されたプロンプトをGeminiの画像生成モードに投げたら今のものが生成されました。
おわりに
「自作スキン」と聞くとハードルが高そうに聞こえますが、Xserverのファイル管理機能とGeminiを組み合わせれば、ブラウザ上の操作だけで完結してしまいます。
私自身、初めての立ち上げでしたが、「分からないことはAIに聞き、とりあえずサーバー上のファイルを更新して試してみる」という過程そのものが、パズルを解くようで非常に楽しい体験でした。
既存のデザインに物足りなさを感じている方は、ぜひこの「AIとの二人三脚カスタマイズ」に挑戦してみてください！
コメント