【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ

【Cocoon】初心者が最初に設定すべき基本機能について

私もWordPressテーマで利用しているCocoonは、高機能で使いやすいテーマです。
しかし初期設定のままだと SEO・表示速度・ユーザーの利便性（UX） の面で損をしてしまうことがあります。

そこで本記事では、私の体験を基に初めてWordPressのCocoonテーマでサイトを作成していく際躓いたトピックスを初心者にわかりやすく解説します。

この記事では下記の悩みを解決します。

どれも初心者がつまずきやすいポイントですが、
正しく設定することで サイトの使いやすさ・SEO・表示速度が大きく向上 します。

各項目は短くまとめていますので、必要な部分だけ読み進めてください。

---

グローバルメニューとサイドバーの最適化（UX向上）

グローバルメニューは、サイトの「案内板」の役割を持ちます。
Cocoonではメニューに説明文を追加できるため、初心者向けサイトでは特に効果的です。

グルーバルメニューに説明文を入れるメリット／デメリット

私もWordPressで初めてグローバルメニューを設定したときは、文字数を短くする必要（スマホ対応の為）がある為、メニュー名だけだと表現が難しく補助的に記載できる方法を模索していました。そんなときに、メニュー名の説明文を入力する個所がわかりましたので、ノウハウの一部でもなればと思い下記に解説します。

初心者はメニュー名だけでは内容を理解できません。
説明文を入れることで、迷いが大幅に減ります。

下記にメリット／デメリットを記載します。

メリット
・メニューの意味が初心者にも伝わる
・回遊率が上がる
・メニュー構造を理解しやすくなる

デメリット
・説明文が長いとスマホでは醜くまたPCでも一部の表示になってしまいますので一言で補足する程度にするのがコツです。
・適切な説明文でないと、余計に読者の混乱を招きます。

私もメニュー及び説明文を長くすると、カテゴリの意味が解らず見ずらかった為、単語表現になるようにし補助として説明文を入力しました。

また、パソコンで見ると綺麗でも、スマホだと2行に改行されてしまうことがあります。
私個人の体験としては、説明文は『全角で5〜6文字以内（例：WordPress、Profileなど）』の短い単語に留めておくのが、スマホでもスッキリ見せるコツです。

設定方法

私も最初のころは、グローバルメニューの説明文を何処から設定すれば良いかわかりませんでした。

操作方法：管理画面⇒外観 ⇒ メニュー ⇒ メニュー構造 ⇒ メニュータブを開き⇒説明文を入力

サイドバーの最適化（補助導線）

サイドバーは記事の横に表示される「補助ナビゲーション」です。
読者が記事を読みながら他の情報にアクセスできるため、回遊率が大きく向上します。

メリット
・回遊率の向上: おすすめ記事やカテゴリー、人気ランキングを配置することで、ユーザーが他のページへ移動しやすくなります。
・利便性の向上: サイト内検索ボックスや主要メニューを常に表示しておくことで、ユーザーが目的の情報を探しやすくなります。
・CV（コンバージョン）率の向上: お問い合わせボタンや資料請求フォームを目立たせ、ユーザーのアクションを促すことができます。

デメリット
・メインコンテンツの圧迫: 画面の左右に領域を割くため、記事や画像などのメインコンテンツの表示幅が狭くなり、特にPC版で圧迫感が出ることがあります。
・スマホ対応の難しさ: スマートフォンなど画面の小さい端末では、幅の制限からサイドバーがメインコンテンツの下に追いやられたり、非表示になることが一般的であり、視認性が低下します。（Cocoonテーマでは設定で解決可能です。）
・情報の煩雑化: 広告やリンクを過剰に詰め込むと、ユーザーの注意が分散し、かえってメインコンテンツが読みにくくなる原因になります。

サイドバーの表示位置の見直し

私の場合、サイドバーの表示メニューの項目数やサイトの読者目線等を分析し表示位置を色々変えて試行してみました。
詳しくは下記リンクを参照ください。

グローバルメニュー＆サイドバーについて詳しく知りたい場合

あわせて読みたい→【Cocoon】読者が迷わないグローバルメニュー＆サイドバー設計

---

