Cocoonのインストール方法と使い方【初期設定から詳しく解説】

Cocoonなら無料でブログを作れるみたいだけど、何から始めたらいいのかな？

今回はこのような疑問にお答えします。

Cocoonは日本で最も人気のある無料テーマです。

機能性が高く、またサポートも充実しているためブログ初心者にはおすすめです。

ただWordPressを初めての利用する方は、何から始めたらいいかわからないですよね。

そこで今回はCocoonのインストールから初期設定まで解説します。

この記事を真似するだけで、すぐにブログをスタートできます。

画像たっぷり使い解説するので、気になる方はのぞいてみてください。

Cocoonとは【WordPressテーマ】

Cocoonは日本で最も使用されている無料テーマです。

有料テーマを含めても、SWELLに次いで2位のシェアを誇ります。

「わいひらさん」という日本人プログラマーが開発しており、日本語に完全対応していることが特徴です。

Cocoonは機能が豊富

Cocoonは無料テーマと思えないほど、機能が豊富です。

Cocoon設定を見ると、タブの多さに驚くと思います。

Cocoonは初心者だけではなく、ブログ上級者まで使える優秀なWordPressテーマです。

Cocoonマニュアルはかなり充実

Cocoonは無料テーマにも関わらず、サポート機能も充実しています。

Cocoonマニュアルでは、Cocoonの使い方について細かく解説されています。

またCocoonフォーラム(コミュニティ)では、Cocoonについて「わいひらさん」に質問することも可能です。

Cocoonはこんな人におすすめ

Cocoonは①無料、②日本語対応、③機能性が高さが特徴です。

３つの特徴を踏まえ、Cocoonは以下の方におすすめです。

これらに当てはまる方はCocoonをインストールしましょう。

「デザインも重視したい！」という方には、SWELLがおすすめです。

有料テーマではありますが、初心者でもおしゃれなブログを作ることができます。

SWELLについてはSWELLの購入方法とインストール方法で解説しています。

Cocoonのインストール方法

Cocoonのインストール前に、必ずWordPressのバージョンが5.7以上であることを確認してください。

WordPressダッシュボードの【更新】をクリックすると、現在のバージョンを確認できます。

Cocoonを公式サイトからダウンロードする

Cocoonの公式サイトにアクセスします。

まずは親テーマをダウンロードします。

【Cocoonテーマをダウンロード】をクリックしましょう。

次に子テーマをダウンロードします。

【Cocoon子テーマをダウンロード】をクリックしてください。

Cocoon-master(親テーマ)とCocoon-child-master(子テーマ)のZIPファイルをダウンロードできたら成功です。

CocoonのZIPファイルは解凍せずに使用します。

Cocoonの親テーマを先にインストールする

Cocoonは親テーマをインストールしないと、子テーマをインストールできません。

まずは親テーマをインストールします。

ダッシュボードから【外観】⇒【テーマ】をクリックします。

【新規追加】をクリックします。

【テーマのアップロード】をクリックします。

【ファイルを選択】をクリックして、Cocoonの親テーマを選択してください。

【今すぐインストール】をクリックすれば、Cocoonの親テーマのインストールは完了です。

Cocoonの親テーマを有効化せずに、そのまま【テーマページへ移動】をクリックしましょう。

Cocoonの子テーマをインストールして有効化する

テーマページへ移動したら同様の手順で、Cocoonの子テーマをインストールしてください。

Cocoonの子テーマのインストールが完了したら、有効化します。

ダッシュボードから【外観】⇒【テーマ】をクリックしてください。

Cocoonの子テーマを有効化したら、設定は完了です。

上図のように子テーマが有効化していればOKです。

親テーマは有効化しません。

Cocoonの子テーマのみ有効化する理由

WordPressテーマは、親テーマと子テーマの片方しか有効化できないように設計されています。

Cocoonの子テーマを有効化させる理由は、テーマのバージョンアップ時に設定をリセットさせないためです。

親テーマは、バージョンアップすると設定がリセットされます。

子テーマを有効化しておけば、設定情報は全て子テーマに残ります。

そのため親テーマがバージョンアップしても、設定がリセットすることはありません。

以上の理由からCocoonは子テーマのみ有効化してください。

試しに親テーマを有効化してみてください。子テーマは無効化されます。

Cocoonがインストールされると、ブログデザインが一新されます。

これからCocoonインストール後の初期設定について解説します。

Cocoonの初期設定と使い方

この項目では、Cocoonの初期設定と使い方について解説します。

