選択肢ごとに結論を先に整理します。ブログ収益化を目指すエックスサーバー新規ユーザーはクイックスタート時のXwriteセット購入が最安・最効率です。情報量やサーバーにこだわらない場合はSwellが有力候補ですが、Xwriteより880円ほど高くなります。まず無料で始めたい場合はCocoon一択で、有料テーマは収益が出てから検討すれば十分です。プレミアム・ビジネスプラン契約者はXwriteの年額サブスクが無料特典で付いてくるため実質コストゼロです。

エックスサーバー契約者が直面するテーマの3択

エックスサーバーのクイックスタート画面では、WordPressテーマを複数種類から選べます。そのうち実質的な選択肢は「Cocoon（無料）」「Xwrite（有料）」「Swell（有料）」の3択です。

クイックスタートでのセット購入はXwriteが最も割引率が高く（20%オフ）、SwellはXwriteより割引率が低く（5%オフ）かつ通常価格も高いため、エックスサーバー新規契約時に有料テーマを選ぶならXwriteが価格面で有利です。

プランによって変わるXwriteの実質コスト

Xwriteの実質コストはエックスサーバーの契約プランによって大きく変わります。プレミアム・ビジネスプランの契約者は、Xwriteの年額サブスクが無料特典として付いてきます。

スタンダードプランでエックスサーバーを新規契約するなら、クイックスタート時のセット購入が最安（買い切り15,840円）です。契約後に単体で購入すると19,800円になるため、新規契約と同時に決断できれば3,960円の節約になります。プレミアム・ビジネスプランを契約するなら、Xwriteの年額サブスクが無料特典として付いてくるため、テーマのためだけに追加費用を払う必要はありません。キャンペーン情報についてはエックスサーバーのキャンペーン解説記事も参考にしてください。

すでにエックスサーバーを契約済みでXwriteのみ購入したい場合はA8経由で購入できます。

Xwrite（エックスライト）公式サイトを見る

Cocoon・Xwrite・Swellの3択比較

3つのテーマを「エックスサーバーでブログ収益化を目指す」という条件で比較します。価格・機能・情報量・エックスサーバーとの相性の4軸で整理しました。

機能・デザインの総合力はSwell優位です。ただしエックスサーバーユーザーに限定すると、セット割20%・移行プラグイン・同一会社サポートというXwrite固有の優位性が浮かび上がります。価格差880円（セット時）をどう評価するかが判断の分岐点になります。

アフィリエイト運営での実用性分析

Xwriteにはアフィリエイト記事の執筆で直接使えるブロックが複数あります。それぞれの機能と収益化への実用性を確認します。

商品レビューブロック——商品名・評価（星）・メリット・デメリット・リンクボタンをまとめてデザインできるブロックです。Googleの構造化データ（JSON-LD）の出力に対応しており、検索結果にリッチリザルト（星評価）が表示される可能性があります。アフィリエイト記事でよく使う「総合評価ボックス」をCSSなしで作れるのは、実用的な機能です。

ステップブロック——「STEP1→STEP2→STEP3」という手順を視覚的に見せるブロックです。エックスサーバーの始め方やWordPressの設定手順など、手順解説記事との相性が高く、視認性の高いステップ表示はページ内滞在時間の改善にも寄与します。

FAQブロック——よくある質問をアコーディオン形式で実装できるFAQブロックが標準搭載されています。CSSやJavaScriptの知識がなくても設置できます。

ボタンブロック——アフィリエイトリンクをCTAボタンとして設置する際のデザイン自由度が高く、色・形・サイズをブロック設定から変更できます。コードなしでクリックされやすいボタンを作れますが、CocoonやSwellの専用CTAボックスと比べると機能差はあります。

構造化データ対応の商品レビューブロックはXwriteの明確な優位点です。アフィリエイト記事を多く書く予定であれば、この機能だけでも投資対効果は十分にあります。

Xwriteで実際に作れるサイトの種類

XwriteはブログだけでなくECサイト・企業サイト・店舗サイトまで対応できます。公式が提供しているデモサイトで完成イメージを事前に確認できます。

アフィリエイト・ECサイト型では、商品の絞り込み検索・レビュー表示・価格表示を組み合わせたデザインが作れます。アフィリエイトサイトで商品比較ページを作る際にも応用できる構成です。