吹き出し・ブログカードの最適化（PV数・日付の非表示）

私もWordPressをはじめたころは、Cocoonテーマで吹き出しやブログカードが使えることも知りませんでした。
そのため、テキストで執筆していましたので、記事が醜く「ごちゃごちゃ」していて困っていました。
その時に吹き出し機能がある事を知り「吹き出し」機能を使い少しはブログらしくなり安心していました。

また同時にブログカードを利用していましたが、カードに表示される日付やPV欄を非表示にしカードに表示される記事説明を多く表示できないかと思っていました。

ここでは、吹き出し機能の説明やブログカードの日付・ＰＶ数の非表示などに特化した解説を下記リンクしています。

目的：ブログカードは関連記事への導線目的で吹き出しは、会話形式での執筆や補足説目に重要な事を知りました。

しかし、初期設定のままだと 日付やPV数が読者の不安を誘うことがあります。

ブログカードの日付やPV数を非表示にする理由

• 日付が古いと読者が不安になる（離脱に繋がる。）
• PV数が少ないと信頼性が下がる（記事に集中する事ができる。）
• 情報量が多くてカードが重く見える（読者には必要ない情報がカードを占めることになる）

吹き出しの活用（初心者向けサイトに最適）

吹き出しは文章を「会話形式」で伝えるための機能です。
初心者向けサイトでは、吹き出しを使うことで理解のしやすさが大幅に向上します。

実際に私はこの機能の存在を知らず、テキストで会話形式のように箇条書きで記事を執筆していました。
それゆえ、記事がとても醜く読者に読んでもらえるには、どうしたらよいか困っていました。

その時に、Cocoonテーマには吹き出し機能が標準搭載されている事を知り使ってみるとサイトの記事が整理されたように感じとても重宝しています。
またCocoonテーマで吹き出し機能が簡単に設定できることなど早く知っていればと思い記載しました。

上記の経験より今後サイト運営で記事を執筆する方の情報共有になれば幸いと思い記載します。

吹き出しは「読者の理解を助ける補助ツール」として非常に効果的です。

以下にメリット・デメリットをまとめました。

吹き出しのメリット
・視線誘導とリズム: テキストだけの単調な画面に変化が生まれ、スクロールする手が止まりやすくなります。
・難しい内容の緩和: 専門的な知識や複雑な解説も、キャラクター同士の会話にすることで読者の理解を助けます。
・共感の獲得: 読者の悩みをキャラクターに代弁させることで、「自分のことだ」と感じてもらいやすくなります。

吹き出しのデメリット
・SEO（検索エンジン）への影響: 吹き出し内の短いセリフばかりになると、記事全体の文字数や情報密度が減り、評価が下がることがあります。
・スクロール量の増加: 枠線やアイコンのスペースを取るため、ページ全体の長さが伸び、読者がスクロールする手間が増えます。
・信頼性の低下: 真面目なテーマやビジネス向けの解説で多用すると、コンテンツの格調や説得力が薄れる原因になります。

ブログカードや吹き出しについての詳細は下記リンクに解説しています。

ブログカードと吹き出しについて詳しく知りたい場合

あわせて読みたい→【UX改善】ブログカード最適化と吹き出しを使った読者獲得術

---

YouTube埋め込みのパラメータとプラグイン

YouTubeをそのまま埋め込むと、ページが重くなり表示速度が落ちます。
また、著作権・商標権の侵害などにも注意してください。
私もYouTubeは導入したものの、パラメータ等知りませんでした。そんな時YouTube動画の見せ方を調べているときにCocoonでは埋め込みコードにパラメータを追加することでユーザビリティが向上できるとしり実装したことを記載します。

メリット
・ピンポイントな制御が可能: 「動画の開始・終了位置の指定」「コントロールバーの非表示」「関連動画の制限」などが手動で確実に設定できます。
・セキリュティリスクがない: 外部プログラムをインストールしないため、バグや脆弱性の心配が一切ありません。

