WordPressテーマSWELL導入方法を見てみる

Cocoonのインストール方法と使い方完全ガイド【初心者向け】

Cocoonのインストール方法と使い方完全ガイド【初心者向け】
フェニック

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

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

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

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

この記事で分かること
  • Cocoonのインストール方法
  • Cocoonの初期設定
  • おしゃれなカスタマイズ方法(CSSコードなし)
  • 記事の装飾方法

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

画像100枚以上使い解説するので、ぜひ参考にしてください。

この記事の著者

Shota @Shota_Lab_1

3年目の副業ブロガー。2年間のブログ経験を活かし、2022年にブログフェニックスを設立。
WordPress立ち上げのノウハウを配信中。

さくっと知りたい方は、ページ内リンクをクリックしてください。

目次

Cocoonとは【WordPressテーマ】

日本のWordPressテーマシェア率とランキングTop20
出典:マニュオン-日本のWordPressテーマシェア率とランキングTop20

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

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

WordPressテーマシェア
SWELL6.8%
Cocoon5.1%
SANGO2.2%
JIN2.0%
THE THOR1.7%
その他76.4%
引用:マニュオン-日本のWordPressテーマシェア率とランキングTop20

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

Cocoonは機能が豊富

Cocoon設定の画面

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

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

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

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

Cocoonマニュアルの画像①

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

Cocoonマニュアルの画像②
Cocoon-テーマ利用マニュアル

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

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

Cocoonはこんな人におすすめ

cocoonの画像

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

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

  • どのWordPressテーマを選べばいいかわからない初心者の方
  • お金をかけずにWordPressを始めたい方
  • デザインよりも機能を重視したい方

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

SWELLの公式サイトの画像
SWELLの公式サイト

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

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

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

Cocoonのインストール方法

WordPressのバージョンの確認方法

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

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

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

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

【Cocoonテーマをダウンロード】をクリック

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

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

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

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

Cocoon-master(親テーマ)とCocoon-child-master(子テーマ)のZIPファイルの画像

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

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

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

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

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

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

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

【新規追加】をクリック

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

【テーマのアップロード】をクリック

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

【ファイルを選択】をクリック
Cocoonの親テーマを選択

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

【今すぐインストール】をクリック

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

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

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

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

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

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

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

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

Cocoonの子テーマを有効化する

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

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

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

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

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

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

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

リセットされる設定項目
  • 外観のカスタマイズ
  • 内部SEOの設定
  • OPG設定

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

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

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

Shota

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

Cocoonの初期デザイン

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

Cocoonのデモサイト

Cocoonのデモサイト①
Cocoonのデモサイト②
Cocoonのデモサイト③
Cocoonのデモサイト④

この記事でカスタマイズしたデモサイトは、以下のリンクで閲覧できます。

ぜひ参考にしてください。

Cocoonの初期設定と基本的な使い方

中休み

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

優先順位の高いものから解説します。

焦らずに設定していきましょう。

Cocoonの高速化設定

ダッシュボードから【Cocoon設定】⇒【高速化】をクリック

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

WordPressの管理画面から【Cocoon設定】⇒【高速化】をクリックしてください。

Cocoon設定のプラウザキャッシュの設定方法
設定項目設定方法
プラウザキャッシュの有効化チェックを入れる
⇒読者が2回目以降訪問した際に、プラウザにキャッシュした情報を提示
プラウザキャッシュの解説画像

キャッシュとは読み込んだ情報を一時的に保存する機能です。

キャッシュにより、読者が2回目以降ブログを閲覧した際に素早くページを表示させます。

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

Cocoon設定の縮小化の設定方法
設定項目設定方法
HTMLを縮小化するチェックを入れる
⇒余分な空白、改行をHTMLから削除する
CSSを縮小化するチェックを入れる
⇒余分な空白、改行をCSSから削除する
JavaScriptを縮小するチェックを入れる
⇒余分な空白、改行をJavaScriptから削除する

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

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

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

Cocoon設定のLazy Loadの設定方法
設定項目設定方法
Lazy Loadを有効にするチェックを入れる
⇒画像データを全て読み込む前に、一部を先出しする
Googleフォントの非同期読み込みを有効にするチェックを入れる
⇒Googleフォントを全て読み込む前に、一部を先出しする
アイコンフォントの非同期読み込みを有効にするチェックを入れる
⇒アイコンフォントを全て読み込む前に、一部を先出しする
遅延読み込み、非同期読み込みの解説画像

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

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

事前読み込み設定の設定方法

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

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

Cocoonのスキン設定

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

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

