Cocoonを卒業して自作テーマに切り替えた話｜なぜ・どうやって・結果どうなったか

はじめに：Cocoonが「悪い」わけじゃない。でも限界を感じた

最初に断っておくと、Cocoonは素晴らしいテーマです。

無料でここまで高機能なテーマは他にないし、初心者がWordPressを始めるなら真っ先におすすめする。

でも使い始めたらこんな気持ちが出てきました。

「もっと自分好みにしたいのに、カスタマイズの限界がある」

色を変えたい、レイアウトを変えたい、独自の機能をつけたい。Cocoonのカスタマイズ設定で対応できる範囲は広いけど、設定にない部分はCSSを追加するしかない。CSSを追加しすぎると管理が大変だし、テーマ更新のたびに表示が崩れないか不安になる。

Cocoonと自作テーマの比較記事で「どっちがいいか」は書きました。

今回は実際に切り替えた手順と、やってみて初めてわかったことを書きます。

この記事でわかること

なぜCocoonから自作に切り替えたのか（具体的な理由）
切り替えの全手順（5ステップ）
つまづいたポイントと対処法
移行後の変化（良かったこと・困ったこと）

結論：「自分でコントロールできる」が最大のメリット

先に結論です。

項目	Cocoon時代	自作テーマ移行後
デザインの自由度	カスタマイズ設定の範囲内	何でもできる
表示速度	十分速い	さらに速くなった（不要機能を削れるので）
メンテナンス	テーマ更新に依存	自分で管理（責任も自分）
独自機能	プラグインで対応	自分で実装できる
学習コスト	ほぼゼロ	Claude Codeがないと無理だった

自作テーマの最大のメリットは「全部が自分の管轄内」であること。

何かを変えたいとき、カスタマイズ設定の制約に縛られない。

ただしその分、何か壊れたら自分で直さないといけない。

なぜ切り替えたのか

Cocoonに限界を感じた具体的な場面を3つ紹介します。

理由①：追加CSSが膨大になった

Cocoonのデフォルトデザインを少しずつ自分好みに調整していった結果、追加CSSが200行以上になっていました。

問題は、どの CSSが何を変えているのか、半年後の自分にはわからなくなること。

「このコード消しても大丈夫かな……」が怖くて、使っていないCSSもそのまま残る。

結果、管理不能なカスタマイズの山ができあがった。

理由②：「ブロモン」を自由に使いたかった

ヒトブログにはマスコットの「ブロモン」がいます。

ブロモンを使いたかったのですが、好きなところに配置できなかったり、制約が多く、使うことを諦めていました。

自作テーマなら、ブロモンの表示を完全にコントロールできる。ダークモードのブロモン画像の切り替えも、自分で実装したから完璧に動く。

理由③：Claude Codeの登場

正直、Claude Codeがなかったら自作テーマは作れませんでした。 プログラミングの知識がほぼゼロの僕が自作テーマに挑戦できたのは、Claude Codeでバイブコーディングができるようになったから。

「やりたいことを日本語で伝えるだけでコードが出てくる」環境が手に入ったとき、「これなら自作テーマいけるかも」と思ったのが直接のきっかけです。

切り替えの全手順

STEP 1：自作テーマを完成させる（移行前）

大前提：テーマの切り替えは、自作テーマが完成してから行う。

AIでWordPressの自作テーマを作ってみた全手順で紹介した方法で、ローカル環境（自分のパソコン上）でテーマを完成させます。

ポイントは、既存の記事のデザインが崩れないことを確認してから切り替えること。

ローカル環境で実際の記事データを読み込んでテストします。（自分はLocalを使用しました）

Claude Codeに頼んだこと：
「今のヒトブログの記事を10本ほど読み込んで、
自作テーマで表示が崩れている箇所をチェックしてください。
特にCocoonの独自ブロック（吹き出し・ボックス等）が
正しく表示されるか確認してください。」

STEP 2：Cocoon独自機能の洗い出し

ここが一番面倒な作業。Cocoonには独自のショートコードやブロックがあり、記事の中で使っている場合は自作テーマに切り替えると表示が崩れる可能性があります。

Cocoon独自機能	対処法
吹き出しブロック	自作テーマで同等のCSSを用意
ボックス装飾（注意・ポイント等）	汎用的なCSSクラスに置き換え
ブログカード（内部リンク）	WordPressのoEmbed標準機能で代替
アフィリエイトタグ	テーマに依存しないので問題なし
Cocoon設定（SEO・OGP等）	SEOプラグイン（All in One SEO等）で代替

Claude Codeに「この記事のHTMLソースから、Cocoon固有のクラスやショートコードを一覧にして」と頼むと、洗い出しが楽です。

STEP 3：バックアップを取る

これは絶対にやってください！！ テーマの切り替えで何か問題が起きたとき、すぐに元に戻せるようにしておく。

バックアップ対象	方法
WordPress全体	プラグイン（UpdraftPlus等）で丸ごとバックアップ
データベース	phpMyAdminからエクスポート
追加CSS	Cocoonの追加CSSをテキストファイルにコピー
Cocoon設定	主要な設定項目をスクリーンショット