デメリット
・コードの知識が必要: パラメータの記述ルール（& で繋ぐなど）を覚える必要があり、初心者にはややハードルが高いです。
・一括管理ができない: 動画ごとに毎回手動でコードを書き換える必要があるため、埋め込み数が多いと作業の手間がかかります。
・仕様変更に弱い: YouTube側の仕様変更により、一部のパラメータ（例：関連動画を完全に非表示にする機能など）が突然使えなくなることがあります。

代表的なパラメータ

ここでは、よく使われるパラメータを下記に記載します。具体的な使用方法などは「詳しい解説は内部リンク（子記事）」の章を参照ください。

• start=2（YouTube開始時刻の調整）
• controls=1（プレイヤーコントロールの表示）
• rel=0（関連動画を自チャンネルに限定）

YouTubeパラメータやプラグイン等の具体的な事例及び紹介を下記リンクで詳しく解説してます。

YouTubeパラメータやYouTubeのプラグインについて詳しく知りたい場合

あわせて読みたい→YouTube埋め込みパラメータとプラグイン活用法

---

内部リンク・外部リンクの開き方設定（UX向上）

リンクの開き方は、UX（ユーザーの利便性）に大きく影響します。

私も初めてサイト開設する時、「新しいタブで開く」や「同じタブで開く」の設定場所などわかりませんでした。

また、私自身内部リンクで「新しいタブ」を開いたりしタブばかりでブラウザがごちゃごちゃになったりその逆に外部リンクで「同じタブ」を開いたりし戻れなくなり幾度も失敗しました。

リンクを設定する時に、「新しいタブで開く」に✓を入れるか入れないかで設定できます。（詳しくは下記（子記事）リンクより参照ください。）

この失敗を今後サイト運営される方の情報とし、活かしていただければ幸いです。

私の体験では、開き方はリンク先（読者目線での操作）を考慮すると良いと思いました。

内部リンク

私も初心者の頃はすべて新しいタブで開いていましたが、スマホで見るとタブだらけになって見づらかった経験から、今は内部リンクを同じタブで開くように統一しています。

サイト内の別記事へ案内する「内部リンク」は、原則として「同じタブで開く」設定にしましょう。

理由は、読者（ユーザー）の操作性と、サイト全体の回遊率（あちこちの記事を読んでもらえる割合）を高めるためです。

●参考情報
現在、ブログ読者の7〜8割はスマートフォンからアクセスしています。

メリット

・内部リンクをクリックするたびに新しいタブが開いてしまうと、スマホのブラウザのタブが少ないうちは「元に戻るのにも」簡単に戻れます。タブが増えるとデメリットになります。
・同じタブで開いていれば、読者はブラウザの「戻る」ボタンを押すだけで前のページに戻れます。この自然な動きを邪魔しないことが、ユーザーの使いやすさ（UX）向上につながり、結果としてGoogleからのサイト評価（SEO）にも良い影響を与えます。

デメリット

読者が「さっきの記事のあの部分をもう一度見ながら、今の記事を読みたい」と思ったとき、同じタブだと画面が切り替わってしまうため、同時に見比べることができません。

外部リンク

他の人のサイトや公式サイトを紹介する「外部リンク」は、必ず「新しいタブで開く」設定にします。

理由：自分のブログから読者が完全に離れてしまう（離脱する）のを防ぐためです。

メリット

・参考サイトの情報を読み終わった読者がそのタブを閉じたとき、その下にあなたのブログがそのまま残っていれば、スムーズに続きを読んでもらえます。もし同じタブで開いてしまうと、読者はそのまま他所のサイトへ行ってしまい、二度とあなたのブログに戻ってこない可能性が高くなります。
・HTMLで新しいタブ（target=”_blank”）を開くよう設定する場合、実はセキュリティ上の脆弱性や、ページ表示速度が低下するリスクが生まれます。これを防ぐために、リンクには必ず rel=”noopener” 　(*)というコードを付与する必要があります。(*)：現在のWordPress（ブロックエディタ）であれば、「新しいタブで開く」をONにするとこのコードが自動で付与されるため安心です。noopenerとは、悪意あるリンク先が元ページのURLを書き換える「タブナビング攻撃」などの防止のためのコードです。

デメリット