ダッシュボードから【Cocoon設定】⇒【スキン】をクリック①
ダッシュボードから【Cocoon設定】⇒【スキン】をクリック②

WordPressの管理画面から【Cocoon設定】⇒【スキン】をクリックしてください。

ぽんひろ.comのスキン

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

ぽんひろ.com-Cocoonカスタマイズ
ぽんひろ.com-Cocoonカスタマイズ

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

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

\ カスタマイズ /

スキンの写真をクリックすると、デザインイメージが表示される

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

Shota

Seasonなら全てのテーマに対応できるように解説します。

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

CocoonのSeasonのデモサイト

なお、「ぽんひろさんのスキン」のデモサイトは、以下のページから確認できます。

デモサイトを参考にカスタマイズしてみてください。

Cocoonの全体設定

Cocoon設定の【全体】をクリック

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

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

Cocoonの全体設定の設定方法①
設定項目設定方法
サイトキーカラーデフォルトのままでOK
⇒スキンのデザインが崩れるため
サイトキーテキストカラーデフォルトのままでOK
⇒スキンのデザインが崩れるため
フォント游ゴシック体、ヒラギノ角ゴシックがおすすめ
文字サイズ16pxがおすすめ
⇒パソコン表示の文字サイズのこと
文字色#424242
⇒違和感がない薄い黒色になる
Cocoonの全体設定の設定方法②
設定項目設定方法
モバイルサイトフォント16pxがおすすめ
⇒モバイル表示の文字サイズ
文字の太さデフォルトでOK
サイトアイコンフォントFont Awesome5を選択
⇒Font Awesome5の方がアイコンの種類が多い
サイトの背景色デフォルトのままでOK
⇒スキンのデザインが崩れるため
サイトの背景画像デフォルトのままでOK
⇒スキンのデザインが崩れるため
Font Awesome5のアイコンを活用したデザイン
Font Awesome5のアイコンを活用したデザイン

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

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

Cocoonの全体設定の設定方法③
設定項目設定方法
サイト幅の均一化チェックを入れない
⇒メインカラムの幅が短くなるため
サイトリンク色#0367bf
⇒リンクの色は青色と認知されているため
サイト選択文字色デフォルトでOK
サイト選択背景色デフォルトでOK
サイドバーの位置サイドバー右を選択
Cocoonの全体設定の設定方法④

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

③Cocoonのヘッダー設定

Cocoonのヘッダー設定では、ヘッダー部分をカスタマイズします。

ヘッダーに設置されたロゴ
ヘッダーに設置されたロゴ
  1. Canvaでヘッダーロゴを作成する
  2. ヘッダーロゴの背景を透明化する
  3. Cocoonのヘッダーにロゴを設定する
  4. モバイル用のヘッダーにロゴを設定する

Canvaでヘッダーロゴを作成する

Canvaでヘッダー画像を作成
Canvaでヘッダーロゴを作成

Canvaへ移動して、ヘッダーロゴを作成します。

canvaの設定方法①
canvaの設定方法①
canvaの設定方法②
canvaの設定方法②
canvaの設定方法③
canvaの設定方法③
canvaの設定方法④
canvaの設定方法④
  1. 【デザインを作成】をクリック
  2. 【カスタムサイズ】を選択
  3. 画像サイズを【幅200px×高さ50px】に設定
  4. Canvaでヘッダーロゴを作成

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

Canvaの登録方法と使い方については、以下の記事で解説しています。

ヘッダーロゴの背景を透明化する

モバイルでヘッダーロゴを綺麗に表示させるため、背景を透明化させます。

背景の透明化は、以下のサイトで設定できます。

フェニック

画像をアップロードするだけで透明化できるよ。

Cocoonのヘッダーにロゴを設定する

Cocoon設定の【ヘッダー】をクリック

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

Cocoonのヘッダー設定の解説画像

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

設定項目設定方法
ヘッダーロゴCanvaで作成したヘッダーロゴを選択
キャッチフレーズの設置【表示しない】にチェックを入れる

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

ヘッダーに設置されたロゴ画像
ヘッダーに設置されたロゴ

これでヘッダーへのロゴの設置は完了です。

モバイル用にヘッダーロゴを設定する

カスタマイズ後のモバイルのヘッダー
カスタマイズ後のモバイルのヘッダー

モバイル表示のヘッダーにロゴを設定します。

Cocoon設定の【モバイル】をクリック

Cocoon設定の【モバイル】をクリックしてください。

