Blog

【簡単】XサーバーでCocoonを導入する3ステップ

【簡単】XサーバーでCocoonを導入する3ステップ アイキャッチ画像 Blog

WordPressテーマの「Cocoon」をXサーバーで使ってみたいけど、導入する手順を教えてほしいです。

このような悩みを解決するために記事を書いていきます。

Xサーバーを使うなら、Cocoonの導入はめちゃくちゃ簡単です。

この記事では、完全初心者の方でも迷わず導入できるように、Xサーバーを使ってCocoonをインストールする手順を、3ステップに分けて分かりやすく解説します。

読み終わる頃には、「あ、これならできそう」ってなってると思います。(^^)

XサーバーとCocoonは相性抜群 その理由とは?

Xサーバーの特徴と初心者向けメリット

Xサーバーって、私がブログを始めたときに一番最初に選んで、今でもメインで使っているレンタルサーバーなんです。

理由はシンプル。速くて安定していて、管理画面もめちゃくちゃ使いやすいから。

WordPressのインストールも、クリック数回で完了。ほんとに初心者にやさしい設計になってるんですよ。

Cocoonの魅力と主な機能(SEO、収益化など)

Cocoonは「無料とは思えないほど高機能なテーマ」で有名です。

  • SEO対策がガッツリ組み込まれてる
  • アドセンスやASP広告がサクッと設定できる
  • 表示スピードが速くて読者にもGoogleにも好印象

昔だったらスティンガーとかを推してましたが、今は無料ならCocoonと断言できるくらい、デザイン的にも◎。

私が運営しているサイトでCocoonに変えてアクセスや収益が伸びたものもあります。

両者の連携で導入がめちゃくちゃラクになる

XサーバーはCocoonに完全対応してるから、管理画面からワンクリックでインストールできてしまいます。しかも親テーマと子テーマをまとめて入れられる神仕様。

この手軽さ、他のサーバーだと意外とないです。

ステップ1|Cocoonテーマファイルを公式サイトからダウンロード

これからXサーバーを使ってブログを立ち上げる予定なら、ステップ1を飛ばして、ステップ2に進んで問題なしです。

親テーマ・子テーマを両方ダウンロードしよう

まずはCocoon公式サイト(https://wp-cocoon.com/)にアクセスしてください。

  • cocoon-master.zip(親テーマ)
  • cocoon-child-master.zip(子テーマ)

Cocoon公式サイトで、この2つをダウンロードします。親テーマと子テーマセットじゃないと意味がないので、両方忘れずに。

ZIPのままでOK 解凍は不要(Safariユーザーは注意)

ZIPファイルは「そのまま使う」が正解です。MacのSafari使ってると自動で解凍されちゃうので注意。

Google Chromeを使うか、手動で再圧縮するのがおすすめです。

ステップ2|XサーバーのサーバーパネルからCocoonをインストール

「WordPress簡単インストール」を使う方法

これからXサーバーでブログを立ち上げる人は、迷わずこの方法がおすすめ。

  • Xサーバーのサーバーパネルにログイン
  • 「WordPress簡単インストール」を選ぶ
  • ブログ情報を入力して、テーマに「Cocoon」を選択
  • 「子テーマをインストールする」に必ずチェック

ほんとにこれだけです。超簡単。

既存サイトなら「テーマ管理」から追加できる

すでにWordPressを使ってる人は、「WordPressテーマ管理」からCocoonを追加すればOK。

もちろんこちらも「子テーマ」にチェックを入れておいてくださいね。

子テーマを忘れずにチェック 重要ポイント解説

子テーマって最初は「何それ?」って感じなんですけど、カスタマイズが消えないようにするためにめちゃくちゃ大事なんです。

親テーマだけで運用してると、アップデートで自分の設定が全部飛ぶ可能性あるので注意。

ステップ3|Cocoon子テーマを有効化して初期設定をしよう

「Cocoon設定」からデザインや広告表示を調整

Cocoonを有効化すると、「Cocoon設定」っていうメニューがWordPressのダッシュボードに追加されます。

この中で色々カスタマイズできるんですけど、最初は次の3つをいじるだけでもOK。

インストール直後にやっておくべき3つの設定

  1. スキン設定
    「Cocoon設定」→「スキン」から好きなデザインを選ぶと、サイト全体の雰囲気が変えられます。初期の状態だとシンプルなので、少しでも個性を出したい人はここを触ると見栄えが一気に良くなります。
  2. 広告設定
    「Cocoon設定」→「広告」で、アドセンスやASPのコードを貼るだけで広告を表示できます。記事上下や目次前などに自動で配置できるので、広告の貼り方が分からなくても問題ありません。
  3. アクセス解析
    「Cocoon設定」→「アクセス解析・認証」から、Googleアナリティクスやサーチコンソールの設定が可能です。設定しておくことで、どの記事が読まれているかが分かるようになります。

この3つを設定するだけでも、グッと「自分のブログ感」が出てきますよ。

おすすめプラグイン一覧

以下のプラグインも必要に応じて導入しておきましょう。

  • Google Site Kit
    ∟Google公式の解析ツール。アナリティクスやサーチコンソールを一括で管理できます。
  • WP Multibyte Patch
    ∟日本語ブログに必須。文字化けや表示不具合を防ぎます。
  • EWWW Image Optimizer
    ∟画像を自動で圧縮して、サイト表示を高速化。
  • Advanced Ads
    ∟広告を柔軟に管理したい方向け。表示場所や条件を細かく設定できます。
  • Classic Editor

    ∟ブロックエディターが使いにくい方に。旧エディターに戻せます。
  • Classic Widgets
    ∟従来のウィジェット管理画面を使いたい方向け。
  • All in One SEO
    ∟Cocoonだけでは物足りないSEO設定を補完できます。

これらのプラグインを組み合わせて使えば、Cocoonの使い勝手がさらにアップします。

特にClassic系は、ブロックエディターにまだ慣れていない方にとって大きな助けになります。

よくあるエラーと対処法

  • 403エラー:Cocoon設定の保存時などに出たら、XサーバーのWAFを一時OFFに
  • アップロード失敗:ZIPファイルが解凍されてないか確認して。うまくいかないときはFTPで対応
  • レイアウト崩れ:XPageSpeedが原因のことも。無効化してチェックしてみてください

【まとめ】XサーバーでCocoonを導入する3ステップと注意点

ずっと他の同じテーマ(AFFINGER)を使っていたので、このブログを立ち上げた際に初めてCocoonを導入したときは、「なんか難しそう…」って思ってたんですけど、実際にやってみたらほんとに拍子抜けするほど簡単でした。

ポイントはこの3つだけ

  • Cocoonの親テーマ&子テーマをダウンロード(ZIPのまま)
  • Xサーバーでインストール(子テーマを忘れずに)
  • 子テーマを有効化して、「Cocoon設定」で調整開始

これだけで、あなたもすぐにブログデビューできます。

「Cocoon、いいかも」と思ったら、まずはこの3ステップで試してみてくださいね