Cocoonの使い方5つの手順｜相談125件でわかった設定でつまずく所

WordPressにCocoonを入れると、管理画面の左に「Cocoon設定」が増え、スキン・広告・SEO・高速化など多くのタブが並びます。ヘッダーの画像を選んで保存しても出ない、目次の設定をしたのに記事に出ない、といったつまずきもあります。どのタブの設定が表示を決めているかを知らないと、直す場所を探せません。

この記事では、Cocoonの親テーマと子テーマを入れてから最初の記事を公開するまでの使い方を、5つの手順で解説します。株式会社メリルが運営するブログ相談ドットコムに寄せられた、Cocoonを使う人の相談125件を読んで分けた結果も載せました。

記事を読めば、最初に見るCocoon設定のタブと、困ったときに調べる順番がわかります。表示が変わらない・崩れた相談85件のうち原因が分かったのは33件で、一番多い14件はCocoon設定の選び方が原因でした。子テーマを有効にしてから見た目と計測のタブを整え、困ったら設定・キャッシュ・プラグインの順に確かめれば、直す場所を早く絞れます。

Cocoonの使い方5つの手順と、相談125件でつまずいた場面

Cocoonは、WordPressに入れて使う無料のテーマです。入れてから最初の記事を公開するまでの手順は、以下の5つです。

1. 親テーマと子テーマを入れて子テーマを有効化する
2. Cocoon設定で最初に見るタブを整える
3. メニューとウィジェットでサイトの形を作る
4. Cocoonのブロックで最初の記事を書く
5. 困ったら設定・キャッシュ・プラグインの順に切り分ける

ブログ相談ドットコム(株式会社メリル運営)に2021年8月〜2026年9月に公開された相談は1,398件ありました。カテゴリーが「Cocoon」の相談と相談か回答に「Cocoon」の語が入った相談の172件を、回答とあわせて1件ずつ読んでいます。

172件のうち、Cocoonを使う人がサイトを作る中でつまずいた相談は125件です。125件は2021年8月〜2026年5月の相談で、93件が2021年と2022年に寄せられました。どの場面でつまずいたかは、以下の表のとおりです。

つまずいた場面	相談の件数	相談の例
見た目・レイアウト	45件	ヘッダーの画像が出ない
記事を書く機能	22件	目次が出ない
広告・アフィリエイト	21件	広告のコードが文字のまま出る
アクセス解析・SEOの設定	20件	サイトの上に記号が出る
CSS・PHPのカスタマイズ	6件	追加CSSが効かない
表示の速さ	4件	速度の点数が上がらない
入れる・更新する	3件	更新した後に画面が真っ白になる
その他	4件	編集中に致命的なエラーが出る
計	125件

つまずき方で分けると、設定したのに反映されない・思った表示にならない相談が48件で一番多くありました。崩れやエラーが出た相談は37件、やり方や設定の場所が分からない相談は32件、どうするのがよいか迷う相談は8件です。

回答を書いているのは相談サイトの利用者で、専門家ではありません。Cocoonの機能は、公式サイトのマニュアルで確かめた範囲だけを書きました。Cocoonから別のテーマへ変える相談8件は、125件に入れていません。テーマを変える手順は、以下の記事にまとめました。

» ワードプレスのテーマ変更5つの手順｜相談20件でわかった崩れる所と戻し方

手順1：Cocoonの親テーマと子テーマを入れて子テーマを有効化する

Cocoonは、親テーマと子テーマの両方を入れて子テーマを有効化して使います。子テーマが無くても動きますが、親テーマだけだと更新のたびにCSSやテンプレートのカスタマイズが消えます。カスタマイズをしない予定でも、子テーマは最初に入れておきましょう。Cocoonを入れて更新する手順は、以下の3つです。

• 推奨環境を確かめて親テーマと子テーマのZIPを取る
• 親テーマ・子テーマの順にアップロードして子テーマを有効化する
• Cocoonの更新は「ダッシュボード」の「更新」から行う

推奨環境を確かめて親テーマと子テーマのZIPを取る

Cocoonを入れる前に、サーバーのPHPとWordPressの版を確かめます。古いPHPで動かすと、新しい関数を使えずにエラーが出ることがあるためです。Cocoonが動く版は、以下の表のとおりです。

項目	必須の環境	推奨の環境
WordPress	6.1以上	7.1以上
PHP	7.4以上	8.3以上

PHPの版は、サーバーの管理画面で変えられます。テーマのファイルは、Cocoonの公式サイトのダウンロードページから「Cocoon 親テーマ」と「Cocoon 子テーマ」の2つを取ります。Macでダウンロードして自動で展開されたときは、フォルダの「cocoon-master」を右クリックして圧縮し、ZIPに戻してからアップロードしてください。