新しいタブが裏側で何個も開くと、スマホのメモリ（動作スピード）を消費し、端末が重くなる原因になります。また、タブを閉じる手間が増えるため、一部のユーザーからは「勝手に新しいタブを開かないでほしい」と嫌がられる傾向があります。

画像リンク

画像にリンクを設定する場合（画像リンク）は、「クリックした後にどこに飛ぶか」によって開き方を変えるのがベストです。

メリット

・画像そのものを拡大して見せたい場合（同じタブ、またはポップアップ）イラストの詳細や、細かい文字が書かれた表などを「大きく見せたいだけ」の場合は、同じタブで開くか、プラグイン等を使って画面上にフワッと拡大表示（ライトボックス効果）させるのが親切です。
・画像が「バナー広告」や「他サイトへのリンク」の場合（新しいタブ）広告等のバナー画像や、外部サイトの紹介用画像をクリックさせる場合は、「外部リンク」と同じ扱いになります。自分のサイトを閉じさせないために、必ず「新しいタブで開く」に設定しましょう。

デメリット

読者がスマホをスクロールしている際、指が画像に当たってしまい、意図せず画像の拡大画面や別ページに飛ばされる「誤クリック」が非常に発生しやすくなります。

内部・外部・画像リンクや開き方について詳しく知りたい場合

ここまで解説した「同じタブで開く」「新しいタブで開く」の設定は、WordPressのブロックエディタを使えばクリック一つで簡単に切り替えることができます。
初心者の方など、実際の編集画面を見ながら設定手順を確認したい方や、「新しいタブで開く」をONにする具体的な操作方法を知りたい方は、こちらの別記事でスクリーンショットを交えて分かりやすく解説しています。合わせて参考にしてみてください。

あわせて読みたい→【UX向上】内部リンクと外部リンク（画像）の開き方使い分け術

---

コメントの非表示設定（初心者向けサイトは非表示推奨）

初心者向けサイトでは、コメント欄が以下の問題を引き起こします。（初心者にはコメント欄非表示が最適です。）

問題点

下記にそれぞれ結論（太字）や理由を記載します。

・スパムが増える：海外から怪しいリンク付きの自動迷惑コメント（スパム）が大量に届くようになり、削除対応に無駄な時間を奪われます。
・読者がコメントを残しづらい：見ず知らずのブログに書き込むのは読者にとって心理的ハードルが高く、設置しても機能しないことがほとんどです。
・コメントが少ないと「人気がない」と見られる：コメント欄が「0件」のまま放置されていると、読者に「あまり読まれていない寂しいサイト」という印象を与える逆効果になります。

非表示にする理由

下記に「それなら非表示にしよう！」と思う根拠を記載します。

・スパム対策になる：コメント欄自体を閉じることで、不正なアクセスや悪質なスパムを100%シャットアウトし、サイトのセキュリティを高められます。
・記事がスッキリする：画面下部の大きな入力フォームが消えるため、記事全体の読みやすさが向上し、読んでほしい関連記事へと読者をスムーズに誘導できます。
・初心者向けサイトでは特に有効：初期のブログ運営ではコメント管理のメリットより負担の方が大きいため、無駄なノイズを無くして記事執筆に集中できます。

「初心者のうちは、記事を書き進めるだけで精一杯です。そこに海外からの大量の迷惑コメント（スパム）が届くと、その削除対応だけで心が折れてしまいます。ブログ運営に慣れるまでは、コメント欄は思い切ってオフにしておくのがベストだと私は考えます。」

Cocoonのコメント欄の非表示について詳しく知りたい場合

WordPress（Cocoon）の管理画面から、クリックだけでコメント欄を完全に非表示にする具体的な設定手順は、以下の別記事でスクリーンショットを交えて詳しく解説しています。
3分ほどで完了する簡単な作業ですので、ぜひ参考にしてみてください。

あわせて読みたい→Cocoonのコメント欄を非表示にすべきケースと正しい設定手順

---

パンくずリストの最適化（SEO効果が高い）

パンくずリストはサイト構造を理解するための重要な要素です。
私もCocoonテーマには、パンくずの設定が標準搭載されていて、とても助かっています。

以前パンくずを手動で設定していましたが、私はとても苦労しました。（JavaScript等利用しましたがうまくいかず、レイアウトが崩れる等経験しうまくいきませんでした。）