企業サイト・コーポレート型では法律事務所・クリニック・士業などにも対応しています。ヘッダーに電話番号・お問い合わせボタン・ナビゲーションを整えた本格的なレイアウトが専門知識なしで作れます。「ブログテーマ」という印象を持たれがちですが、ECサイト・企業サイト・ランディングページまで幅広く対応できます。エックスサーバーで複数サイトを運営する予定があれば、1ライセンスで使い回せるXwriteのコスパはさらに上がります。

Xwriteがおすすめの人・向いていない人

「エックスサーバーを契約した」という条件を前提に、具体的な状況別の判断基準を示します。

Xwriteを選ぶべき人の条件はこちらです。エックスサーバーを新規契約するタイミングにある（セット20%オフが適用される）、プレミアム・ビジネスプランを契約する予定（年額サブスクが無料特典で付く）、Cocoonから有料テーマへの移行を検討している（公式移行プラグインあり）、複数のサイトで同じテーマを使いたい（GPL・制限なし）、アフィリエイト記事に構造化データ対応の商品レビューを使いたい、サーバーとテーマを同一会社でまとめて管理したい、といった方に向いています。

Xwriteより他を選ぶべき状況はこちらです。ネット上の解説記事・カスタマイズ事例を調べながら使いたい（Swellが情報豊富）、無料で始めてコストをかけたくない（Cocoon一択）、収益化の見通しが立っていない段階（まずCocoonで様子見）、デザインの完成度を最優先にしたい（Swellが総合力で上回る）、すでにエックスサーバーを契約済みで新規割引を使えない（価格差がなくなる）といった場合です。

エックスサーバー契約済みの場合の購入手順

すでにエックスサーバーを契約している場合、サーバーパネルではなくXServerアカウントからXwriteを購入します。4ステップで完結します。

1. エックスサーバー公式サイト右上の「ログイン」メニューから「XServerアカウント」を選択してログインする。
2. XServerアカウントにログイン後、「WordPressテーマ」メニューを選択し「有料WordPressテーマの購入はこちら」ボタンをクリック。
3. 「WordPressテーマ購入」ページでXwriteを選択する。エックスサーバー限定の特別価格（買い切り15,840円）が適用されている。
4. Xwriteを選択するとプラン選択モーダルが開く。「買い切り15,840円」「サブスク9,900円/年」「サブスク990円/月」の3プランから選択して購入完了。

購入後はXwriteユーザー専用サイト（users.xwrite.jp）で「外部サービス連携」→「ライセンス認証」を行ってください。認証を完了しないとテーマのバージョンアップデートが受け取れないため必須の手順です。

よくある質問

XwriteとSwellはどっちがいいですか？

エックスサーバーを新規契約するなら価格面でXwriteが有利（セット時15,840円 vs Swell 16,720円）です。機能・デザインの総合力と情報量はSwellが上回ります。「エックスサーバーとまとめて管理したい」「Cocoonから移行プラグインで乗り換えたい」という条件ならXwrite、「ネットで調べながらカスタマイズしたい」ならSwellが向いています。

Cocoonのまま使い続けるのはダメですか？

ダメではありません。Cocoonは無料で高機能なテーマです。ただしブロックエディター対応がXwrite・Swellより弱く、アフィリエイト向けの専用ブロックも少ないです。収益化を目指す段階になったら有料テーマへの移行を検討するのが現実的な順序です。

クイックスタートのセット割は後から使えますか？

使えません。クイックスタートのセット価格（買い切り15,840円）は新規契約時のみ適用されます。契約後にXServerアカウントから購入する場合は通常価格（19,800円）になります。新規契約と同時に決断できれば3,960円の節約になります。

プレミアムプランのXwrite無料特典はどのテーマでも使えますか？

いいえ。エックスサーバーのプレミアム・ビジネスプランに付属する「有料WordPressテーマ無料特典」はXwrite（年額9,900円相当）が対象です。SwellやAFFINGER6など他の有料テーマは対象外です。詳細はXwrite公式 料金プランページでご確認ください。

XwriteはエックスサーバーなしでCocoon→Xwriteに移行できますか？