モバイル表示の設定方法
設定項目設定方法
モバイルメニュー【ヘッダーモバイルボタン】にチェックを入れる
⇒モバイルのヘッダーにメニューボタンを設置する
モバイルボタン①【サイトヘッダーロゴを表示する】のチェックを外す
⇒モバイルのヘッダーにロゴを2重で表示させない
モバイルボタン②【モバイルボタン時コンテンツ下のサイドバーを表示】にチェックを入れる
⇒コンテンツ下にサイドバーコンテンツを表示する
コンテンツ下にサイドバーコンテンツを表示する①
コンテンツ下にサイドバーコンテンツを表示する②

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

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

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

  1. プロフィールページとお問い合わせフォームの作成する
  2. Cocoonにグローバルナビゲーションを設置する

プロフィールページとお問い合わせフォームを作成する

グローバルナビゲーションに設置する「プロフィールページ」「お問い合わせフォーム」を作成します。

作成方法は、以下の記事を参考にしてください。

お問い合わせフォームの作成方法

Cocoonへのグローバルナビゲーションの設置

ダッシュボードの【外観】⇒【メニュー】をクリック

WordPressの管理画面から【外観】⇒【メニュー】をクリックします。

メニューは以下のように設定しましょう。

設定項目設定方法
編集するメニューの選択【グローバルナビゲーション(ヘッダーメニュー)】を選択
メニュー名「グローバルナビゲーション」と入力
メニュー項目の追加グローバルナビゲーションに設置するコンテンツを選択
メニューの追加クリックする
設定項目設定方法
メニュー設定【ヘッダーメニュー】にチェックを入れる
⇒ヘッダー下にグローバルナビゲーションを設置

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

ヘッダー下にグローバルメニューを設置できた画像

これで、ヘッダー下にグローバルメニューを設置できました。

Cocoonのサイドバー設定

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

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

WordPressの管理画面から【外観】⇒【ウィジェット】をクリックします。

サイドバーのブロックを削除
サイドバーのブロックを削除
サイドバースクロール追従のブロックを削除
サイドバースクロール追従のブロックを削除

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

設定項目設定方法
サイドバー【ブロック】⇒【削除】をクリック
サイドバースクロール追従【ブロック】⇒【削除】をクリック
プロフィールの追加
プロフィールの追加
カテゴリーの追加
カテゴリーの追加
検索の追加
検索の追加
タグの追加
タグの追加

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

設定項目設定方法
プロフィール【サイドバー】⇒【ウィジェットを追加】をクリック
カテゴリー【サイドバー】⇒【ウィジェットを追加】をクリック
検索【サイドバー】⇒【ウィジェットを追加】をクリック
タグクラウド【サイドバー】⇒【ウィジェットを追加】をクリック
サイドバー設定が完了した画像
Shota

サイドバーでの並び順は手動で変更できます。

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

Cocoonのプロフィール設定

サイドバーへのプロフィールの設定完了図

サイドバーのプロフィールの設定方法を解説します。

  1. プロフィール情報を入力する
  2. プロフィールページへの誘導リンクの作成する
  3. プロフィール画像をアップロードする
  4. feedlyとRSSとホームボタンを削除する

プロフィール情報を入力する

ダッシュボードから【ユーザー】⇒【プロフィール】をクリック

WordPressの管理画面から【ユーザー】⇒【プロフィール】をクリックします。

以下の項目を記入しましょう。

ニックネームの入力画像
TwitterとインスタグラムのURLの入力画像
プロフィール情報の入力画像
  • ニックネーム
  • ブログ上の表示名
  • Twitter URL(任意)
  • Instagram URL(任意)
  • プロフィール情報

良いニックネーム(ハンドルネーム)が思いつかない方は、以下の記事を参考にしてください。

実例を140以上紹介しています。

Shota

しっくりくるニックネームが思いつきますよ。

プロフィールページへの誘導リンクを作成する

プロフィールページへの誘導リンクを作成する

【ユーザー】⇒【プロフィール】へとページを進めます。

【プロフィール情報】の項目に、以下のコードを貼り付けてください。

<a href="プロフィールページURL">詳しいプロフィールはこちら</a>
Shota

“プロフィールページURL”は、作成したプロフィールページのURLを貼り付けましょう。

これでプロフィールページへの誘導リンクの設置は完了です

プロフィール画像をアップロードする

プロフィール画像をアップロード方法

プロフィール画像をアップロードします。

アップロードされたプロフィール画像
設定項目設定方法
プロフィール画像のアップロードプロフィール画像をアップロードする
⇒画像は幅240px×高さ240pxが推奨サイズ
プロフィールページURLプロフィールページのURLを入力
⇒名前をクリックするとプロフィールページへ移動する

設定が完了したら【プロフィールの更新】をクリックしましょう。