しかしCocoonテーマには、標準でパンくずの設定が簡単にできますので、これからサイト運営など始められる方やパンくずの設定が必要な方等下記リンクなどを併せてお読みいただけるとありがたいです。

設定のポイント

下記項目が、なぜポイントかを記載します。

・カテゴリ階層を正しく反映させる：「親カテゴリ ＞ 子カテゴリ ＞ 記事タイトル」のように階層を正しく整理することで、読者とGoogleの検索ロボット（クローラー）の双方がサイトの構造を瞬時に理解できるようになります。
・Cocoon設定でパンくずを必ずONにする：Cocoonでは、手動で難しいコードを書かなくても、管理画面のチェック一つで簡単にパンくずリストを全ページに自動生成・配置することができます。
・記事の導線が明確になり回遊率向上につながる（直帰率が下がる）：読者が「他の関連エリアも読んでみたい」と思ったときの道標（ナビゲーション）になるため、サイト内の回遊率が上がり、途中で離脱されるリスク（直帰率）を減らせます。

パンくずリストについて詳しく知りたい場合

Cocoonの管理画面のどこを開き、どのボタンを押せばパンくずリストを表示できるのか、実際のスクショを使った具体的な手順は以下のリンクにまとめています。設定ミスを防ぎたい方は、ぜひこちらの解説を見ながら進めてみてください。

あわせて読みたい→【SEO効果】Cocoonパンくずリストの正しい設定メリット

---

WordPressのメジャーバージョンアップ及びバックアップ・復元

Cocoonの設定が終わったら、定期的なメンテナンス（アップデート）の準備もしておきましょう。実は私も、初心者の頃に何も考えずにボタンを押してブログがバグり、丸一日以上復旧に追われた苦い経験があります。

Cocoonは多機能で素晴らしいテーマですが、WordPressの本体アップデート時には一時的に表示が崩れるケースがあります。

大切な記事（資産）を守るためにも、アップデート前には必ずバックアップを取りましょう。メジャーバージョンアップ（大型アップデート）では、システムの仕組みが大きく変わるため、プラグインの不具合で画面が真っ白になったり、デザインが完全に崩れたりするリスクが初心者ほど高くなります。万が一に備えて「いつでも元の状態に戻せる安心」を作っておくことが、ブログ運営では最優先です。
具体的な手順（バックアップ・復元・テスト環境作成）は下記リンクを参照ください。

WordPressのアップデートには、セキュリティ修正などの『マイナーアップデート』と、機能が大きく追加される『メジャーアップデート（例：バージョン 6.0 から 6.1 への変更など）』があります。特に注意が必要なのが、この後者のメジャーアップデートです。

WordPressメジャーアップデート・バックアッププラグインについて詳しく知りたい場合

実際に私がWordPressのメジャーバージョンアップ・テストサイト・リビジョン等実施しましたので下記リンクに詳しく解説してます。
またその時実際に使っていたバックアップのプラグインについても解説していますので併せてお読みください。

あわせて読みたい→【保存版】WordPressメジャーアップデート安全移行ガイド

---

記事の複製・書替え＆再公開のプラグイン

Cocoonの設定が完了し、いよいよ記事を書き始める方に、最初から絶対に導入してほしい機能があります。それが「記事の複製（コピー）」です。

作業効率｜Yoast Duplicate Post（記事複製プラグイン）

WordPressには標準で記事をコピーする機能がありません。
私はこれを知らず、最初は過去の記事から見出しや枠線をいちいち手動でコピー＆ペーストして使い回していました。
この無駄な作業のせいで、1記事書くのに余計な時間がかかり、本当に大失敗したと感じています。

私は、ブログ運営で一番大切なのは、設定に時間をかけることではなく「記事を書くこと」に時間を使いたいと思います。無駄な作業時間は1秒でも削る為「Yoast Duplicate Post」というプラグインを導入しました。（強制するものではありません。）

【参考】
WordPressの標準機能でも部分的なコピペはできますが、アイキャッチ画像、カテゴリー設定、SEO用のメタディスカプション（説明文）までを『丸ごと一発で下書きに複製』できるのは、このプラグインならではの強みです。