はい、できます。Xwriteは他サーバーでも利用可能で、公式の「テーマ移行サポート（Cocoon→Xwrite）プラグイン」も使えます。ただしエックスサーバー以外では購入時のセット割引は適用されません。

Xwriteのサブスクを解約するとどうなりますか？

テーマ本体はそのまま使い続けられます。ただしフォーラムへの書き込みとテーマのアップデートができなくなります。なおフォーラムの閲覧は解約後も可能です。長期運用を前提にするなら、解約リスクのない買い切りプランを推奨します。

まとめ

エックスサーバー契約者がテーマを選ぶ際の結論は、契約タイミングとプランによって変わります。新規契約時であればXwriteは20%オフのセット購入が適用され、3択の中で最もコスパが高い有料テーマです。プレミアム・ビジネスプランなら年額サブスク相当が無料特典で付いてくるため、実質コストゼロでスタートできます。

機能・デザイン・情報量の総合力ではSwellが上回ります。「ネット上の解説記事を調べながら使いたい」「デザインの完成度を最優先にしたい」という場合はSwellを選ぶ理由があります。

• エックスサーバー新規契約時 → Xwriteをセットで買うのが最安かつ最効率
• 契約済みで有料テーマを追加するなら → Xwrite（同一会社・移行プラグインあり）かSwell（情報量重視）で状況に応じて選ぶ
• 収益化の見通しが立っていないなら → Cocoonで始めて収益が出てから移行でよい

なお、そもそもエックスサーバー自体が自分に合っているか確認したい場合は目的別おすすめレンタルサーバー比較記事も参考にしてください。定期的にキャンペーンを実施しており、新規契約とXwriteのセット購入をまとめて済ませるなら公式サイトで最新のキャンペーン情報を確認してください。

エックスサーバー公式サイトを見る

Xwrite（エックスライト）公式サイトを見る

• 現在地ハイライト＋自動追従の実装 → 4ステップのコピペ作業で完結
• CSS追加 → 追加CSSに貼るだけでOK
• JSの設置場所 → footer.phpの正しい位置に追記

実装するとどうなる？

読んでいるセクションが目次でリアルタイムにハイライトされ、目次が長くても自動でスクロール追従します。

長文記事の読者が感じるストレスの多くは、「今どこを読んでいるのか」「あとどれくらい残っているのか」という現在地の見えなさにあります。現在地が可視化されると、読者は安心して読み進めやすくなり、離脱率の低下にもつながります。

実装後に変わることは次の3点です。

• 読んでいるセクションの目次項目がハイライト表示される
• 目次が長い場合、アクティブ項目が常に表示範囲内に入るよう自動追従する
• 読者が「今どこにいるか」を常に把握できる

実装はコードのコピペが中心です。難しい作業はありませんが、テーマファイルを編集するため、必ず事前にバックアップを取ってから進めてください。

手順の全体像

作業は4ステップです。コードはすべてコピペで完結します。

1. サイドバーに目次ウィジェットを設置
2. 追加CSSを設定する
3. Cocoon本体のfooter.phpを子テーマへコピー
4. footer.phpにJSを追加する

① サイドバーに目次を追加する

WordPress管理画面の「外観 → ウィジェット」から、目次ウィジェットをサイドバーに追加します。「サイドバースクロール追従」エリアに目次ウィジェットを追加してください。

Cocoonの大元設定と目次の表示深さを揃えてください。たとえば大元でh3まで表示する設定にしているのに、ウィジェット側でh2までにするとミスマッチが起き、ハイライトが正しく動作しません。

② 追加CSSを設定する

WordPress管理画面の「外観 → カスタマイズ → 追加CSS」に以下のコードを貼り付けます。

目次が長い場合もスクロールできるようにするCSSです。アクティブ項目は青い左ボーダーとハイライト背景で強調されます。

#sidebar-scroll .widget.widget_toc .toc-content{
  max-height: 55vh;
  overflow: auto;
}
#sidebar-scroll .widget.widget_toc a{
  display: block;
  padding: 6px 0 6px 12px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
#sidebar-scroll .widget.widget_toc a.is-active{
  background: rgba(59,130,246,0.12);
  border-left: 3px solid #3b82f6;
  font-weight: 600;
}