feedlyとRSSとホームボタンを削除する

ダッシュボードのCocoon設定から【SNSフォロー】をクリック

Cocoon設定から【SNSフォロー】をクリックします。

feedlyフォローボタンとRSS購読ボタンについたチェックを外す

以下の項目のチェックを外し、【変更をまとめて保存】をクリックしてください。

  • feedlyフォローボタンを表示する
  • RSS購読ボタンを表示する
feedlyとRSSの削除は完了したプロフィールページ

これでfeedlyとRSSの削除は完了です。

サイトの項目に記載されているURLを削除

ホームボタンは【ユーザー】⇒【プロフィール】のページに進み、サイトの項目に記載されているURLを消去すれば、削除できます。

サイドバーへのプロフィールの設定完了図

これでサイドバーのプロフィールは完成です。

Cocoonの管理者画面設定

pv情報が表示されたブログのトップページ

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

Cocoon設定の【管理者画面】をクリック

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

Cocoonの管理者画面設定の設定方法①
Cocoonの管理者画面設定の設定方法②
Cocoonの管理者画面設定の設定方法③
Cocoonの管理者画面設定の設定方法④

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

設定項目設定方法
PVエリアを表示するチェックを外す
AMPエリア表示するチェックを外す
チェックツールエリアを表示するチェックを外す
レシポンジブチェックを表示するチェックを外す

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

CocoonのSEO設定

Cocoon設定の【SEO】をクリック

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

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

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

CocoonのSEO設定の設定方法
設定項目設定方法
カテゴリーページの2ページ目以降をnoindexとするチェックを入れる
⇒重複コンテンツのリスク回避
カテゴリーページの2ページ目の画像

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

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

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

CocoonのOPG設定

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

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

CocoonのOPG設定①
設定項目設定方法
OPGタグの挿入チェックを入れる
⇒チェックを入れないとブログとSNSを連携できない
Facebook APP ID空欄でOK
⇒IDを入力するとFacebookインサイトを利用できる
CocoonのOPG設定②
設定項目設定方法
Twitterカードタグの挿入チェックを入れる
⇒チェックを入れないとTwitterカードを表示できない
Twitterカードタイプ大きな画像のサマリー】を選択
⇒画像があった方が目立つため
Twitterカードの画像
Twitterカード

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

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

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

CocoonのOPG設定③
設定項目設定方法
ホームイメージオリジナル画像に変更
⇒トップページがTwitterでシェアされた時に表示される画像

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

CocoonのOPG設定④

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

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

オリジナル画像の作り方は、以下の記事で解説しています。

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

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

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

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

Cocoonのアクセス解析・認証設定の方法①
設定項目設定方法
サイト管理者も含めてアクセス解析するチェックを外す
⇒自分のアクセスをカウントから除外する
Cocoonのアクセス解析・認証設定の方法②
設定項目設定方法
Google Analytics設定GA4の測定IDを入力する
グーグルアナリティクス4のプロパティ管理画面
GA4のプロパティ管理画面

Google Analytics設定は、GA4の測定IDを入力するだけでOKです。

Googleアナリティクスの構造
Googleアナリティクスの構造

GA4とCocoonを連携させれば、自動的にUAとも連携されるからです。

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

Cocoonのアクセス解析・認証設定の方法③
設定項目設定方法
Google Search Console設定サーチコンソールのHTMLタグの一部を入力する
所有権の確認ページ(HTMLタグ)

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

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

〇〇〇〇〇〇〇〇〇の部分だけ入力すればOKです。

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

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

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

Cocoonのカラム設定

Cocoonのカラム設定

Cocoonのカラム設定では、メインカラムの幅とサイドバーの幅を設定します。

メインカラムの幅の解説画像
メインカラムの幅
サイドバーの幅の解説画像
サイドバーの幅

今回はメインカラムの幅とサイドバーの幅が、以下の値になるように設定します。

  1. メインカラムの幅:800px
  2. メインカラムのコンテンツ幅:728px
  3. サイドバーの幅:350px
  4. サイドバーのコンテンツ幅:306.8px

カラムの設定方法

カラムの設定方法①
設定項目設定方法
コンテンツ幅800px
コンテンツ余白幅10px
コンテンツ枠線幅0px
コンテンツ枠線色デフォルト設定
カラムの設定方法②
設定項目設定方法
サイドバー幅350px
サイドバー余白幅5px
サイドバー枠線幅0px
サイドバー枠線色デフォルト設定
カラムの設定方法③
設定項目設定方法
カラム間の幅5px

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

Cocoonのインデックス設定

