WordPressにCocoonを入れてみたものの、「設定画面が多すぎて何から手をつければいいの？」と止まっていませんか。私も最初は同じで、よく分からないまま放置してしまった時期がありました。
最後まで読みながら手を動かしてもらえれば、Cocoonの使い方で迷う場面はかなり減るはずです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Cocoon 使い方の全体像をサクッと把握しよう
最初に、「Cocoonで何ができるのか」「この記事をどう読み進めればいいのか」を軽く整理します。すべてを一気に覚える必要はなく、必要なところだけつまみ食いするイメージで大丈夫です。
Cocoonでできることと、この記事の進め方
まずはCocoonの主な機能と、この記事で進めていくステップを表にまとめました。最初のうちは、右端の「初心者の優先度」が高いところから押さえるイメージでOKです。
| ステップ | 目的 | Cocoonの主な機能 | 初心者の優先度 |
|---|---|---|---|
| 1 | テーマ導入 | 親テーマ・子テーマ | 必須 |
| 2 | 初期設定 | Cocoon設定（全体・投稿など） | 必須 |
| 3 | デザイン調整 | スキン・ヘッダー・フッター | 高 |
| 4 | トップページ | カードデザイン・レイアウト | 中 |
| 5 | SEO・解析 | SEO設定・アクセス解析・高速化 | 高 |
| 6 | 収益化 | 広告設定・アフィリエイトタグ | 中 |
| 7 | 記事装飾 | 吹き出し・ボックス・ブログカード | 中〜高 |
この記事も、表のステップ順で進んでいきます。「まずは1〜3だけ終わらせる」と決めて読み進めると、途中で疲れにくいです。Cocoonの使い方は、一気に完璧を目指さなくて大丈夫です。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Cocoonとはどんなテーマ？使い方を知る前に特徴を押さえる
ここでは、「そもそもCocoonってどんなテーマなの？」というところを簡単に押さえておきます。特徴を理解しておくと、あとで設定を決めるときに迷いにくくなります。
無料で多機能な国産テーマ
Cocoonは、WordPress用の無料テーマです。無料なのに、次のような機能が最初から詰まっています。
- SEOを意識した構造や内部設定
- スマホ対応のレスポンシブデザイン
- スキンによる豊富な着せ替え
- 広告表示やアフィリエイト向け機能
- 吹き出しやボックスなどの記事装飾機能
私もいくつかテーマを試しましたが、「できるだけお金をかけずに、ちゃんとしたブログを作りたい」という人とは相性が良いと感じました。
他の無料テーマとのざっくり比較
Cocoonがどんな立ち位置なのか、他の代表的な無料テーマと比べて雰囲気だけ見ておきましょう。
| テーマ名 | 特徴 | 向いている人 |
|---|---|---|
| Cocoon | 多機能・カスタマイズ性が高い・無料 | ブログ運営を本格的にやってみたい人 |
| Twenty系テーマ | シンプルで余計な機能が少ない | とにかく日記感覚で書ければいい人 |
| Lightningなど | ビジネスサイト向けのレイアウト | 会社サイトやサービス紹介がメインの人 |
アクセスアップや収益化も視野に入れてブログを育てたいなら、Cocoonの使い方を覚える価値は十分あります。一方で、本当にメモ代わりのサイトなら、標準テーマのままでも問題はありません。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
Cocoonの導入手順と初期設定の使い方
ここからは実際に手を動かしていきます。このパートのゴールは、「Cocoonを正しく導入して、最低限の初期設定が終わった状態」にすることです。
Cocoonをインストールして有効化する手順
Cocoonは「親テーマ」と「子テーマ」をセットで使うのが基本です。子テーマを有効化しておくと、デザインの変更がテーマの更新で消えにくくなります。
大まかな流れは次の通りです。
- Cocoon公式サイトから、親テーマと子テーマのZIPファイルをダウンロードする
- WordPress管理画面の「外観」→「テーマ」→「新規追加」→「テーマのアップロード」からZIPをアップロードする
- 親テーマ「Cocoon」をインストールする
- 子テーマ「Cocoon Child」もインストールする
- 最後に「Cocoon Child」を有効化する
よくあるミスが、「親テーマを有効化したまま使ってしまう」パターンです。あとからカスタマイズが消えて悲しい思いをしないように、必ず子テーマが有効になっているか確認しておきましょう。
| チェック項目 | OKの状態 |
|---|---|
| 親テーマが入っているか | テーマ一覧に「Cocoon」が表示されている |
| 子テーマが入っているか | テーマ一覧に「Cocoon Child」が表示されている |
| 有効化されているテーマ | 「Cocoon Child」が有効になっている |
ここまでできていれば、Cocoonの使い方を身につけるための準備は完了です。
初期設定で必ず押さえたいポイント
インストールが終わったら、「Cocoon設定」を開いて、基本となる部分だけ先に整えておきます。すべてを触る必要はなく、最初はポイントを絞った方が迷いません。
初心者さんにおすすめしている、最初に確認したいタブは次の通りです。
- 全体
- ヘッダー
- フッター
- 投稿
- SEO
- アクセス解析・認証
それぞれのタブで、まず見ておきたい項目をまとめました。
| タブ名 | 最初に見る項目 | 目的 |
|---|---|---|
| 全体 | サイトキーカラー・フォント | ブログ全体の雰囲気を決める |
| ヘッダー | ロゴ・グローバルメニュー | 上部ナビを分かりやすくする |
| フッター | コピーライト・フッターメニュー | 下部の案内や基本情報を整える |
| 投稿 | 目次・関連記事・SNSボタン | 記事ページを読みやすくする |
| SEO | タイトルやメタ設定 | 検索で見つけてもらいやすくする |
| アクセス解析 | 計測タグの入力欄 | アクセス数や動きを把握する |
このあと、それぞれのタブで具体的にどう設定していくかを順番に見ていきます。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
デザインを整えるCocoon 使い方のコツ
次は、見た目を整えるパートです。「細かいデザインにこだわりすぎると進まない」という人も、ここで紹介する部分だけ押さえれば、一気にそれなりの形になります。
スキンを選んで、全体の雰囲気を決める
Cocoonの大きな特徴のひとつが「スキン」です。スキンは、色や装飾、細かい見た目をまとめて切り替えられる着せ替え機能のようなものです。
スキンの設定はとても簡単です。
- 「Cocoon設定」→「スキン」を開く
- 一覧から気になるスキンを選ぶ
- プレビューを見て雰囲気を確認する
- 気に入ったものを選んで保存する
迷ったときは、白ベースの落ち着いたスキンを選ぶと失敗しにくいです。カラフルなものは楽しい反面、読みづらく感じる人もいるので、最初は「読みやすさ優先」で選ぶのがおすすめです。
ヘッダー・フッター・サイドバーを整える
次に、サイトの「枠」の部分であるヘッダー・フッター・サイドバーを軽く整えます。ここを整えるだけで、「ちゃんと作ってあるブログ」という印象がグッと強くなります。
| 場所 | おすすめの内容 | ねらい |
|---|---|---|
| ヘッダー | サイトタイトル・ロゴ・グローバルメニュー | 読者が迷わず主要ページに行けるようにする |
| サイドバー | プロフィール・検索窓・新着記事 | 書き手や他の記事に興味を持ってもらう |
| フッター | コピーライト・お問い合わせ・プライバシーポリシー | 信頼感や安心感を出す |
ヘッダーやフッターのメニューは、「外観」→「メニュー」から編集します。サイドバーの中身は「外観」→「ウィジェット」で変更可能です。最初は、プロフィール・検索・人気記事あたりだけに絞っておくと、見た目もスッキリします。
トップページと記事ページのレイアウトを整える
ここでは、ブログの顔になるトップページと、実際に読まれる記事ページのレイアウトを整えていきます。どちらも、Cocoon側の設定でかなり印象が変わります。
トップページのカードデザインを決める
Cocoonでは、トップページの記事一覧をカード形式で表示できます。カードの形や並び方を変えるだけで、かなり雰囲気が変わります。
| レイアウト | 特徴 | 向いているブログ |
|---|---|---|
| 一覧型 | タイトルと抜粋が縦に並ぶ | 文章中心のシンプルなブログ |
| カード型 | 画像とタイトルをカード風に表示 | アイキャッチ画像を活かしたいブログ |
| 2カラムカード | 横に2列でカード表示 | 記事数が多く、一覧性を高めたいブログ |
【稼げるキーワード教えます】
▼ ▼ ▼
設定は「Cocoon設定」→「インデックス」あたりから行います。自分のブログでアイキャッチ画像をどれくらい使うかをイメージしながら選んでみてください。
記事ページで必ず入れておきたい要素
記事ページのレイアウトで、特に大事な要素がいくつかあります。ここを押さえておくと、読者にとっても読みやすく、サイト全体の評価にもつながりやすくなります。
- 目次
- SNSボタン（シェアボタン）
- 関連記事
- プロフィール（記事下など）
- CTA（お問い合わせやメルマガなどがあれば）
これらは「Cocoon設定」→「投稿」タブでオン・オフを切り替えられます。特に目次は、長めの記事を書くときに読みやすさが大きく変わるので、基本オンにしておくのがおすすめです。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
SEO・高速化・アクセス解析をまとめて設定する
ここからは、検索エンジンからの評価や、サイトの動きを把握するための設定をまとめて行います。少し専門用語も出てきますが、意味をざっくり理解できればOKです。
Cocoonで最低限やっておきたいSEO設定
SEO関連の設定では、まず次のような項目をチェックしておくと安心です。
| 項目 | 内容 | おすすめの考え方 |
|---|---|---|
| タイトルタグ | ブラウザタブや検索結果に出るタイトル | 基本はテーマの標準設定のままでOK |
| メタディスクリプション | 検索結果に出る説明文 | 余裕があれば、重要な記事だけ自分で書く |
| noindex設定 | 検索結果に出さないページの指定 | 不要なアーカイブなどがあればnoindexを検討 |
| OGP・アイキャッチ | SNSにシェアされたときの表示設定 | アイキャッチ画像をきちんと設定しておく |
最初から細かい設定を完璧にしようとすると疲れてしまいます。ひとまず「インデックスさせたくないページがないか」「アイキャッチが設定されているか」だけでもチェックしておけば十分です。
アクセス解析と高速化の基本設定
ブログ運営では、「どの記事がどれくらい読まれているか」「どこから来ているか」を知ることがとても大切です。また、ページ表示の速さも、読者の離脱率に直結します。
Cocoonでは、主に次のような部分を触ることが多いです。
- アクセス解析・認証タブで、計測タグ（Googleアナリティクスなど）を入力する
- サイト高速化タブで、画像の遅延読み込みやキャッシュ関連の設定を確認する
| 分類 | 項目 | チェック内容 |
|---|---|---|
| アクセス解析 | 計測タグ | 自分のIDが正しく入力されているか |
| アクセス解析 | 計測の除外 | 自分のアクセスが除外されているか |
| 高速化 | 画像の遅延読み込み | オンにして表示崩れがないか |
| 高速化 | キャッシュ関連 | 設定変更後に不具合が出ていないか |
高速化の設定は、欲張りすぎると「管理画面が重くなる」「デザインが崩れる」などのトラブルにつながることもあります。ひとつ設定を変えたら、自分のスマホで実際に表示を確認する癖をつけておくと安心です。
Cocoonで広告・アフィリエイトを設定する使い方
ここでは、「広告を貼りたい」「アフィリエイトもやってみたい」という人向けに、Cocoonでの基本的な設定方法をまとめます。最初から難しいことをする必要はありません。
広告を自動で挿入する基本設定
Cocoonには、AdSenseなどの広告コードを一度登録しておけば、記事の決まった位置に自動で広告を挿入してくれる機能があります。毎回手作業でコードを貼る必要がないので、とても楽です。
おおまかな流れは次の通りです。
- 広告設定タブを開く
- 専用の入力欄にAdSenseのコードを貼り付ける
- 広告を表示したい位置（記事上・本文中・記事下など）を選ぶ
- 広告の数や間隔を調整して保存する
| 広告位置 | メリット | 注意点 |
|---|---|---|
| 記事上 | 目に入りやすくクリックされやすい | 開いてすぐ広告だと嫌がる人もいる |
| 本文中 | スクロール中に自然に見てもらえる | 入れすぎると読みづらくなる |
| 記事下 | 読み終わったタイミングで見てもらいやすい | 最後まで読まれないと表示されない |
最初は「記事上＋本文中少し＋記事下」くらいの控えめな設定にしておき、実際の見え方やクリックの様子を見ながら調整していくのがおすすめです。
アフィリエイトリンクを管理する機能の使い方
Cocoonには、アフィリエイトリンクやバナーを管理しやすくする機能も用意されています。同じリンクを何度も使う場合は、一度登録しておくと、あとで修正するときも楽になります。
- よく使うリンクを、テーマ側の設定やショートコードでひとまとめにしておく
- ランキング形式で商品を紹介できるブロックを活用する
- 広告だけでなく、レビューや体験談もセットで書く
Cocoonの使い方に慣れてくると、「この位置にこの広告を置きたいな」といったイメージもわいてきます。焦らず、自分のブログに合う形を少しずつ探していきましょう。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事装飾とウィジェットのCocoon 使い方
ここでは、実際に記事を書くときに便利な「装飾」と、サイト全体で読者の動きをコントロールしやすくなる「ウィジェット」の使い方を紹介します。
Cocoonブロックで読みやすい記事を書く
Cocoonは、ブロックエディターにも対応していて、専用のブロックがたくさん用意されています。文章だけのページより、適度に装飾を入れたほうが、読みやすさが一気に上がります。
| ブロック名 | 用途 | 例 |
|---|---|---|
| 吹き出し | 会話風のコメントを入れる | 「ここは注意してくださいね」などのひと言 |
| ボックス | 重要ポイントをまとめる | メリット・デメリットの箇条書き |
| ボタン | リンクを目立たせる | 公式サイトや申込みページへのリンク |
| ブログカード | 他記事へのリンクをカード表示 | 関連記事を分かりやすく見せる |
私自身、解説記事を書くときは「ボックス＋箇条書き」をよく使います。ただ見た目を派手にするのではなく、「ここだけは読んでほしい」「ここで一息ついてほしい」というポイントに絞って装飾を入れると、読者にとっても親切です。
ウィジェットで回遊率を上げる
ウィジェットは、サイドバーやフッターに設置できる小さなパーツのことです。Cocoonではウィジェットの種類も豊富なので、「このページを見てほしい」「この情報は必ず伝えたい」といった導線を作りやすくなっています。
| 表示位置 | ウィジェット例 | ねらい |
|---|---|---|
| サイドバー上部 | プロフィール・検索窓 | 「誰が書いているのか」を伝える |
| サイドバー中部 | 人気記事・新着記事 | 他の記事も読んでもらう |
| サイドバー下部 | カテゴリ一覧 | 興味のあるジャンルへ誘導する |
| フッター | お問い合わせ・プライバシーポリシー | 信頼性や安心感を高める |
Cocoonの使い方としては、「最初からあれもこれも置かない」ことが大事です。まずは必要最低限のウィジェットだけに絞り、アクセスが増えてきたり、ブログの方向性が固まってきたタイミングで少しずつ追加・調整していくと、ムダがありません。
よくある質問：Cocoon 使い方Q&A
最後に、Cocoonの使い方に関する質問をまとめました。気になるものがあれば、設定の見直しのヒントにしてみてください。
Q1. Cocoonの設定が多すぎて、どこから触ればいいですか？
A. まずは「全体」「ヘッダー」「投稿」「SEO」の4つだけ見れば十分です。Cocoonの使い方で一番つまずきやすいのは、「全部いじろうとして頭がパンクする」ことです。
この記事で紹介した通り、最初は必要なタブだけ触り、慣れてきたら「アクセス解析」「広告」などを少しずつ追加していけばOKです。一気に完璧を目指さなくても、ブログはちゃんと育っていきます。
Q2. スキンを変えたらデザインが崩れました。どうしたらいいですか？
A. スキンによって、見出しやボタンの色・サイズ、余白の取り方などがかなり変わることがあります。
- 一度スキンを元に戻して、崩れが直るか確認する
- それでも崩れる場合は、独自のCSSやプラグインを疑う
Cocoonの使い方としては、「シンプルなスキンを基本にする」「大きくカスタマイズする前にバックアップを取る」といったルールを自分の中で決めておくと、安心して試せます。
Q3. Cocoonから別のテーマに乗り換えても大丈夫ですか？
A. テーマ変更はいつでもできますが、Cocoon特有のショートコードやブロックをたくさん使っている場合、他のテーマに変えると表示が崩れることがあります。
将来的に有料テーマなどに移る可能性があるなら、Cocoonのショートコードに依存しすぎないようにしておくと、あとで楽です。「ここは他のテーマでも使えそうな書き方にしておこう」と意識するだけでも違います。
まとめ：Cocoon 使い方を定着させるためのチェックリスト
この記事の内容を振り返ります
- Cocoonは、無料で多機能な国産テーマで、ブログ運営をしっかりやりたい人と相性が良い
- 導入したら「子テーマを有効化」し、「全体・ヘッダー・投稿・SEO・アクセス解析」の順で最低限の初期設定を行う
- スキンやヘッダー・フッター・サイドバーを整えるだけで、見た目の印象は大きく変わる
- SEO・高速化・アクセス解析・広告は、完璧を目指すのではなく、重要な項目から少しずつ整えていく
- 記事装飾やウィジェットは、「読みやすさ」と「読者の動き」をイメージしながら、必要なものだけを置く
そして、今日から取るべき最初の一歩は次の3つです。
- Cocoonの親テーマ・子テーマを正しくインストールし、子テーマを有効化する
- 「Cocoon設定」を開き、「全体・ヘッダー・投稿・SEO」の4タブだけ設定する
- Cocoonのブロックを少し使いながら1記事書き、目次や関連記事、SNSボタンの表示を実際に確認する
ここまでできれば、Cocoonの使い方の土台はしっかりできています。あとは、記事を書きながら「ここをもっと良くしたいな」と感じたタイミングで、スキン変更やウィジェット追加、広告の見直しなどを少しずつ試していけばOKです。
私も最初は分からないことだらけでしたが、触っているうちに少しずつコツがつかめてきました。あなたのブログも、Cocoonをうまく味方につけて、読者にとって居心地の良い場所に育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