これを導入するだけで、過去の優秀な記事（テンプレート）をワンクリックで複製できるようになり、執筆スピードが劇的にアップします。
具体例を下記に記載します。

・記事の「型（テンプレート）」を使い回せる：レビュー記事やまとめ記事など、毎回同じ「見出しの構成」を使う場合、あらかじめ枠組みだけ作った下書きを複製すれば、すぐに本文の執筆に取りかかれます。
・公開済みの記事を安全に「書き換え（リライト）」できる：すでに公開している記事を大幅に修正したい時、直接編集すると読者に崩れた画面を見せてしまうリスクがあります。一度下書きに複製してじっくり書き直してから再公開（差し替え）するという、安全なリライト作業にも欠かせません。

複製・再公開のプラグインについて詳しく知りたい場合

「Yoast Duplicate Post」のインストール方法から、Cocoonの標準機能とバグを起こさないための「おすすめ初期設定」の手順については、こちらの別記事でスクリーンショット付きで詳しく解説しています。不具合を防ぐためにも、導入前にぜひ一読してみてください。

あわせて読みたい→【Yoast】記事を一瞬で複製！ Duplicate Postの使い方

---

WordPressの操作性向上に利用した各CSS

スマホデザインの見栄え

Cocoonは初期設定のままでも綺麗に表示されますが、実際にスマホで自分のブログを見たときに「あれ、見にくいな」と感じる部分が出てきました。ブログの読者の8割以上はスマホユーザーです。

パソコン画面だけでデザインを確認して満足していると、スマホ読者が一瞬で離脱してしまう原因になります。
特に表（テーブル）や長いリストは、画面からはみ出してしまいがちです。
読者にストレスを与えないためには、スマホ画面でも綺麗に収まる「横スライド機能」が欠かせません。
コードをコピー＆ペーストするだけで、スマホ表示を劇的に見やすくするカスタマイズ方法は下記リンクで詳しく解説しています。

操作性

私が、追加した機能に、Cocoonで標準搭載されている「ページトップへ戻るボタン」の調整です。

Cocoonの初期状態だと、このボタンはただの「上向きの矢印（↑）」だけで、少し味気ない上に、スマホ慣れしていない読者には「何のボタンか分からない」という声を耳にすることがあります。

ブログの回遊率（色々な記事を読んでもらう確率）を上げるためには、読者が迷わない事を第一に考えました。

下記リンクで「スマホでの表の横スクロール」「ページトップボタンへの『TOP』文字追加」、そして読者のクリック率を高める「ブログカードへの『続きを見る』の表示」に必要なCSSコードは、すべて以下の別記事にまとめて公開しています。コピペするだけでCSS初心者でも3分で一括実装できますので、ブログの操作性をまとめて向上させたい方は、ぜひこちらの解説を見ながら必要な方は設定してみてください。（ただし動作については自己責任でお願いします。）

カスタムCSS（横スクロール等）について詳しく知りたい場合

私が実際に行ったCSSカスタマイズの事例（ソースコード付き）を下記リンクで詳しく記載してますのでお読みください。

あわせて読みたい→CSSでブログの操作性を向上！戻るボタン・横スクロールの書き方

---

まとめ：Cocoonは“設定の最適化”でサイト品質が大きく向上する

Cocoonは初心者でも使いやすいテーマですが、初期設定のままだとSEOやUXの面で損をしてしまいます。

便利な設定などありましたら、本サイト内で都度更新します。お問い合わせなどでご意見を連絡してもらえるとありがたいです。よろしくお願いします。

本記事で紹介した設定を行うことで、

• サイトが見やすくなる
• 表示速度が改善する
• 構造を理解しやすくなる
• 読者の離脱が減る
• SEO・UX共効果が期待できる
• 記事の修正作業の効率化が図れる
• バックアップ・復元・WordPressメジャーバージョンアップを正確に行える。

という効果が期待できます。

各項目の詳細は子記事で解説していますので、必要な部分だけ読み進めて設定を進めてください。

あわせて読みたい関連記事

ここでは本記事（親）との、子記事のリンクをまとめて下記に記載します。