Cocoonのインデックス設定

Cocoonのインデックス設定では、トップページに表示される記事の配置を設定します。

Cocoonのトップページの画像①
Cocoonのトップページの画像②

今回は、Cocoonのトップページをサイト型に設定する方法を解説します。

サイト型への設定方法

サイト型への設定方法①
設定項目設定方法
フロントページタイプ(表示形式)【カテゴリごと(2カラム)】を選択
フロントページタイプ(表示カテゴリー)表示するカテゴリーにチェックを入れる
サイト型への設定方法②
設定項目設定方法
並び順【更新日(降順)】を選択
⇒記事を更新すると上部に表示される
サイト型への設定方法③
設定項目設定方法
投稿関連情報の表示①【スニペット(抜粋)の表示】にチェックを入れる
投稿関連情報の表示②【投稿日の表示】にチェックを入れる
投稿関連情報の表示③【更新日の表示】にチェックを入れる

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

Cocoonの投稿設定

Cocoonの投稿設定の画面

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

ページ送りナビ設定

Cocoonの投稿設定の解説画像①
設定項目設定方法
表示位置【コメント下】にチェックを入れる
ページ送りナビの画像

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

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

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

コメント設定

Cocoonの投稿設定の解説画像②
項目設定方法
コメントを表示するコメント欄がいらない人はチェックを外す
コメント欄を作りたい人はチェックを入れる
コメント欄
コメント欄

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

Throws SPAM Awayの画像

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

  • 商用利用可能
  • Cocoonで不具合が起きにくい

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

パンくずリスト設定

Cocoonの投稿設定の解説画像③
設定項目設定方法
パンくずリストの配置メインカラムトップ】にチェックを入れる
⇒記事タイトル上にパンくずリストを表示
記事タイトルチェックを外す
⇒パンくずリストが見にくくなるため
パンくずリストの画像

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

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

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

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

Cocoonの本文設定

Cocoonの本文設定の表示画面

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

本文余白

本文余白設定の解説画像
設定項目設定方法
行の高さ1.8line-hight
⇒デフォルト設定
行の余白1.5em
⇒行間を適切な値に設定
行の高さの解説画像
行の高さ
行の余白の解説画像
行の余白

「行の高さ」と「行の余白」の違いは上図になります。

投稿情報表示設定

Cocoonの本文設定の解説①
設定項目設定方法
投稿関連情報【投稿日の表示】にチェックを入れる
【更新日の表示】にチェックを入れる
【投稿者名の表示】はチェックを外す

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

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

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

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

Cocoonの目次設定

Cocoonの目次設定の設定画面
デフォルトの目次
デフォルトの目次

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

Cocoonの目次設定の解説画像①
設定項目設定方法
目次を表示するチェックを入れる
表示ページ投稿ページ】にチェックを入れる
⇒固定ページには不要

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

Cocoonの目次設定の解説画像②
設定項目設定方法
目次表示の深さH3見出しまで
H4見出しまで表示された目次
H4見出しまで表示された目次

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

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

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

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

CocoonのSNSシェアボタンの設定

CocoonのSNSシェア設定の解説画像①

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

記事下に表示されるSNSシェアボタン
記事下に表示されるSNSシェアボタン

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

CocoonのSNSシェア設定の解説画像②
設定項目設定方法
メインカラムトップシェアボタンを表示チェックを外す

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

Cocoonの画像設定

Cocoonの画像設定

Cocoonの画像設定では、記事へのアイキャッチ画像の設置やサムネイル画像の縦横比を設定します。

Cocoonの画像設定の方法①
設定項目設定方法
本文上にアイキャッチを表示するチェックを入れる
⇒本文記事上にアイキャッチ画像が自動設定される
アイキャッチラベルを表示するチェックを入れる
⇒アイキャッチ画像にカテゴリーが表示される
アイキャッチの中央寄せチェックを入れる
Cocoonの画像設定の方法②
設定項目設定方法
アイキャッチ自動設定を有効にするチェックを外す
画像の囲み効果【なし】にチェック入れる
画像の拡大効果【baguette Box(軽量・スマホ向け)】にチェックを入れる
⇒画像をクリックすると大きく表示される
Cocoonの画像設定の方法③
設定項目設定方法
サムネイル画像【約5:8(黄金比)】にチェックを入れる
Cocoonの画像設定の方法④

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

Cocoonのコメント設定

Cocoonのコメント設定の設定画面

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

設定後のコメント欄
設定後のコメント欄

読者がコメント欄と認識できるように、常に開放するように設定します。