親テーマ・子テーマの順にアップロードして子テーマを有効化する

子テーマは、親テーマのデザインと機能を受け継ぐテーマです。子テーマのstyle.cssの Template: には、親テーマのフォルダ名が書かれています。親テーマを先に入れてから子テーマを入れ、子テーマを有効化してください。WordPressの管理画面でCocoonを入れる手順は、以下のとおりです。

1. 「外観」→「テーマ」の画面で、テーマを追加するボタンを押す
2. 「テーマのアップロード」で「cocoon-master.zip」を選んで「今すぐインストール」を押す
3. テーマの画面に戻り、同じ手順で「cocoon-child-master.zip」をインストールする
4. 子テーマのインストールが終わったら「有効化」を押す
5. テーマの画面で「Cocoon Child」が有効になっているかを確かめる

アップロードで upload_max_filesize の超過やリンクの期限切れの表示が出たら、サーバーのアップロードの上限が小さいことが原因です。ダウンロードページにある低サイズ版を入れ、子テーマを有効化した後に自動の更新で最新版にします。

入れる・更新する場面の相談は3件と少なく、3件とも入れた後か更新した後にエラーが出た相談でした。版の違う親テーマが2つ並んだ状態で片方を消し、子テーマが動かなくなった例もあります。親テーマを入れ直したら直ったと、相談した人が書いています。

Cocoonの更新は「ダッシュボード」の「更新」から行う

Cocoonの新しい版は、WordPressの「ダッシュボード」→「更新」の画面でCocoonを選んで「テーマを更新」を押して入れます。「Cocoon の更新に成功しました」と出れば、更新は終わりです。新しい版が出ていないときは、更新の機能は使えません。

親テーマのファイルに直接書いたカスタマイズは、更新で上書きされて消えます。子テーマに書いた分は、親テーマを更新しても残ります。Cocoon設定の画面で選んだ値はデータベースに保存されているので、更新では消えません。

サーバーの管理画面からCocoonを入れると、親テーマのフォルダ名が「cocoon」になることがあります。自動の更新で届く「cocoon-master」と2つ並ぶと、更新に失敗する場合があります。直し方は、以下の2つです。

• FTPやファイルマネージャーで wp-content/themes/ を開いて「cocoon」と「cocoon-master」が両方あれば「cocoon」を削除する
• 子テーマのstyle.cssにある Template: の値を「cocoon-master」に変える

Cocoon設定の値は「Cocoon設定」→「バックアップ」の画面で、ファイルに書き出せます。吹き出しやテンプレートの設定は、Cocoon設定のバックアップに入りません。サイト全体のバックアップの取り方は、以下の記事で解説しています。

» ワードプレスのバックアップの取り方と戻し方｜5つの手順と相談84件

手順2：Cocoon設定で最初に見るタブを整える

Cocoon設定は、管理画面の左のメニューから開くCocoon独自の設定の画面です。タブが多いので、ブログを公開する前に要るタブから順に整えましょう。

相談125件のうち、Cocoon設定のタブの名前が相談か回答に出てきたのは39件でした。名前が出たタブと相談の件数は、以下の表のとおりです。

名前が出たタブ	相談の件数
アクセス解析・認証	11件
スキン	5件
広告	5件
高速化	5件
AMP	4件
全体	3件
ヘッダー	3件

原因が分かった33件のうち、Cocoon設定の選び方が原因だった相談は14件で、スキンと高速化のタブの名前が3件ずつ出ていました。14件のうち11件は、設定を直して解決したと相談した人が書いています。最初に見るタブと決めることは、以下の3つです。

• 「スキン」「全体」「ヘッダー」で見た目の土台を決める
• 「アクセス解析・認証」に計測と確認のIDを入れる
• 「広告」タブには広告ユニットのコードを貼って表示位置を選ぶ

「スキン」「全体」「ヘッダー」で見た目の土台を決める

見た目の土台は「スキン」「全体」「ヘッダー」の3つのタブで決まります。スキンは、ウィジェットやテーマの設定を変えずに外観だけを着せ替える機能です。見た目を決める主な設定は、以下のとおりです。

• 「スキン」タブの「スキン一覧」：サイト全体の外観を選ぶ
• 「全体」タブの「キーカラー」：見出しなどに使う色を選ぶ
• 「ヘッダー」タブの「ヘッダーロゴ」：サイト名の代わりに出すロゴの画像を選ぶ