CSSはここまでで完結です。見た目の調整はこのコードだけで対応できます。

③ Cocoon本体のfooter.phpを子テーマへコピーする

テーマ本体を直接編集するとアップデート時に上書きされます。必ず子テーマに追加してください。

すでに子テーマ側にfooter.phpがある場合、またはJSを追記できるファイルがある場合はこの手順をスキップして④へ進んでください。

エックスサーバーでの作業手順

1. エックスサーバーにログインしてサーバーパネルを開く
2. ファイルマネージャから該当ドメインを開く
3. /public_html/wp-content/themes/cocoon-master/footer.php をコピー
4. /public_html/wp-content/themes/cocoon-child-master/footer.php として貼り付け

サーバーパネルの操作に慣れていない方は、先に全体像を把握しておくとスムーズです。エックスサーバーのサーバーパネル完全ガイド｜各機能の使い方を解説

④ footer.phpにJSを追加する

WordPress管理画面の「外観 → テーマファイルエディター → Theme Footer（footer.php）」を開き、</div><!-- #container -->の直前に以下のJSコードを追加します。

追加するJSコード

<script>
document.addEventListener("DOMContentLoaded", () => {
  const toc = document.querySelector("#sidebar-scroll .widget.widget_toc");
  if (!toc) return;

  const tocScroll = toc.querySelector(".toc-content") || toc;
  const links = Array.from(toc.querySelectorAll('a[href^="#"]'))
    .filter(a => a.getAttribute("href").length > 1);

  const items = links.map(a => {
    const id = decodeURIComponent(a.getAttribute("href").slice(1));
    const el = document.getElementById(id);
    return el ? { id, el, a } : null;
  }).filter(Boolean);

  if (!items.length) return;

  const OFFSET = 160;
  let currentId = null;

  function clearActive(){
    links.forEach(a => a.classList.remove("is-active"));
  }

  function keepActiveVisible(activeLink){
    if (tocScroll.scrollHeight <= tocScroll.clientHeight) return;
    const cRect = tocScroll.getBoundingClientRect();
    const aRect = activeLink.getBoundingClientRect();
    const padding = 14;
    if (aRect.top < cRect.top + padding ||
        aRect.bottom > cRect.bottom - padding) {
      activeLink.scrollIntoView({
        block: "center",
        inline: "nearest",
        behavior: "smooth"
      });
    }
  }

  function setActive(id){
    if (id === currentId) return;
    currentId = id;
    clearActive();
    const hit = items.find(x => x.id === id);
    if (!hit) return;
    hit.a.classList.add("is-active");
    keepActiveVisible(hit.a);
  }

  function update(){
    let candidate = items[0];
    for (const it of items) {
      const top = it.el.getBoundingClientRect().top;
      if (top <= OFFSET) candidate = it;
      else break;
    }
    setActive(candidate.id);
  }

  let ticking = false;
  function onScroll(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      update();
      ticking = false;
    });
  }

  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", onScroll, { passive: true });
  window.addEventListener("load", onScroll);
  update();
});
</script>

固定ヘッダーがある場合の調整

固定ヘッダーがある環境では、本文の表示タイミングとハイライトのタイミングがずれることがあります。その場合は以下の数値を調整してください。一般的な固定ヘッダーなら240前後が目安です。

const OFFSET = 160;

ここまでで実装は完了です。ページを読み込んでスクロールし、目次のハイライトが動いていれば成功です。

なぜこの実装が重要なのか？

長文記事で離脱が増える大きな原因は「現在地が見えないこと」です。5,000〜1万文字の記事は情報量で価値を出せますが、読者にとっては読むこと自体が負荷です。「今どこにいるかわからない」「終わりが見えない」というストレスが重なると、離脱率は確実に上がります。

現在地が可視化されると、次の変化が期待できます。

• 読者が安心して読み進められる
• 「あとこれだけ」が見えることで読了率が上がる
• 離脱が減り、UX向上がSEOにも好影響をもたらす

長文コンテンツを書くブログほど、この改善の効果は大きくなります。

よくある質問

子テーマがない場合はどうすればいいですか？