STEP 4：テーマを切り替える

WordPress管理画面 → 外観 → テーマ → 自作テーマを有効化。

切り替え自体は一瞬です。 問題はその後。

切り替えたらすぐに全ページを確認します。特に以下をチェック：

チェック項目	確認方法
トップページの表示	目視確認
個別記事の表示（5本以上）	吹き出し・画像・リンクが正常か
カテゴリーページ	記事一覧が正しく表示されるか
モバイル表示	スマホで実際にアクセス
OGP画像	SNSで記事URLを貼ってプレビュー確認
アドセンス広告	正しい位置に表示されているか

STEP 5：問題を解決する

STEP 4で見つかった問題をClaude Codeで修正。自分の場合、以下の問題が出ました。

吹き出しのスタイルが崩れた → Cocoonの吹き出しCSSを参考に自作テーマのCSSに追加
目次が表示されなくなった → Cocoonの目次機能に依存していたので、自前で目次生成機能を実装
関連記事の表示が消えた → 自作テーマにrelated posts機能を追加

Claude Codeに頼んだこと：
「テーマ切り替え後、吹き出しブロックの表示が崩れています。
Cocoonの吹き出しCSSを参考にして、
自作テーマで同じ見た目になるようにCSSを書いてください。
HTMLの構造は変えずに、CSSだけで対応してほしいです。」

つまづいたポイント

Cocoonの目次機能がなくなった！

Cocoonは自動で目次を生成してくれます。これが便利すぎて、自作テーマに切り替えたとき「目次がない！」と焦りました。

対処法： プラグイン（Table of Contents Plus等）を使用しました！

SEO設定の移行

Cocoonは内蔵のSEO機能（メタディスクリプション、OGPなど）が優秀。自作テーマに切り替えると、これらの設定が引き継がれません。

対処法： 切り替え前にSEOプラグインを有効化して、Cocoonの設定をプラグイン側に移行しておく。これをやらずにテーマを切り替えると、Googleの検索結果からメタディスクリプションが消える。←これは知らなかった！

アドセンスの広告位置

Cocoonは管理画面から広告の位置を設定できますが、自作テーマでは自分でテンプレートに広告コードを埋め込む必要があります。

対処法： Claude Codeに「single.phpの本文中、最初のh2タグの前にアドセンス広告を自動挿入するコードを書いて」と依頼。functions.phpにフィルターを追加する方法で解決することができます。

移行後の変化

良かったこと

①デザインの変更がストレスフリー

「ここの余白をもう少し広げたい」「この色を変えたい」が、自分のCSSファイルを直接編集するだけで完結。Cocoon時代の「追加CSSが膨大になる問題」がなくなった。

②表示速度が上がった

Cocoonは高機能な分、使っていない機能のCSS・JavaScriptも読み込まれます。自作テーマでは必要な機能だけ実装しているので、PageSpeedスコアが改善しました。

③ ブログへの愛着が増した

自分で作ったテーマだから、「自分のブログ」という感覚が強くなった。これは感情的な話ですが、ブログを続けるモチベーションに直結しています。

困ったこと

①何か壊れたら自分で直す

Cocoon時代はテーマの更新で不具合が修正されていましたが、自作テーマでは全部自分の責任。WordPressのアップデートで表示が崩れたとき、自分（+Claude Code）で原因を突き止めて修正する必要がある。

②「みんなと同じ」ではなくなる

Cocoonユーザーは多いので、困ったときに「Cocoon ○○ 解決法」で検索すれば大量の記事が見つかります。自作テーマだとその恩恵がない。代わりにClaude Codeに聞く運用になる。

③初期の作業量は多い

テーマを完成させるまでの作業量は、正直かなりのものでした。Claude Codeのおかげで大幅に削減できたとはいえ、数日〜1週間はかかりました。

こんな人は切り替えなくていい

自作テーマへの切り替えは万人向けではありません。以下に当てはまるなら、Cocoonのままでまったく問題ないです。

こんな人	理由
記事を書くことに集中したい	テーマのメンテナンスに時間を取られる
CSSやコードにまったく興味がない	Claude Codeがあっても最低限の理解は必要
Cocoonの機能で十分満足している	「足りない」と感じてからでも遅くない
ブログを始めたばかり	まずは記事を書くことが最優先

逆に、「カスタマイズの限界を感じている」「自分だけのデザインが欲しい」「プログラミングにも興味がある」なら、挑戦する価値があります。Claude Codeという強力な味方がいる2026年なら、プログラミング未経験でも現実的な選択肢です。

まとめ：「Cocoon卒業」はゴールではなくスタート

ステップ	やること	所要時間目安
①	自作テーマをローカルで完成させる	数日〜1週間
②	Cocoon独自機能の洗い出し	1〜2時間
③	バックアップを取る	30分
④	テーマを切り替えて全ページ確認	1〜2時間
⑤	問題を修正	当日〜数日