Cocoonの初期設定が完了すれば、すぐにブログをスタートできます。

①Cocoonの高速化設定

まずはCocoonで標準装備されている高速化機能を設定します。

ダッシュボードから【Cocoon設定】⇒【高速化】をクリックしてください。

プラウザキャッシュを有効化すると「ブラウザの保存データ」を先出しできるため、ページ表示速度が高速化します。

HTML、CSS、JavaScriptはブログデザインの構成要素です。

余分な空白や改行を削除することで、ブログ全体を軽量化します。

その結果、ページ表示速度が高速化します。

「遅延読み込み、非同期読み込み」とは、読者が見ているコンテンツのみを表示させて、見ていないコンテンツを後から表示させる技術です。

読者がブログを開いた時、読者が見ているコンテンツのみを先出しするためページ表示速度が高速化します。

【事前読み込み設定】はデフォルトでOKです。

Cocoonの高速化設定が完了したら【変更を保存】をクリックしてください。

②Cocoonのスキン設定

Cocoonのスキンとは、ブログのベースとなるデザインのことです。

スキンを利用することで、簡単におしゃれなブログデザインを作ることができます。

この項目ではおすすめのスキンと設定方法を解説します。

ダッシュボードから【Cocoon設定】⇒【スキン】をクリックしてください。

おすすめは「ぽんひろさんのスキン」です。

ぽんひろさんのサイトでは、Cocoonのカスタマイズ情報が豊富に公開されています。

「ぽんひろさんのスキン」を活用すれば、ぽんひろさんのサイト情報をもとにカスタマイズ可能です。

今回はぽんひろさんの「Season(Autumn)」を使った初期設定を解説します。

スキンを選択したら【変更をまとめて保存】をクリックしてください。

なお、Cocoonの「ぽんひろさんのスキン」のデモサイトは以下のページからご覧ください。

Cocoonスキン「Season」 デモ

Cocoonスキン「Season」 デモ WordPressテーマCocoonのスキン「Season」のデモページです。サイドバーから春夏秋冬4つのスキンに切り替えができます。

トップ画面が一気にブログらしくなったね！

③Cocoonの全体設定

Cocoonの全体設定では「文字の大きさ」などブログ全体のデザインに関する設定を行います。

Cocoon設定の【全体】をクリックしてください。

Cocoonでは、Font Awesomeのアイコンを活用しデザインをカスタマイズできます。

Font Awesome5の方がデザインが豊富なので、こちらを選択しましょう。

設定が完了したら【変更をまとめて保存】をクリックしてください。

④CocoonのSEO設定

CocoonのSEO設定では、noindexするページを設定します。

noindexとは、検索結果に表示させないという意味です。

Cocoon設定の【SEO】をクリックしてください。

同じカテゴリーページが複数あると、2ページ目以降がGoogleに重複コンテンツと判断されるリスクがあります。

そのため2ページ目以降はnoindex指定しましょう。

設定が完了したら【変更をまとめて保存】をクリックしてください。

⑤CocoonのOPG設定

OPGとは「SNSにブログタイトルやアイキャッチ画像を伝えるコード」のことです。

CocoonでOPGを設定すると、ブログと「Facebook」「Twitter」を連携することができます。

Twitterカードとは、ブログ記事がTwitterでシェアされた時に表示される「記事の要約文とアイキャッチ画像」のことです。

有効化しないとブログ記事がTwitterでシェアされても、カードが表示されません。

必ずチェックを入れましょう。

デフォルトではCocoonのイメージ画像が表示されているので、オリジナル画像に変更しましょう。

画像は、ブログイメージを象徴する画像を選択しましょう。

まだ画像を用意できていない場合は、デフォルトのままでOKです。

オリジナル画像を作りたい方は、以下の記事を参考にしてください。

設定が完了したら【変更をまとめて保存】をクリックしてください。

⑥Cocoonのアクセス解析・認証設定

この項目では「Googleアナリティクス」「Googleサーチコンソール」とCocoonを連携させます。

Google Analytics設定は、GA4の測定IDをコピペするだけでOKです。

GA4(Googleアナリティクス4)とCocoonを連携させれば、自動的にUA(ユニバーサルアナリティクス)とも連携されます。

GA4の測定IDの取得方法は、以下の記事で解説しています。

Google Search Console設定では、サーチコンソールで入手したHTMLタグの一部をCocoonに貼り付けます。

<meta name="google-site-verification" content="〇〇〇〇〇〇〇〇〇" />

〇〇〇〇〇〇〇〇〇の部分だけを貼り付ければOKです。