子テーマなしにCocoon本体のfooter.phpを直接編集すると、テーマアップデート時に変更内容が上書きされます。必ずCocoon Child（子テーマ）を有効化してから作業してください。子テーマはCocoon公式サイトで配布されています。

ハイライトが動作しない場合の確認ポイントは？

最も多い原因はCocoon大元設定とウィジェットの目次表示深さのミスマッチです。たとえば大元でh3まで表示している場合は、ウィジェット側も同じ設定にしてください。また、JSがfooter.phpの正しい位置（</div><!-- #container -->の直前）に追記されているかも確認してください。

固定ヘッダーがある場合の調整方法は？

JSコード内のconst OFFSET = 160;の数値を変更してください。固定ヘッダーの高さに合わせて200〜240程度に増やすと、ハイライトのタイミングが本文表示と合いやすくなります。

Cocoon以外のテーマでも使えますか？

JSとCSSはCocoon専用のクラス名（widget_tocなど）を参照しているため、他テーマでは目次ウィジェットのHTML構造に合わせてセレクタを書き換える必要があります。汎用性はありますが、そのままのコピペでは動作しない場合があります。

まとめ

今回やったことは4つです。ウィジェットの設置、CSS追加、footer.phpの子テーマへのコピー、JSの追記。コードはすべてコピペで完結します。

長文記事を書くブログほど、この改善の効果は大きくなります。読者の「今どこ？」を解消することが、離脱対策の第一歩です。

なお、この記事はエックスサーバー上での手順を前提にしています。定期的にキャンペーンを実施しているため、最新の料金は公式サイトで確認してください。エックスサーバーの公式サイトを確認する

最初に触るべき設定は、ヘッダー画像・サイドバー・グローバルメニュー・ピックアップコンテンツの4つです。影響範囲が分かりやすく、後からやり直しが効くものだけに絞っています。これからブログを始める方は、エックスサーバーの始め方を解説した記事も合わせて読むとスムーズです。

Cocoonの設定は最初に絞ったほうが楽になる

Cocoonはデザイン設定の項目が多いため、最初から全部触ろうとすると整理がつかなくなります。今回は、サイト全体の印象や導線に関わる設定だけを先に調整しました。細かな装飾や追加の設定は、運用しながら必要に応じて見直す前提にしています。

1. ヘッダー画像

最初に設定したのはヘッダー画像です。ここを変えるだけでサイト全体の印象が大きく変わるため、最優先にしました。Cocoonは初期状態でも整ったテーマですが、ヘッダーが未設定のままだとどうしても「仮の状態」に見えてしまいます。影響範囲が分かりやすく、画像を差し替えるだけで印象を変えられるため、やり直しのコストも低い設定です。

WordPress管理画面から「Cocoon設定」→「ヘッダー」へ進み、「ヘッダー背景画像」で画像を1枚指定します。細かな表示調整やサイズ指定は後からでも問題ありません。

凝ったデザインは作らず、サイト全体の雰囲気が伝わるシンプルな画像を選びました。ヘッダーを決めたことで全体のトーンが定まり、その後の設定判断もしやすくなりました。

2. サイドバー

サイドバーは、記事を読み終えたあと「次に何を見ればよいか」が分かる構成を最優先にしました。項目を詰め込みすぎると読みにくくなり、逆に何もないと導線が弱くなります。「最低限の役割に絞る」という基準で整理しました。

プロフィール・カテゴリー・よく読まれている記事など、サイト構造が伝わる要素を中心に配置しています。メルマガ登録やバナーはこの段階では入れていません。訴求の軸が固まる前に設置しても、後から外す可能性が高いためです。設定は「外観」→「ウィジェット」からサイドバーにブロックを追加するだけです。細かい順序や表示条件は運用しながら調整すれば十分です。

3. グローバルメニュー

グローバルメニューは、記事を読む前から「このサイトには何があるか」を伝える場所です。カテゴリーページや固定ページのうち、サイトの方向性が伝わるものだけをメニューに入れています。将来的に増える可能性のあるページや、運用方針がまだ固まっていないページは含めていません。

「外観」→「メニュー」から設定します。カテゴリーや固定ページを選び、表示位置にグローバルメニューを指定するだけです。後から並び替えや差し替えも手間ではないため、完成形を作ろうとせず最低限の構成にとどめています。