Cocoonのコメント設定の解説画像
設定項目設定方法
コメント入力欄表示【常に表示】にチェックを入れる
設定が完了したら【変更をまとめて保存】をクリック

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

Cocoonのフッター設定

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

  1. HTMLサイトマップを作成する
  2. プライバシーポリシーを作成する
  3. フッターに固定ページを設置する
  4. フッターをカスタマイズする

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

完成したHTMLサイトマップ

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

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

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

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

ダッシュボードから【固定ページ】⇒【新規追加】をクリック

WordPressの管理画面から【固定ページ】⇒【新規追加】をクリックしてください。

サイトマップの作成方法①
サイトマップの作成方法①
サイトマップの作成方法②
サイトマップの作成方法③

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

設定項目設定方法
タイトル「サイトマップ」と入力
投稿画面ショートコードを呼び出し[sitemap]と入力
パーマリンク「sitemap」と入力
SEO設定①【インデックスしない(noindex)】にチェックを入れる
⇒Googleにサイトマップをインデックスさせないため
SEO設定②【リンクをフォローしない(nofollow)】にチェックを入れる
⇒クローラーにサイトマップを辿らせないため

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

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

プライバシーポリシーの画像
プライバシーポリシー

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

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

Shota

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

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

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

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

WordPressの管理画面から【外観】⇒【メニュー】をクリックします。

フッターに「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」を設置する方法

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

設定項目設定方法
編集するメニューの選択フッター(フッターメニュー)を選択
メニュー項目を追加「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」にチェックを入れる
メニューに追加クリックする
メニュー設定【フッターメニュー】にチェックを入れる

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

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

WordPressダッシュボードの【Cocoon設定】をクリック
【Cocoon設定】から【フッター】をクリックしましょう。

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

フッターのカスタマイズ方法
フッターのカスタマイズ方法

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

設定項目設定方法
フッター表示タイプ【メニュー&クレジット(左右)】にチェックを入れる
フッターメニュー幅【メニュー幅にテキストを合わせる】にチェックを入れる

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

完成したフッター画像

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

Cocoonのエディター設定

Cocoonのエディター設定の設定画面

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

Gutenbergエディターの表示形式
Gutenbergエディターの表示形式
ビジュアルエディターの表示形式
ビジュアルエディターの表示形式
  • Gutenbergエディター
  • ビジュアルエディター

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

Gutenbergエディターの方が、記事装飾を短時間で終わらせることができるからです。

Cocoonのエディター設定の解説画像
設定項目設定方法
Gutenbergエディターを有効にするチェックを入れる
エディターにテーマスタイルを反映させるチェックを入れる
設定が完了したら【変更をまとめて保存】をクリック

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

WordPressの初期設定

設定項目進捗度合い重要度
①初期URLの確認完了
②WordPressの常時SSL化設定完了
③総合セキュリティプラグインの導入未完
④WordPressのニックネームの変更未完
⑤不要な初期プラグインの削除未完
⑥WordPressのテーマ設定完了
⑦WordPressの一般設定未完
⑧WordPressの投稿設定未完
⑨WordPressのディスカッション設定未完
⑩WordPressのメディア設定未完
⑪WordPressのパーマリンク設定未完
⑫サンプルページの削除未完
⑬プライバシーポリシーの設定完了
⑭お問い合わせフォームの設置完了
⑮アナリティクス、サーチコンソールとの連携完了
⑯WordPressのプロフィール設定完了
⑰WordPressのプラグイン設定未完
⑱ブログ収益化ツールの導入未完

WordPressの初期設定には、上記のものが残っています。

初期設定が必要な理由
  1. WordPressのセキュリティを強化する
  2. ブログのSEOを強化する
  3. WordPress運営後の不具合を予防する

重要度の高いものから、じっくり設定しましょう。

WordPressの初期設定については、以下の記事で解説しています。

Cocoonの応用的な使い方

中休み

Cocoonの初期設定が終わった後に知っておくべき、応用的な使い方を解説します。

Cocoonの吹き出し設定

Cocoonの吹き出しの画像
吹き出しの画像

この項目では、投稿に使用する吹き出しの作成方法を解説します。

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

WordPressの管理画面から【Cocoon設定】⇒【吹き出し】をクリックします。

Cocoonの吹き出し設定の解説画像①

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

【新規追加】をクリック

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

Cocoonの吹き出し設定の解説画像②

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

設定項目設定方法
タイトル例:冒頭の挨拶
⇒何でもOK
名前例:フェニック
⇒アイコン下に表示される名前を入力
アイコン画像幅と高さが160px以上の画像を設定
Cocoonの吹き出し設定の解説画像③
設定項目設定方法
吹き出しスタイルデフォルトでOK
人物位置用途によって右と左を使い分け
⇒アイコンを表示するポジションを設定
アイコンスタイル四角(枠線なし)がおすすめ
TinyMCEチェックを入れる

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