スキンのタブの名前が出た5件のうち4件は、設定したのに思った表示にならない相談でした。スキンを変えたら見出しが背景と同じ色になり、全体のタブのキーカラーが原因だった例もあります。

スキンを変えても表示が変わらないときは、キャッシュを消してから子テーマのstyle.cssでスキンを上書きしていないかを見てください。子テーマのstyle.cssはスキンのCSSより後に読み込まれるので、同じ所を書くと子テーマの指定が勝ちます。

「アクセス解析・認証」に計測と確認のIDを入れる

アナリティクスとSearch Consoleの設定は「アクセス解析・認証」タブで行います。テーマのファイルを書き換えずに、計測と確認のタグをサイト全体に入れられる欄です。アクセス解析・認証のタブで入れる物は、以下のとおりです。

• 「GA4測定ID」：アナリティクスの測定ID(Gから始まるID)
• 「Google Search Console ID」：Search Consoleの所有権の確認に使うメタタグのcontentの値
• ヘッダー用とフッター用の解析タグの欄：ほかの計測ツールのタグ

Googleタグマネージャの欄にIDが入っていると、二重の計測を防ぐためにタグマネージャが優先され、GA4測定IDでは計測されません。タグマネージャを使わないなら、欄を空けておきましょう。相談にも、タグマネージャの欄を空にしたらアナリティクスで計測できた例がありました。

アクセス解析・認証のタブの名前が出た相談は11件で、7件はアドセンスの審査用のコードなど広告の場面、4件はアクセス解析の場面でした。タグの余分な部分や違う種類のIDを貼り、サイトの一番上に記号や英数字が出た相談もあります。

IDを入れた後は、WordPressからログアウトしてサイトを開き、アナリティクスの「過去30分のユーザー」に自分のアクセスが出るかを確かめてください。Search Consoleへの登録の手順は、以下の記事にまとめました。

» サーチコンソールの設定方法｜ブログの登録手順と相談32件でつまずいた所

「広告」タブには広告ユニットのコードを貼って表示位置を選ぶ

「広告」タブに貼るのは、アドセンスの審査に通った後に作る広告ユニットのコードです。レスポンシブの広告ユニットを1つ貼れば、表示位置で選んだいくつもの場所に広告を出せます。広告を出すまでの手順は、以下のとおりです。

1. アドセンスの管理画面で「ディスプレイ広告」の広告ユニットを作ってコードを写す
2. 「Cocoon設定」→「広告」タブの「広告コード」に貼って保存する
3. 「広告の表示位置」で、タイトルの上下・本文の上中下・SNSボタンの上下・関連記事の下から出す場所を選ぶ

保存したときに403のエラーが出たら、サーバーのWAF(不正な通信を防ぐ機能)が、コードのscriptタグを止めていることがあります。WAFを一時的に切って保存し、保存した後に元に戻してください。アフィリエイトのリンクを載せる記事のPR表記も、同じタブの「PR表記設定」で自動で入れられます。

審査用のコードを貼る欄は「広告」タブとは別です。テーマごとの貼る場所と審査に通るまでの手順は、以下の記事で解説しています。

» アドセンス審査に通るまでの手順｜相談43件でわかった落ちたときの直し方

手順3：メニューとウィジェットでサイトの形を作る

メニューとウィジェットは、Cocoon設定ではなくWordPressの「外観」の画面で置きます。相談125件のうち見た目・レイアウトの相談は45件で、一番多い場面でした。サイトの形を作る手順は、以下の2つです。

• グローバルメニューは「位置の管理」でヘッダーナビに割り当てる
• ウィジェットは初期の「ブロック」を外してから置き直す

グローバルメニューは「位置の管理」でヘッダーナビに割り当てる

ヘッダーのメニューは、作った後に表示する位置を割り当てるとサイトに出ます。パソコンで表示するメニューを作る手順は、以下のとおりです。

1. 「外観」→「メニュー」を開いて「新規メニュー作成」を押す
2. 「メニュー名」と「メニュー構成」を決めて「メニューを保存」を押す
3. 「位置の管理」のタブで「ヘッダーナビ」に作ったメニューを選んで「変更を保存」を押す

ヘッダーナビのメニューは、画面の幅が768pxより広い端末で表示されます。768px以下のスマホなどでは、モバイル用のメニューが表示されます。スマホのメニューとボタンは「Cocoon設定」→「モバイル」タブで別に設定してください。

ウィジェットは初期の「ブロック」を外してから置き直す

Cocoonを入れた後は「外観」→「ウィジェット」の画面を開いて「ブロック」と書かれたウィジェットを探します。「ブロック」のウィジェットはドラッグで外すか「削除」を押して外し、サイドバーに出したいウィジェットを置き直してください。