4. ピックアップコンテンツ

ピックアップコンテンツは、完成形を作ることより「置き場所を確保して表示感覚をつかむ」ことを目的に設定しました。どの記事を推すか決まっていない状態で設置しても、目立つだけの枠になってしまいます。仮の記事でも構わないので一度使ってみて、表示位置やサイズ感を把握することを優先しました。

Cocoonでは、ピックアップコンテンツはメニューとして管理します。「外観」→「メニュー」で専用のメニューを作成し、Cocoon設定の「おすすめカード」から指定します。

どの記事を載せるかは、運用しながら差し替えていく前提にしています。後から入れ替えられる状態を作っておくほうが、結果的に判断が楽になります。

この4つで十分だった理由

今回の設定で意識したのは、すべてを整えることではなく「運用を始めるための土台を作ること」でした。ヘッダー画像でサイトの印象を決め、サイドバーで構造を整理し、グローバルメニューで導線を作り、ピックアップコンテンツで見せたい記事を置く。この4つが揃えば、見た目と動線の両方が最低限整った状態になります。

細かな装飾や追加設定は、記事が増えて運用の方向性が見えてからでも遅くありません。実際に使いながら調整するほうが、無駄な手戻りも減らせます。まずこの4つだけ整えて、記事を書くことに集中する。それがちょうどよい区切りでした。

Cocoonはエックスサーバーが開発をサポートする無料テーマです。エックスサーバーのWordPressクイックスタートなら、申し込み時にCocoonをそのまま選択でき、インストール済みの状態からすぐ設定に入れます。

まとめ

Cocoonは設定項目が多いテーマですが、最初からすべてを触る必要はありません。影響範囲が分かりやすく、後から調整しやすい4つの設定に絞ったことで、迷いなく運用をスタートできました。

ヘッダー・サイドバー・メニュー・ピックアップの4つを整えたら、あとは記事を書きながら調整する。完成形を目指すより、動かし始めることを優先するのが正解です。次にやっておきたい設定として、GA4の初期設定手順をまとめた記事も合わせて確認しておくと、運用の判断がスムーズになります。

Cocoonはエックスサーバーが開発をサポートする無料テーマです。WordPressクイックスタートで申し込めば、Cocoonを選んだ状態からすぐにブログを始められます。定期的にキャンペーンを実施しています。最新の料金は公式サイトで確認してください。

エックスサーバーの公式サイトを見る

この記事でわかることは次の3点です。GA4で確認できること・WordPressへの導入手順・設定後にまずやることの流れをまとめています。Cocoonを使っている場合は、測定IDを管理画面に貼り付けるだけで完了します。

GA4で把握できること

GA4を入れると、サイトの状況を「誰が・どこから・どう動いたか」という3軸で確認できるようになります。深く分析しなくても、最低限の数値把握として機能します。

アクセス数と滞在時間

いつ・どれくらいのユーザーが訪れているかを数値で確認できます。訪問数・滞在時間・直帰率といった基本指標を通じて、サイト全体の状態を大まかに把握する目安になります。細かく分析しなくても「今どんな状態か」を知るためには十分な情報量です。

流入経路の把握

ユーザーがどの経路からサイトに訪れているかを確認できます。検索から来ているのか・SNS経由なのかといった違いを知るだけでも、記事の内容や更新の方向性を考える参考になります。どのチャネルが機能しているかが見えてくると、施策の優先順位も立てやすくなります。

改善ポイントの発見

「このページはあまり見られていない」「ここで離脱が多い」といった傾向が、運営を続けるうちに少しずつ見えてきます。すぐに正解が出るわけではありませんが、改善の方向性を考えるヒントを与えてくれるのがGA4の役割です。

GA4をWordPressに導入する手順

導入の流れはシンプルです。GoogleアカウントとGA4の登録・測定IDの取得・WordPressへの貼り付けの3ステップで完了します。ここではWordPressテーマ「Cocoon」を例に解説します。テーマが異なっても基本的な流れは同じです。

手順1：Googleアカウントの準備

まずGoogleアカウントにログインします。まだお持ちでない場合は新規作成が必要です。仕事用とプライベート用を分けたい場合は、この段階で用途別のアカウントを用意しておくと管理しやすくなります。

