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

Cocoonのインストール方法と必須の初期設定【19項目】

Cocoonのインストール方法と必須の初期設定【19項目】
フェニック

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

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

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

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

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

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

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

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

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

目次

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初期設定後の記事ページ②
Cocoon初期設定後の記事ページ③
Cocoon初期設定後の記事ページ③

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

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

①Cocoonの高速化設定

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

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

ダッシュボードから【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設定】⇒【スキン】をクリック①
ダッシュボードから【Cocoon設定】⇒【スキン】をクリック②

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

ぽんひろ.comのスキン

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

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

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

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

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

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

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

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

「Season(Autumn)」のトップ画面
「Season(Autumn)」のトップ画面
フェニック

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

③Cocoonの全体設定

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

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

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

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

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

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

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

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

④CocoonのSEO設定

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

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

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

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

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

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

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

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

⑤CocoonのOPG設定

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

CocoonでOPGを設定すると、ブログと「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(Googleアナリティクス4)と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の投稿設定の解説画像①
設定項目設定方法
表示位置【コメント下】にチェックを入れる
ページ送りナビの画像

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

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

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

コメント設定

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

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

Throws SPAM Awayの画像

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

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

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

パンくずリスト設定

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

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

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

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

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

⑧Cocoonの本文設定

Cocoonの本文設定の表示画面

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

本文余白

Cocoonの本文設定の解説①
設定項目設定方法
行の高さ1.8line-hight
⇒デフォルト設定
行の余白2.6em
⇒行間を広く設定
行の高さの解説画像
行の高さ
行の余白の解説画像
行の余白

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

投稿情報表示設定

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

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

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

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

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

⑨Cocoonの目次設定

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

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

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

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

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

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

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

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

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

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

Cocoonの目次のカスタマイズ

カスタマイズ前の目次
カスタマイズ前の目次
カスタマイズ後の目次
カスタマイズ後の目次

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

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

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

【追加CSS】をクリック

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

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

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

Cocoonの目次設定の解説画像③
/************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.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の目次設定の解説画像④

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

⑩CocoonのSNSシェア設定

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

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

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

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

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

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

⑪Cocoonのコメント設定

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

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

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

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

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

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

⑫Cocoonのエディター設定

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

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

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

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

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

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

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

⑬Cocoonの吹き出し設定

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

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

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

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

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

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

【新規追加】をクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

⑭Cocoonの管理者画面設定

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

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

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

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

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

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

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

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

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

ブログのトップページに表示されたグローバルナビゲーションの画像①

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

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

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

Cocoonのグローバルメニューの設定の解説画像

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

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

設定項目設定方法
メニュー名【グローバルナビゲーション】を選択
固定ページ「Sample Page」にチェックを入れる
メニューの追加クリックする
メニュー設定【ヘッダーメニュー】【ヘッダーモバイルメニュー】にチェックを入れる

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

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

ブログのトップページに表示されたグローバルナビゲーションの画像②

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

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

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

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

⑯WordPressの一般設定

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

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

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

ダッシュボードから【設定】⇒【一般】をクリック

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

WordPressの一般設定の設定方法①

常時SSL化が完了していない場合は、URLを変更してはいけません。

WordPressの管理画面にログインできなくなります。

レンタルサーバーにて常時SSL化が完了していない方は、URLは変更しなくてOKです。

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

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

設定項目設定方法
サイト名ブログ名を入力
キャッチフレーズブログの簡単な説明文を入力
WordPressアドレス(URL)httpをhttpsに変更
サイトアドレス(IRL)httpをhttpsに変更

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

WordPressの一般設定の設定方法②

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

ブログのトップページにブログ名が表示された画像

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

⑰Cocoonのヘッダー設定

カスタマイズ後のヘッダー画像
カスタマイズ後のヘッダー画像

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

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

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

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

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

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

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

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

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

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

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

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

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

⑱Cocoonのサイドバー設定

初期設定前のサイドバー
初期設定前のサイドバー
初期設定後のサイドバー
初期設定後のサイドバー

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

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

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

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

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

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

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

設定項目設定方法
プロフィール【サイドバー】⇒【ウィジェットを追加】をクリック
カテゴリー【サイドバー】⇒【ウィジェットを追加】をクリック
検索【サイドバー】⇒【ウィジェットを追加】をクリック
サイドバーの完成図
サイドバーの完成図

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

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

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

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

⑲Cocoonのフッター設定

初期設定完了後のフッター
初期設定完了後のフッター

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

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

完成したHTMLサイトマップ

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

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

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

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

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

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

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

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

設定項目設定方法
タイトル「サイトマップ」と入力
投稿画面ショートコードを呼び出し、カッコつきでsitemapと入力
パーマリンク「sitemap」と入力
SEO設定①【インデックスしない(noindex)】にチェックを入れる
②【リンクをフォローしない(nofollow)】にチェックを入れる

⇒Googleにサイトマップをインデックスさせないため

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

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

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

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

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

Shota

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

完成したフッター画像
完成したフッター

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

Cocoon初期設定後のトップページ①
Cocoon初期設定後のトップページ①
Cocoon初期設定後のトップページ②
Cocoon初期設定後のトップページ②
Cocoon初期設定後の記事ページ①
Cocoon初期設定後の記事ページ①
Cocoon初期設定後の記事ページ②
Cocoon初期設定後の記事ページ②
Cocoon初期設定後の記事ページ③
Cocoon初期設定後の記事ページ③
Shota

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

フェニック

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

Cocoonのインストールと初期設定のまとめ

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

Cocoonのインストール方法と初期設定
  • Cocoonは「無料」「日本語対応」「機能性の高さ」が特徴のWordPressテーマ
  • Cocoonは子テーマを有効化することで、バージョンアップしても設定がリセットされない
  • Cocoonはスキンがあるため、初期設定が簡単

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

項目初期設定内容優先度
①一般設定(済)サイトタイトルやURLのSSL化(済)
②投稿設定メールでの投稿方法やPing送信
③表示設定  トップページの表示方法やサイトのインデックス
④ディスカッション設定コメント欄の表示方法、トラックバック
⑤メディア設定記事に挿入する画像サイズ
⑥パーマリンク設定サイトのURL構造
⑦プライバシー設定(済)プライバシーポリシーの設置(済)
⑧テーマ設定(済)WordPressテーマの導入、不要テーマの削除(済)
⑨プロフィール設定(済)プロフィールページの設置、ニックネームの変更(済)
⑩プラグイン設定プラグイン導入、不要な初期プラグインの削除

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

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

参考サイト

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

コメント

コメントする

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

目次