相談にも、Cocoonを入れた直後のサイドバーに英語の初期のウィジェットが出て、消し方が分からなかった例がありました。消したはずのプロフィールが記事の上に出た相談は、投稿タイトルの上にあるウィジェットの置き場所に残っていた物を消して解決しています。

手順4：Cocoonのブロックで最初の記事を書く

記事はWordPressのブロックエディターで書き、Cocoonが足したブロックで読みやすくします。記事を書く機能の相談は22件で、設定したのに反映されない相談が8件、やり方の分からない相談と崩れ・エラーの相談が6件ずつでした。最初の記事で使う機能は、以下の4つです。

• 「+」から「Cocoon」と探してCocoonのブロックを入れる
• 吹き出しは「Cocoon設定」の「吹き出し」で登録してから使う
• 目次は見出しのブロックで、ブログカードはURLだけの行で出す
• 記事ごとの「SEO」と「広告」の欄で説明文と広告の除外を決める

「+」から「Cocoon」と探してCocoonのブロックを入れる

Cocoonのブロックは、ブロックを追加する「+」のボタンから探します。検索の欄に「Cocoon」と入れるか、カテゴリーから「Cocoonブロック」か「Cocoonマイクロコピー」を選んでください。主なCocoonのブロックは、以下のとおりです。

• 吹き出し
• 案内ボックス・白抜きボックス・見出しボックス
• ブログカード
• アコーディオン(トグル)・タブ・タイムライン
• ボタン・アイコンリスト・FAQ

回答でCocoonのブロックや機能の使い方を示した相談は4件で、リストを枠で囲みたい相談にボックスのブロックを勧めた例があります。

吹き出しは「Cocoon設定」の「吹き出し」で登録してから使う

Cocoonの吹き出しは、話す人のアイコンなどを先に登録してから記事で使います。登録はCocoon設定のメニューの下にある「吹き出し」の画面で行います。吹き出しを登録する手順は、以下のとおりです。

1. アイコンに使う正方形の画像を用意する(160〜200px程度)
2. 「Cocoon設定」→「吹き出し」を開いて「新規作成」を押す
3. タイトルやアイコンなどを入れて保存する

記事に入れるときは「+」のボタンから吹き出しのブロックを選びます。

目次は見出しのブロックで、ブログカードはURLだけの行で出す

目次とブログカードは、記事の書き方が条件に合ったときに自動で出る機能です。目次が出ないときに確かめる所は、以下のとおりです。

• 「Cocoon設定」→「目次」タブで「目次の表示」が有効になっているか
• 見出しの数が表示条件(初めは見出し2つ以上)を満たしているか
• 見出しのブロック(h2〜h6)を使っているか(太字にしただけでは見出しにならない)
• 目次のプラグインと重ねて使っていないか

目次のタブの名前が出た相談は2件で、どちらも設定したのに目次が出ない相談でした。

ブログカードは、記事の1行にURLだけを書くと出ます。出ないときは「Cocoon設定」→「ブログカード」タブで有効になっているかと、URLの前後に余計な文字が無いかを見てください。直した後は、キャッシュを消してから表示を確かめます。

記事ごとの「SEO」と「広告」の欄で説明文と広告の除外を決める

投稿の編集画面には、記事ごとに決めるCocoonの欄があります。最初の記事を公開する前に見ておく欄は、以下のとおりです。

• 「SEO」の欄：検索結果に出るメタディスクリプションを入れる(入れなければ本文の書き出しから作られる)
• 「SEO」の欄のnoindex：記事を検索結果に出さないときに選ぶ
• 「広告」の欄：「広告を除外する」「PR表記を除外する」で、記事ごとに広告やPR表記を外す
• 「カスタムCSS」の欄：1つの記事だけに当てるCSSを書く

SEOのプラグインを一緒に使うと、メタディスクリプション・OGPタグ・canonicalタグが二重に出る場合があります。プラグインを使うなら、Cocoonとプラグインのどちらかで同じ機能を切っておきましょう。

記事を書き終えたら、プレビューでパソコンとスマホの見え方を確かめてから公開します。ブロックエディターの操作と公開の手順は、以下の記事にまとめました。

» ワードプレスの使い方｜ログインから公開までの6つの手順と相談246件のつまずき

手順5：Cocoonで困ったら設定・キャッシュ・プラグインの順に切り分ける

表示が変わらないときと崩れたときでは、確かめる所が違います。設定したのに反映されない相談48件と、崩れやエラーが出た相談37件の原因は、以下の表のとおりです。