手順2：GA4への登録・プロパティ作成

Googleアナリティクスのサイトにアクセスし、新しいプロパティを作成します。最初に入力するアカウント名は半角英数で入力してください。全角文字だと次のステップに進めない仕様になっています。

手順3：測定IDの取得

プロパティを作成すると、「G-」から始まる測定ID（トラッキングID）が発行されます。このIDをコピーして、次のWordPress設定で使います。

手順4：WordPressへの設定（Cocoonの場合）

WordPressの管理画面にログインし、「Cocoon設定」→「アクセス解析・認証」を開きます。「GA4測定ID」の入力欄に、手順3でコピーした測定IDを貼り付けて保存してください。

手順5：データ収集の確認

設定後、しばらくするとGA4にデータが反映され始めます。リアルタイムレポートを開いて、自分のアクセスが計測されているか確認しましょう。数字が動いていれば、初期設定は完了です。

Cocoonを使っている場合、測定IDを管理画面に貼るだけで設定は完了します。プラグインは不要で、5分もあれば計測できる状態が作れます。

設定後にまずやること

GA4を設定した直後は、深く使いこなす必要はありません。まずは日々のアクセス数を眺めるだけでも、サイトの動きへの解像度は上がります。

レポートの確認から始める

慣れてきたら、GA4の「レポート」→「ライブラリ」からテンプレートを使ってみるのがおすすめです。最初はテンプレートをそのまま使うだけで、アクセス数・滞在時間・流入チャネルの全体像を把握できます。無理に複雑な設定をする必要はなく、定期的に数字を見る習慣をつけることのほうが最初は重要です。

Search Consoleとあわせて使う

GA4の初期設定が完了したら、Search Consoleの登録状況もあわせて確認しておくと安心です。Search Consoleでは、検索結果での表示状況やインデックスの状態を確認できます。

GA4が「サイト内の行動」を見るツールなら、Search Consoleは「検索での見え方」を見るツールです。両方を入れておくことで、サイト状況をより正確に把握できます。設定直後は数字を眺めるだけでOKです。まず計測できる状態を作り、運営しながら少しずつデータに慣れていく進め方が現実的です。

よくある質問

GA4とUA（ユニバーサルアナリティクス）は何が違いますか？

UAは2023年7月にデータ収集を終了しており、現在は後継のGA4が標準です。GA4はイベントベースの計測に変わっており、画面構成や指標の定義がUAと異なります。新規に設定する場合はGA4のみで問題ありません。

Cocoon以外のテーマでも同じ手順で設定できますか？

基本的な流れ（GA4で測定IDを取得してWordPressに設定する）は同じです。ただし設定箇所はテーマによって異なります。Cocoon以外のテーマでは、テーマ設定の「ヘッダー」や「アクセス解析」などの項目を確認するか、「Site Kit by Google」などのプラグインを使う方法もあります。

設定後すぐにデータが表示されないのですが、正常ですか？

正常です。設定直後はリアルタイムレポートには反映されますが、通常レポートへの反映には数時間〜24時間程度かかることがあります。翌日以降に確認してもデータがない場合は、測定IDの貼り付け箇所を再確認してください。

自分のアクセスも計測されてしまいますか？

デフォルトでは自分のアクセスも計測されます。正確なデータを取りたい場合は、IPアドレスによるフィルタ設定やGA4の「内部トラフィック」除外設定を行うと、管理者自身のアクセスを除外できます。Chromeの拡張機能「Google Analytics オプトアウト アドオン」を使う方法もあります。

まとめ

GA4はサイトの状況を数字で把握するための基盤です。設定しなくてもサイトは動きますが、入れておかないと「何が起きているか」が見えないまま運営を続けることになります。

Cocoonなら測定IDを貼るだけで完了します。まず計測できる状態を作り、あとは数字を眺めながら少しずつ慣れていくのが現実的な進め方です。

WordPressブログの土台として、安定したレンタルサーバーも重要な要素です。エックスサーバーはWordPress向けの高速環境と充実したサポートが特徴で、定期的にキャンペーンを実施しています。最新の料金は公式サイトで確認してください。

エックスサーバーの公式サイトを見る