投稿画面での吹き出しの使い方

ブロックをクリックして「吹き出し」と入力

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

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

【人物】の項目から、先ほど作成した吹き出しを選択

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

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

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

Cocoonのファビコン設定

Cocoonのファビコン画像
Cocoonのファビコン画像

ファビコンとは、ブログのシンボルとして使われるアイコン画像のことです。

ファビコンは、以下の場面で表示されます。

  1. プラウザのタブ
  2. ブックマークバー
  3. モバイルでの検索結果

Cocoonを導入したら、必ずファビコンは設定しましょう。

ファビコンの設定方法

WordPressの管理画面から【外観】⇒【カスタマイズ】をクリック

WordPressの管理画面から【外観】⇒【カスタマイズ】をクリックします。

Cocoon Childを選択し【サイト基本情報】をクリック

Cocoon Childを選択し【サイト基本情報】をクリックしましょう。

【サイトアイコンを選択】をクリック

【サイトアイコンを選択】をクリックします。

【ファイルをアップロード】⇒【ファイルを選択】をクリック

【ファイルをアップロード】⇒【ファイルを選択】をクリックしましょう。

ファビコンに使用する画像を選択します。

【画像切り抜き】をクリック

【画像切り抜き】をクリックすれば、ファビコン設定は完了です。

Cocoonのブログカード設定

Cocoonのブログカード設定

ブログカードとは、記事タイトルや概要、アイキャッチ画像をまとめた内部リンクです。

ブログカードで内部リンクを設置すると、目立つためクリック率アップが期待できます。

Cocoon設定の【ブログカード】をクリックします。

内部ブログカードの設定方法

内部ブログカードの設定方法
設定項目設定方法
ブログカードを表示するチェックを入れる
⇒チェックを入れないとブログカードが表示されない
サムネイルスタイル【左側】にチェックを入れる
日付表示【更新日】にチェックを入れる
⇒記事の鮮度をアピールできる
新しいタブで開くチェックを入れない
⇒記事からの離脱を防止するため

外部ブログカードの設定方法

外部ブログカードの設定方法
設定項目設定方法
ブログカードを表示するチェックを入れる
⇒チェックを入れないとブログカードが表示されない
サムネイルスタイル【左側】にチェックを入れる
新しいタブで開くチェックを入れる
⇒外部リンクは新しいタブで開くことが多い
キャッシュの保管期間デフォルト(30日)でOK
⇒30日経過するとブログカードが自動更新される
キャッシュ更新モードを有効にするチェックを入れる
⇒読者がブログカードをクリックするとブログカードが自動更新される

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

投稿画面でのブログカードの使い方

検索窓にブログカードと入力し【ブログカードブロック】をクリック

投稿画面で【+】をクリックします。

検索窓にブログカードと入力し【ブログカードブロック】をクリックしましょう。

ブログカードの作り方の解説

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

  1. リンクマークをクリック
  2. ブログカードのページURLを入力
  3. 表示されたリンクをクリック
画面右側の【ラベル】から表示させるラベルを選択

画面右側の【ラベル】から表示させるラベルを選択します。

完成したブログカード

これでブログカードは完成です。

プレビューで、ブログカードの表示内容に間違いがないのか確認しておきましょう。

Cocoonのおすすめカード設定

Cocoonのおすすめカードを設定すると、グローバルメニュー下に読者に読んでほしい記事を表示させることができます。

Shota

レビュー記事など収益性の高い記事を表示させましょう。

おすすめカードの設定方法(前編)

WordPressの管理画面から【外観】⇒【メニュー】をクリック

WordPressの管理画面から【外観】⇒【メニュー】をクリックします。

【新しいメニューを作成しましょう。】をクリック

【新しいメニューを作成しましょう。】をクリックしてください。

メニュー名に「おすすめカード」と入力し【メニューを作成】をクリック

メニュー名に「おすすめカード」と入力し【メニューを作成】をクリックします。

【メニュー項目を追加】の設定方法

【メニュー項目を追加】では、以下のように設定します。

  1. 投稿を選択
  2. おすすめカードに表示させる記事を選択
  3. 【メニューに追加】をクリック

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

おすすめカードの設定方法(後編)

Cocoon設定のおすすめカードをクリック

Cocoon設定のおすすめカードをクリックします。