原因	相談の件数
Cocoon設定の選び方	14件
CSS・コード・記事のHTMLの書き方	7件
テーマの外(ブラウザ・サーバー・広告の配信など)	5件
プラグイン	4件
Cocoonの更新・不具合	2件
Cocoonの入れ方(親テーマを消した)	1件
分からない(原因が書かれていない)	52件
計	85件

回答のあった124件のうち、回答がURLや画面を聞き返した相談は65件、Cocoon設定の項目を示した相談は39件でした。困ったときに確かめる順番は、以下の3つです。

• 反映されないときはCocoon設定とキャッシュを見直す
• 崩れやエラーは高速化の縮小化とプラグインを止めて切り分ける
• 直らないときはURLと試したことを添えてフォーラムで聞く

反映されないときはCocoon設定とキャッシュを見直す

設定したのに表示が変わらないときは、変えた設定と同じ所を決めている別のタブを先に疑います。反映されない48件のうち原因が分かった22件では、Cocoon設定の選び方が12件でした。スキンとキーカラーのように、同じ所の見た目に2つのタブが関わることがあります。

Cocoon設定に問題が無ければ、古い表示が残っていないかを確かめます。キャッシュを消す手順は、以下のとおりです。

1. ブラウザでスーパーリロードする(WindowsはCtrl+Shift+R、MacはCmd+Shift+R)
2. キャッシュのプラグインでキャッシュを消す
3. サーバーの管理画面でサーバーのキャッシュを消す

回答でキャッシュを消すよう勧めた相談は13件ありました。キャッシュが原因だったと相談した人が書いた相談は、125件の中にありません。

崩れやエラーは高速化の縮小化とプラグインを止めて切り分ける

Cocoonの「高速化」タブにあるCSSとJavaScriptの縮小化は、ほかのプラグインとぶつかって表示を崩すことがあります。高速化のタブの名前が出た5件は、どれも設定したのに思った表示にならない相談で、4件が直りました。

5件のうち3件はCocoon設定の選び方が原因で、CSSの縮小化を外して直った例もあります。崩れやエラーの原因を切り分ける手順は、以下のとおりです。

1. 「Cocoon設定」→「高速化」で「JavaScriptを縮小化する」を外して表示を見る
2. 直らなければ「CSSを縮小化する」も外して表示を見る
3. まだ直らなければプラグインをすべて止め、1つずつ有効にし直す
4. 崩れが戻ったときに有効にしたプラグインの作者に問い合わせる

Autoptimizeのようなソースコードを縮小するプラグインは、Cocoonの縮小化と重ねて使わないようにします。画面が真っ白になったときは、PHPの版が足りているかを確かめ、functions.phpなどPHPのカスタマイズを元に戻してください。

直らないときはURLと試したことを添えてフォーラムで聞く

自分で直せないときは、Cocoonの公式サイトのフォーラムで聞けます。書き込む前に、検索エンジンとフォーラムの中で同じ質問を探し、最新のCocoonで試しておきます。フォーラムに書き込むときに添える物は、以下のとおりです。

• 問題のあるページのURLと、場所の説明
• エラーの文(言い換えずに写して貼る)
• 画面のキャプチャと、再現する手順
• 「Cocoon設定」→「テーマ情報」タブの「情報をコピー」で写した環境情報
• プラグインをすべて止めて試した結果

URLを載せるときは、Cocoonの縮小化と縮小のプラグインを切っておきます。縮小されたソースコードは読みにくく、原因を見つけにくいためです。

相談の回答でも、65件はまずURLや画面を聞き返していました。最初の書き込みにURLと試したことを書いておけば、聞き返しを待つ時間を減らせます。

Cocoonの使い方は子テーマの有効化と最初のタブの設定から始めましょう

5つの手順で押さえる所を並べると、以下のとおりです。

• 手順1：親テーマと子テーマを入れて子テーマを有効化する
• 手順2：「スキン」「全体」「ヘッダー」「アクセス解析・認証」「広告」のタブを整える
• 手順3：メニューを割り当て、初期の「ブロック」のウィジェットを置き直す
• 手順4：Cocoonのブロックと記事ごとの欄を使って最初の記事を書く
• 手順5：設定・キャッシュ・高速化・プラグインの順に切り分け、直らなければURLを添えて聞く

相談125件では、原因が分かった33件のうち14件がCocoon設定の選び方でした。どのタブが表示を決めているかを先に知っておけば、直す場所を自分で見つけられます。

まずは子テーマが有効になっているかを確かめてから「スキン」と「アクセス解析・認証」のタブを設定しましょう。