サーチコンソールからHTMLタグを入手する方法は、以下の記事で解説しています。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑦Cocoonの投稿設定

この項目では「関連記事の表示方法」や「パンくずリスト」について設定します。

ページ送りナビ設定

ページ送りナビとは「前回投稿した記事」と「次回投稿した記事」を表示させる機能です。

コメント欄が「ページ送りナビ」より下にあると、読者がコメント欄に気づきません。

そのためページ送りナビの表示位置を、コメント欄の下に設定しました。

コメント設定

コメント欄を設置する人は、必ずスパムコメント対策のプラグインを導入してください。

スパムコメント対策のプラグインでは「Throws SPAM Away」がおすすめです。

導入方法は、以下の記事で解説しています。

パンくずリスト設定

パンくずリストは投稿記事が、どのカテゴリーに属するかを読者に伝えるものです。

読者が気づきやすいように、メインカラムトップに配置しました。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑧Cocoonの本文設定

この項目では、本文の行の高さや余白の設定が可能です。

ただし好みが分かれるので、その他の大事な設定だけ解説します。

投稿情報表示設定

投稿関連情報とは、記事の上部に表示される投稿日や更新日のことです。

投稿者名は不要なのでチェックを外しましょう。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑨Cocoonの目次設定

この項目では、目次の表示位置方法に関する設定を行います。

固定ページに目次は不要なので、チェックを外しましょう。

固定ページについては「グローバルメニュー設定」「フッター設定」で解説します。

目次は階層が深いと、読みにくくなります。

目次の深さは「H3見出しまで」に設定しましょう。

設定が完了したら【変更をまとめて保存】をクリックしてください。

Cocoonの目次のカスタマイズ

目次をおしゃれにカスタマイズする方法を解説します。

WordPressダッシュボードから【外観】⇒【カスタマイズ】をクリックします。

現在のテーマが「Cocoon Child」になっていることを確認します。

【追加CSS】をクリックしましょう。

追加CSSに以下のコードをコピペしてください。

/************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.toc{
border-top:5px solid; color:#B4866B;
padding: 20px;
}

/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content : "\f03a"; /* アイコンを変える場合はここを変更 */
    font-size:8px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#B4866B; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}

/* 目次の文字 */
.toc-title {
text-align:left;
font-size: 18px;
font-weight: 600;
color: #B4866B;
}

/*見出し2（H2）の設定*/
.toc-content .toc-list li {
font-weight:600;
color: #B4866B;
}

/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
font-weight:normal;
color: #B4866B;
}

コピペしたら【公開】をクリックしてください。

これで目次をおしゃれにカスタマイズできました。

カスタマイズが反映されない場合は、目次ナンバー表示を数字に変更してみてください。

⑩CocoonのSNSシェア設定

この項目では、記事タイトル下に表示されるSNSシェアボタンを削除します。

記事下にSNSシェアボタンがあるので、記事タイトル下には不要です。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑪Cocoonのコメント設定

この項目では、コメント欄の表示形式を設定します。

読者がコメント欄と認識できるように、表示しましょう。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑫Cocoonのエディター設定

この項目では投稿画面の表示形式を選択します。

おすすめはGutenbergエディターです。

Gutenbergエディターの方が、記事装飾にかかる時間が短いためです。

設定が完了したら【変更をまとめて保存】をクリックしましょう。

⑬Cocoonの吹き出し設定

この項目では、投稿に使用する吹き出しを作ります。

WordPressダッシュボードから【Cocoon設定】⇒【吹き出し】をクリックします。

デフォルトで設定されている吹き出しは、使わないので全て削除します。

次に【新規追加】をクリックします。

吹き出し設定は以下のように設定します。

設定が完了したら【保存】をクリックしてください。

投稿画面での吹き出しの使い方(Gutenbergエディター)

ブロックを表示させて「吹き出し」と入力します。

表示された吹き出しボタンをクリックしましょう。

【人物】の項目から作成した吹き出しを選択します。

投稿画面に吹き出しアイコンが表示されます。

⑭Cocoonの管理者画面設定

Cocoonの管理者画面設定では、pv数などの機密情報を非公開に設定します。

Cocoon設定の【管理者画面】をクリックしてください。

チェックを外す項目は4箇所です。

設定が完了したら【変更をまとめて保存】をクリックしてください。

⑮Cocoonのグローバルメニューの設定

この項目では、ブログのトップページにグローバルナビゲーションを設置する方法を解説します。

ダッシュボードの【外観】⇒【メニュー】をクリックしてください。