おすすめカードの設定方法
設定項目設定方法
おすすめカード表示【フロントページのみで表示】にチェックを入れる
⇒ブログのトップページにのみに表示させる
表示スタイル【画像のみ】にチェックを入れる
⇒他の選択肢も試して最適なデザインを選んでください
おすすめカード毎に余白を設けるチェックを入れる
⇒おすすめカードが見やすくなる
おすすめカードの左右に余白を設けるチェックを入れる

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

ブログトップページに表示されたおすすめカード
ブログトップページに表示されたおすすめカード

これでおすすめカードの設定は完了です。

Cocoonのアピールエリア設定

Cocoonのアピールエリア設定

Cocoonでアピールエリアを設定すると、トップページにメインビジュアルとおすすめ記事へのリンクを設定できます。

アピールエリアの設定方法

Cocoon設定のアピールエリアを選択

Cocoon設定のアピールエリアを選択します。

アピールエリアの設定方法①
設定項目設定方法
アピールエリアの表示【フロントページのみで表示】にチェックを入れる
⇒ブログのトップページにのみ表示させる
高さ200px
エリア画像アピールエリアに利用する画像を選択
アピールエリア背景画像の固定チェックを入れる
⇒パソコン表示でメインビジュアルがおしゃれに表示される
アピールエリアの設定方法②
設定項目設定方法
エリア背景色デフォルトでOK
テキストメッセージエリアを表示するチェックを入れる
タイトル空欄にする
アピールエリアの設定方法③
設定項目設定方法
ボタンメッセージアピールエリアに表示させる文章を入力
⇒ボタンに文章が表示
ボタンリンク先アピールエリアからのリンク先を入力
⇒ボタンにリンク先URLが設定
ボタンリンクの開き方【同じタブで開く】を選択
ボタン色好みの色を選択

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

トップページのアピールエリアの画像

これでトップページにアピールエリアを設定できました。

カルーセルとは、複数の記事を左右に移動して表示させる方法です。

読者の目に止まりやすいため、記事のクリック率アップが期待できます。

カルーセルの設定方法

Cocoon設定のカルーセルを選択

Cocoon設定のカルーセルを選択します。

カルーセルの設定方法①
設定項目設定方法
カルーセルの表示【フロントページのみで表示】にチェックを入れる
⇒ブログのトップページにのみ表示させる
スマートフォンで表示チェックを入れる
表示内容【全期間で集計した人気記事を含める】にチェックを入れる
⇒カルーセルに表示させたい記事を選択してください
カルーセルの設定方法②
設定項目設定方法
カルーセルの並び【ランダム】にチェックを入れる
最大表示記事数12記事
⇒12記事が最小
オートプレイを実行チェックを入れる
⇒カルーセルが自動的に送られる
オートプレイインターバル3秒を選択
⇒3秒が最小

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

トップページに表示されたカルーセル

これでトップページにカルーセルを設定できました。

Cocoonの囲みボックスの使い方

Cocoonの囲みボックス①
Cocoonの囲みボックス②

Cocoonには、デフォルトで8種類の囲みボックスが用意されています。

Cocoonの囲みボックスの種類
  1. アイコンボックス
  2. 案内ボックス
  3. 白抜きボックス
  4. 付箋風ボックス
  5. タグボックス
  6. 見出しボックス
  7. ラベルボックス
  8. タブ見出しボックス

そのため、記事を簡単に装飾できます。

投稿画面での囲みボックスの使い方

囲みボックスの挿入方法

まず以下の手順で囲みボックスを記事に挿入します。

  1. 画面左上の【+】を選択
  2. 検索窓にボックスと入力
  3. 使用する囲みボックスを選択
囲みボックスのラベルや色の設定方法

囲みボックスを挿入できたら【ブロック】を選択し、ラベルや色を設定してください。

Shota

お疲れ様でした。これでCocoonの解説は終了です。

Cocoonのインストールと使い方が分かったら

ブログ収益化ツールを導入しましょう。

ブログツールを導入すると、より確実に稼げます。

以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。

ぜひチェックしてみてください。

>>ブログアフィリエイト収益化を加速させるおすすめツール20選

Cocoonのインストールと使い方のまとめ

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

Cocoonのまとめ
  • Cocoonは「無料」「日本語対応」「機能性の高さ」が特徴のWordPressテーマ
  • Cocoonは子テーマを有効化する
  • Cocoonはスキンがあるため、初期設定とカスタマイズが簡単

Cocoonの準備ができたら、さっそく記事を執筆しましょう。

以下の記事では、WordPressでのブログ記事の書き方を解説しています。

ぜひ参考にしてください。

参考サイト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次