今回は仮で固定ページに初期設定されている「Sample Page」をグローバルナビゲーションに設置します。

以下のように設定しましょう。

「ヘッダーモバイルメニュー」にチェックを入れると、スマホでもグローバルナビゲーションが表示されます。

設定が完了したら【メニューを保存】をクリックしましょう。

あくまで仮で「Sample Page」をグローバルナビゲーションに設置しています。

作業が落ち着いたらグローバルナビゲーションには「プロフィールページ」や「お問い合わせフォーム」を設置しましょう。

「プロフィールページ」と「お問い合わせフォーム」の作成方法は、以下の記事で解説しています。

⑯WordPressの一般設定

WordPressの一般設定では、ブログ名とキャッチフレーズを設定します。

またレンタルサーバーで常時SSL化まで完了している場合は、URLも変更します。

「http」を「https」に変更します。

ダッシュボードから【設定】⇒【一般】をクリックしてください。

また常時SSL化していても、URLを変更するとWordPressの管理画面から自動でログアウトします。

ログインできるように「ユーザー名」と「パスワード」を用意しておきましょう。

ブログ名がまだ決まっていない方は、以下の記事を参考にしてみてください。

設定が完了したら【変更を保存】をクリックしましょう。

ブログのトップページに、ブログ名が表示されたら設定は成功です。

⑰Cocoonのヘッダー設定

この項目では、ヘッダー部分のカスタマイズ方法を解説します。

Canvaでヘッダー画像を作成する

まず、Canvaへ移動してヘッダー画像を作成します。

ヘッダー画像が作成できたら、WordPressのメディアにアップロードしてください。

Cocoonのヘッダーに画像を設定する

Cocoon設定の【ヘッダー】をクリックしてください。

Cocoonのヘッダーは、以下のように設定しましょう。

設定が完了したら、保存ボタンをクリックしてください。

⑱Cocoonのサイドバー設定

この項目では、サイドバーに「プロフィール」「カテゴリー」「検索窓」を設定する方法を解説します。

WordPressダッシュボードの【外観】⇒【ウィジェット】をクリックします。

まずは【サイドバー】と【サイドバースクロール追従】のブロックを削除します。

続いてサイドバーに「プロフィール」「カテゴリー」「検索窓」を追加します。

サイドバー設定に「プロフィール」「カテゴリー」「検索」が表示されたらOKです。

サイドバー上部に、プロフィールを設定します。

プロフィール設定の方法はおしゃれなブログのプロフィールの作り方で解説しています。

⑲Cocoonのフッター設定

この項目では、フッターに「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」を設置する方法を解説します。

HTMLサイトマップを作成する

HTMLサイトマップとは、読者に「読みたい記事」を探してもらうためのツールです。

HTMLサイトマップには「記事のタイトル」と「内部リンク」がカテゴリーごとに表示されます。

そのため読者は、読みたい記事をすぐに探すことができます。

Cocoonでは固定ページに「ショートコード」を呼び出すだけで、HTMLサイトマップを作れます。

ダッシュボードから【固定ページ】⇒【新規追加】をクリックしてください。

固定ページの投稿画面が表示されたら、以下のように設定しましょう。

サイトマップ設定が完了したら【公開】をクリックしましょう。

プライバシーポリシーを作成する

プライバシーポリシーとは、取得した個人情報の運営方法を公表したものです。

ブログをWeb上で公開する限り、プライバシーポリシーの設置は義務になります。

Googleアドセンス合格にはプライバシーポリシーの設置が必須です。

以下の記事では、プライバシーポリシーをコピペで作る方法を解説しています。

フッターに固定ページを設置する

WordPressダッシュボードの【外観】⇒【メニュー】をクリックします。

メニュー設定では、以下のように設定してください。

【メニューを保存】をクリックすれば完了です。

フッターをカスタマイズする

WordPressダッシュボードの【Cocoon設定】をクリックします。

【Cocoon設定】から【フッター】をクリックしましょう。

フッター設定では、以下のように設定してください。

最後に【変更をまとめて保存】をクリックすれば完了です。

フッターに「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」が設置されていることを確認しましょう。

お疲れ様でした。これでCocoonの初期設定は完了です。

おしゃれなデザインになったね！

Cocoonのインストールと初期設定＆使い方のまとめ

今回はCocoonのインストール方法と初期設定について解説しました。

WordPressの初期設定には、まだ以下の項目が残っています。

ブログ記事を書きながら、重要度の高いものからチャレンジしてみてください。

今回の内容は以上になります！