フェニックCocoonなら無料でブログを作れるみたいだけど、何から始めたらいいのかな？
今回はこのような疑問にお答えします。
機能性が高く、またサポートも充実しているためブログ初心者にはおすすめです。
- Cocoonのインストール方法
- Cocoonの初期設定
- おしゃれなカスタマイズ方法（CSSコードなし）
- 記事の装飾方法
この記事の設定を真似するだけで、すぐにブログをスタートできます。
画像100枚以上使い解説するので、ぜひ参考にしてください。
さくっと知りたい方は、ページ内リンクをクリックしてください。
Cocoonとは【WordPressテーマ】
有料テーマを含めても、SWELLに次いで2位のシェアを誇ります。
| WordPressテーマ | シェア |
|---|---|
| SWELL | 6.8% |
| Cocoon | 5.1% |
| SANGO | 2.2% |
| JIN | 2.0% |
| THE THOR | 1.7% |
| その他 | 76.4% |
「わいひらさん」という日本人プログラマーが開発しており、日本語に完全対応していることが特徴です。
Cocoonは機能が豊富
Cocoon設定を見ると、タブの多さに驚くと思います。
Cocoonは初心者だけではなく、ブログ上級者まで使える優秀なWordPressテーマです。
Cocoonマニュアルはかなり充実
Cocoonは無料テーマにも関わらず、サポート機能も充実しています。
Cocoonマニュアルでは、Cocoonの使い方について細かく解説されています。
またCocoonフォーラム(コミュニティ)では、Cocoonについて「わいひらさん」に質問することも可能です。
Cocoonはこんな人におすすめ
３つの特徴を踏まえ、Cocoonは以下の方におすすめです。
- どのWordPressテーマを選べばいいかわからない初心者の方
- お金をかけずにWordPressを始めたい方
- デザインよりも機能を重視したい方
これらに当てはまる方はCocoonをインストールしましょう。
有料テーマではありますが、初心者でもおしゃれなブログを作ることができます。
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の子テーマを有効化したら、設定は完了です。
上図のように子テーマが有効化していればOKです。
親テーマは有効化しません。
Cocoonの子テーマのみ有効化する理由
WordPressテーマは、親テーマと子テーマの片方しか有効化できないように設計されています。
Cocoonの子テーマを有効化させる理由は、テーマのバージョンアップ時に設定をリセットさせないためです。
親テーマは、バージョンアップすると設定がリセットされます。
- 外観のカスタマイズ
- 内部SEOの設定
- OPG設定
子テーマを有効化しておけば、設定情報は全て子テーマに残ります。
そのため親テーマがバージョンアップしても、設定がリセットすることはありません。
以上の理由からCocoonは子テーマのみ有効化してください。
Shota試しに親テーマを有効化してみてください。子テーマは無効化されます。
Cocoonがインストールされると、ブログデザインが一新されます。
Cocoonのデモサイト
ぜひ参考にしてください。
Cocoonの初期設定と基本的な使い方
優先順位の高いものから解説します。
焦らずに設定していきましょう。
Cocoonの高速化設定
WordPressの管理画面から【Cocoon設定】⇒【高速化】をクリックしてください。
| 設定項目 | 設定方法 |
|---|---|
| プラウザキャッシュの有効化 | チェックを入れる ⇒読者が2回目以降訪問した際に、プラウザにキャッシュした情報を提示 |
キャッシュとは読み込んだ情報を一時的に保存する機能です。
キャッシュにより、読者が2回目以降ブログを閲覧した際に素早くページを表示させます。
プラウザキャッシュを有効化すると「ブラウザの保存データ」を先出しできるため、ページ表示速度が高速化します。
| 設定項目 | 設定方法 |
|---|---|
| HTMLを縮小化する | チェックを入れる ⇒余分な空白、改行をHTMLから削除する |
| CSSを縮小化する | チェックを入れる ⇒余分な空白、改行をCSSから削除する |
| JavaScriptを縮小する | チェックを入れる ⇒余分な空白、改行をJavaScriptから削除する |
余分な空白や改行を削除することで、ブログ全体を軽量化します。
その結果、ページ表示速度が高速化します。
| 設定項目 | 設定方法 |
|---|---|
| Lazy Loadを有効にする | チェックを入れる ⇒画像データを全て読み込む前に、一部を先出しする |
| Googleフォントの非同期読み込みを有効にする | チェックを入れる ⇒Googleフォントを全て読み込む前に、一部を先出しする |
| アイコンフォントの非同期読み込みを有効にする | チェックを入れる ⇒アイコンフォントを全て読み込む前に、一部を先出しする |
「遅延読み込み、非同期読み込み」とは、読者が見ているコンテンツのみを表示させて、見ていないコンテンツを後から表示させる技術です。
読者がブログを開いた時、読者が見ているコンテンツのみを先出しするためページ表示速度が高速化します。
【事前読み込み設定】はデフォルトでOKです。
設定が完了したら【変更を保存】をクリックしてください。
Cocoonのスキン設定
スキンを利用することで、簡単におしゃれなデザインを作ることができます。
WordPressの管理画面から【Cocoon設定】⇒【スキン】をクリックしてください。
おすすめは「ぽんひろさんのスキン」です。
ぽんひろさんのサイトでは、Cocoonのカスタマイズ情報が豊富に公開されています。
「ぽんひろさんのスキン」を活用すれば、ぽんひろさんのサイト情報をもとにカスタマイズ可能です。
＼ カスタマイズ ／
今回はぽんひろさんの「Season(Winter)」を使った初期設定を解説します。
ShotaSeasonなら全てのテーマに対応できるように解説します。
スキンを選択したら【変更をまとめて保存】をクリックしてください。
CocoonのSeasonのデモサイト
なお、「ぽんひろさんのスキン」のデモサイトは、以下のページから確認できます。
デモサイトを参考にカスタマイズしてみてください。
Cocoonの全体設定
Cocoonの全体設定では「文字の大きさ」などブログ全体のデザインに関する設定を行います。
Cocoon設定の【全体】をクリックしてください。
| 設定項目 | 設定方法 |
|---|---|
| サイトキーカラー | デフォルトのままでOK ⇒スキンのデザインが崩れるため |
| サイトキーテキストカラー | デフォルトのままでOK ⇒スキンのデザインが崩れるため |
| フォント | 游ゴシック体、ヒラギノ角ゴシックがおすすめ |
| 文字サイズ | 16pxがおすすめ ⇒パソコン表示の文字サイズのこと |
| 文字色 | #424242 ⇒違和感がない薄い黒色になる |
| 設定項目 | 設定方法 |
|---|---|
| モバイルサイトフォント | 16pxがおすすめ ⇒モバイル表示の文字サイズ |
| 文字の太さ | デフォルトでOK |
| サイトアイコンフォント | Font Awesome5を選択 ⇒Font Awesome5の方がアイコンの種類が多い |
| サイトの背景色 | デフォルトのままでOK ⇒スキンのデザインが崩れるため |
| サイトの背景画像 | デフォルトのままでOK ⇒スキンのデザインが崩れるため |
Cocoonでは、Font Awesomeのアイコンを活用しデザインをカスタマイズできます。
| 設定項目 | 設定方法 |
|---|---|
| サイト幅の均一化 | チェックを入れない ⇒メインカラムの幅が短くなるため |
| サイトリンク色 | #0367bf ⇒リンクの色は青色と認知されているため |
| サイト選択文字色 | デフォルトでOK |
| サイト選択背景色 | デフォルトでOK |
| サイドバーの位置 | サイドバー右を選択 |
設定が完了したら【変更をまとめて保存】をクリックしてください。
Cocoonのヘッダー設定
Cocoonのヘッダー設定では、ヘッダー部分をカスタマイズします。
- Canvaでヘッダーロゴを作成する
- ヘッダーロゴの背景を透明化する
- Cocoonのヘッダーにロゴを設定する
- モバイル用のヘッダーにロゴを設定する
Canvaでヘッダーロゴを作成する
Canvaへ移動して、ヘッダーロゴを作成します。
- 【デザインを作成】をクリック
- 【カスタムサイズ】を選択
- 画像サイズを【幅200px×高さ50px】に設定
- Canvaでヘッダーロゴを作成
ヘッダーロゴが作成できたら、WordPressにメディアからアップロードしてください。
ヘッダーロゴの背景を透明化する
背景の透明化は、以下のサイトで設定できます。
フェニック画像をアップロードするだけで透明化できるよ。
Cocoonのヘッダーにロゴを設定する
Cocoon設定の【ヘッダー】をクリックしてください。
Cocoonのヘッダーは、以下のように設定しましょう。
| 設定項目 | 設定方法 |
|---|---|
| ヘッダーロゴ | Canvaで作成したヘッダーロゴを選択 |
| キャッチフレーズの設置 | 【表示しない】にチェックを入れる |
設定が完了したら、保存ボタンをクリックしてください。
これでヘッダーへのロゴの設置は完了です。
モバイル用にヘッダーロゴを設定する
モバイル表示のヘッダーにロゴを設定します。
Cocoon設定の【モバイル】をクリックしてください。
| 設定項目 | 設定方法 |
|---|---|
| モバイルメニュー | 【ヘッダーモバイルボタン】にチェックを入れる ⇒モバイルのヘッダーにメニューボタンを設置する |
| モバイルボタン① | 【サイトヘッダーロゴを表示する】のチェックを外す ⇒モバイルのヘッダーにロゴを2重で表示させない |
| モバイルボタン② | 【モバイルボタン時コンテンツ下のサイドバーを表示】にチェックを入れる ⇒コンテンツ下にサイドバーコンテンツを表示する |
設定が完了したら【変更をまとめて保存】をクリックしてください。
Cocoonのグローバルメニューの設定
この項目では、ヘッダー下にグローバルナビゲーションを設置する方法を解説します。
- プロフィールページとお問い合わせフォームの作成する
- Cocoonにグローバルナビゲーションを設置する
プロフィールページとお問い合わせフォームを作成する
グローバルナビゲーションに設置する「プロフィールページ」「お問い合わせフォーム」を作成します。
作成方法は、以下の記事を参考にしてください。
Cocoonへのグローバルナビゲーションの設置
WordPressの管理画面から【外観】⇒【メニュー】をクリックします。
メニューは以下のように設定しましょう。
| 設定項目 | 設定方法 |
|---|---|
| 編集するメニューの選択 | 【グローバルナビゲーション（ヘッダーメニュー）】を選択 |
| メニュー名 | 「グローバルナビゲーション」と入力 |
| メニュー項目の追加 | グローバルナビゲーションに設置するコンテンツを選択 |
| メニューの追加 | クリックする |
| 設定項目 | 設定方法 |
|---|---|
| メニュー設定 | 【ヘッダーメニュー】にチェックを入れる ⇒ヘッダー下にグローバルナビゲーションを設置 |
設定が完了したら【メニューを保存】をクリックしましょう。
これで、ヘッダー下にグローバルメニューを設置できました。
Cocoonのサイドバー設定
この項目では、サイドバーに「検索窓」「プロフィール」「カテゴリー」「タグ」を設定する方法を解説します。
WordPressの管理画面から【外観】⇒【ウィジェット】をクリックします。
まずは【サイドバー】と【サイドバースクロール追従】のブロックを削除します。
| 設定項目 | 設定方法 |
|---|---|
| サイドバー | 【ブロック】⇒【削除】をクリック |
| サイドバースクロール追従 | 【ブロック】⇒【削除】をクリック |
続いてサイドバーに「プロフィール」「カテゴリー」「検索窓」「タグ」を追加します。
| 設定項目 | 設定方法 |
|---|---|
| プロフィール | 【サイドバー】⇒【ウィジェットを追加】をクリック |
| カテゴリー | 【サイドバー】⇒【ウィジェットを追加】をクリック |
| 検索 | 【サイドバー】⇒【ウィジェットを追加】をクリック |
| タグクラウド | 【サイドバー】⇒【ウィジェットを追加】をクリック |
Shotaサイドバーでの並び順は手動で変更できます。
サイドバー設定に「検索」「プロフィール」「カテゴリー」「タグ」が表示されたら成功です。
Cocoonのプロフィール設定
サイドバーのプロフィールの設定方法を解説します。
- プロフィール情報を入力する
- プロフィールページへの誘導リンクの作成する
- プロフィール画像をアップロードする
- feedlyとRSSとホームボタンを削除する
プロフィール情報を入力する
WordPressの管理画面から【ユーザー】⇒【プロフィール】をクリックします。
以下の項目を記入しましょう。
- ニックネーム
- ブログ上の表示名
- Twitter URL(任意)
- Instagram URL(任意)
- プロフィール情報
実例を140以上紹介しています。
Shotaしっくりくるニックネームが思いつきますよ。
プロフィールページへの誘導リンクを作成する
【ユーザー】⇒【プロフィール】へとページを進めます。
【プロフィール情報】の項目に、以下のコードを貼り付けてください。
<a href="プロフィールページURL">詳しいプロフィールはこちら</a>“プロフィールページURL”は、作成したプロフィールページのURLを貼り付けましょう。
これでプロフィールページへの誘導リンクの設置は完了です
プロフィール画像をアップロードする
プロフィール画像をアップロードします。
| 設定項目 | 設定方法 |
|---|---|
| プロフィール画像のアップロード | プロフィール画像をアップロードする ⇒画像は幅240px×高さ240pxが推奨サイズ |
| プロフィールページURL | プロフィールページのURLを入力 ⇒名前をクリックするとプロフィールページへ移動する |
設定が完了したら【プロフィールの更新】をクリックしましょう。
feedlyとRSSとホームボタンを削除する
Cocoon設定から【SNSフォロー】をクリックします。
以下の項目のチェックを外し、【変更をまとめて保存】をクリックしてください。
- feedlyフォローボタンを表示する
- RSS購読ボタンを表示する
これでfeedlyとRSSの削除は完了です。
ホームボタンは【ユーザー】⇒【プロフィール】のページに進み、サイトの項目に記載されているURLを消去すれば、削除できます。
これでサイドバーのプロフィールは完成です。
Cocoonの管理者画面設定
Cocoonの管理者画面設定では、pv数などの機密情報を非公開に設定します。
Cocoon設定の【管理者画面】をクリックしてください。
チェックを外す項目は4箇所です。
| 設定項目 | 設定方法 |
|---|---|
| PVエリアを表示する | チェックを外す |
| AMPエリア表示する | チェックを外す |
| チェックツールエリアを表示する | チェックを外す |
| レシポンジブチェックを表示する | チェックを外す |
設定が完了したら【変更をまとめて保存】をクリックしてください。
CocoonのSEO設定
noindexとは、検索結果に表示させないという意味です。
Cocoon設定の【SEO】をクリックしてください。
| 設定項目 | 設定方法 |
|---|---|
| カテゴリーページの2ページ目以降をnoindexとする | チェックを入れる ⇒重複コンテンツのリスク回避 |
そのため2ページ目以降はnoindex指定しましょう。
設定が完了したら【変更をまとめて保存】をクリックしてください。
CocoonのOPG設定
OPGを設定すると、Cocoonと「Facebook」「Twitter」を連携することができます。
| 設定項目 | 設定方法 |
|---|---|
| OPGタグの挿入 | チェックを入れる ⇒チェックを入れないとブログとSNSを連携できない |
| Facebook APP ID | 空欄でOK ⇒IDを入力するとFacebookインサイトを利用できる |
| 設定項目 | 設定方法 |
|---|---|
| Twitterカードタグの挿入 | チェックを入れる ⇒チェックを入れないとTwitterカードを表示できない |
| Twitterカードタイプ | 【大きな画像のサマリー】を選択 ⇒画像があった方が目立つため |
Twitterカードとは、ブログ記事がTwitterでシェアされた時に表示される「記事の要約文とアイキャッチ画像」のことです。
有効化しないと記事がTwitterでシェアされても、カードが表示されません。
必ずチェックを入れましょう。
| 設定項目 | 設定方法 |
|---|---|
| ホームイメージ | オリジナル画像に変更 ⇒トップページがTwitterでシェアされた時に表示される画像 |
デフォルトではCocoonのイメージ画像が表示されているので、オリジナル画像に変更しましょう。
まだ画像を用意できていない場合は、デフォルトのままでOKです。
オリジナル画像の作り方は、以下の記事で解説しています。
設定が完了したら【変更をまとめて保存】をクリックしてください。
Cocoonのアクセス解析・認証設定
| 設定項目 | 設定方法 |
|---|---|
| サイト管理者も含めてアクセス解析する | チェックを外す ⇒自分のアクセスをカウントから除外する |
| 設定項目 | 設定方法 |
|---|---|
| Google Analytics設定 | GA4の測定IDを入力する |
Google Analytics設定は、GA4の測定IDを入力するだけでOKです。
GA4とCocoonを連携させれば、自動的にUAとも連携されるからです。
GA4の測定IDの取得方法は、以下の記事で解説しています。
| 設定項目 | 設定方法 |
|---|---|
| Google Search Console設定 | サーチコンソールのHTMLタグの一部を入力する |
Google Search Console設定では、サーチコンソールで入手したHTMLタグの一部をCocoonに入力します。
<meta name="google-site-verification" content="〇〇〇〇〇〇〇〇〇" />〇〇〇〇〇〇〇〇〇の部分だけ入力すればOKです。
サーチコンソールからHTMLタグを入手する方法は、以下の記事で解説しています。
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonのカラム設定
今回はメインカラムの幅とサイドバーの幅が、以下の値になるように設定します。
- メインカラムの幅：800px
- メインカラムのコンテンツ幅：728px
- サイドバーの幅：350px
- サイドバーのコンテンツ幅：306.8px
カラムの設定方法
| 設定項目 | 設定方法 |
|---|---|
| コンテンツ幅 | 800px |
| コンテンツ余白幅 | 10px |
| コンテンツ枠線幅 | 0px |
| コンテンツ枠線色 | デフォルト設定 |
| 設定項目 | 設定方法 |
|---|---|
| サイドバー幅 | 350px |
| サイドバー余白幅 | 5px |
| サイドバー枠線幅 | 0px |
| サイドバー枠線色 | デフォルト設定 |
| 設定項目 | 設定方法 |
|---|---|
| カラム間の幅 | 5px |
設定が完了したら【変更をまとめて保存】をクリックしてください。
Cocoonのインデックス設定
今回は、Cocoonのトップページをサイト型に設定する方法を解説します。
サイト型への設定方法
| 設定項目 | 設定方法 |
|---|---|
| フロントページタイプ（表示形式） | 【カテゴリごと（2カラム）】を選択 |
| フロントページタイプ（表示カテゴリー） | 表示するカテゴリーにチェックを入れる |
| 設定項目 | 設定方法 |
|---|---|
| 並び順 | 【更新日（降順）】を選択 ⇒記事を更新すると上部に表示される |
| 設定項目 | 設定方法 |
|---|---|
| 投稿関連情報の表示① | 【スニペット（抜粋）の表示】にチェックを入れる |
| 投稿関連情報の表示② | 【投稿日の表示】にチェックを入れる |
| 投稿関連情報の表示③ | 【更新日の表示】にチェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonの投稿設定
ページ送りナビ設定
| 設定項目 | 設定方法 |
|---|---|
| 表示位置 | 【コメント下】にチェックを入れる |
コメント欄が「ページ送りナビ」より下にあると、読者がコメント欄に気づきません。
そのためページ送りナビの表示位置を、コメント欄の下に設定しました。
コメント設定
| 項目 | 設定方法 |
|---|---|
| コメントを表示する | コメント欄がいらない人はチェックを外す |
| コメント欄を作りたい人はチェックを入れる |
コメント欄を設置する人は、必ずスパムコメント対策のプラグインを導入してください。
スパムコメント対策のプラグインでは「Throws SPAM Away」がおすすめです。
- 商用利用可能
- Cocoonで不具合が起きにくい
導入方法は、以下の記事で解説しています。
パンくずリスト設定
| 設定項目 | 設定方法 |
|---|---|
| パンくずリストの配置 | 【メインカラムトップ】にチェックを入れる ⇒記事タイトル上にパンくずリストを表示 |
| 記事タイトル | チェックを外す ⇒パンくずリストが見にくくなるため |
パンくずリストは投稿記事が、どのカテゴリーに属するかを読者に伝えるものです。
読者が気づきやすいように、メインカラムトップに配置しました。
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonの本文設定
この項目では、本文の行の高さや余白の設定が可能です。
本文余白
| 設定項目 | 設定方法 |
|---|---|
| 行の高さ | 1.8line-hight ⇒デフォルト設定 |
| 行の余白 | 1.5em ⇒行間を適切な値に設定 |
「行の高さ」と「行の余白」の違いは上図になります。
投稿情報表示設定
| 設定項目 | 設定方法 |
|---|---|
| 投稿関連情報 | 【投稿日の表示】にチェックを入れる |
| 【更新日の表示】にチェックを入れる | |
| 【投稿者名の表示】はチェックを外す |
投稿関連情報とは、記事上部に表示される投稿日や更新日のことです。
投稿者名は不要なのでチェックを外しましょう。
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonの目次設定
この項目では、目次の表示位置方法に関する設定を行います。
| 設定項目 | 設定方法 |
|---|---|
| 目次を表示する | チェックを入れる |
| 表示ページ | 【投稿ページ】にチェックを入れる ⇒固定ページには不要 |
固定ページに目次は不要なので、チェックを外しましょう。
| 設定項目 | 設定方法 |
|---|---|
| 目次表示の深さ | H3見出しまで |
目次の深さは「H3見出しまで」に設定しましょう。
設定が完了したら【変更をまとめて保存】をクリックしてください。
CocoonのSNSシェアボタンの設定
コンテンツ下にSNSシェアボタンがあるので、記事タイトル下には不要です。
| 設定項目 | 設定方法 |
|---|---|
| メインカラムトップシェアボタンを表示 | チェックを外す |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonの画像設定
| 設定項目 | 設定方法 |
|---|---|
| 本文上にアイキャッチを表示する | チェックを入れる ⇒本文記事上にアイキャッチ画像が自動設定される |
| アイキャッチラベルを表示する | チェックを入れる ⇒アイキャッチ画像にカテゴリーが表示される |
| アイキャッチの中央寄せ | チェックを入れる |
| 設定項目 | 設定方法 |
|---|---|
| アイキャッチ自動設定を有効にする | チェックを外す |
| 画像の囲み効果 | 【なし】にチェック入れる |
| 画像の拡大効果 | 【baguette Box（軽量・スマホ向け）】にチェックを入れる ⇒画像をクリックすると大きく表示される |
| 設定項目 | 設定方法 |
|---|---|
| サムネイル画像 | 【約5:8(黄金比)】にチェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonのコメント設定
読者がコメント欄と認識できるように、常に開放するように設定します。
| 設定項目 | 設定方法 |
|---|---|
| コメント入力欄表示 | 【常に表示】にチェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
Cocoonのフッター設定
この項目では、フッターに「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」を設置する方法を解説します。
- HTMLサイトマップを作成する
- プライバシーポリシーを作成する
- フッターに固定ページを設置する
- フッターをカスタマイズする
HTMLサイトマップを作成する
HTMLサイトマップには「記事のタイトル」と「内部リンク」がカテゴリーごとに表示されます。
そのため読者は、読みたい記事をすぐに探すことができます。
Cocoonでは固定ページに「ショートコード」を呼び出すだけで、HTMLサイトマップを作れます。
WordPressの管理画面から【固定ページ】⇒【新規追加】をクリックしてください。
固定ページの投稿画面が表示されたら、以下のように設定しましょう。
| 設定項目 | 設定方法 |
|---|---|
| タイトル | 「サイトマップ」と入力 |
| 投稿画面 | ショートコードを呼び出し[sitemap]と入力 |
| パーマリンク | 「sitemap」と入力 |
| SEO設定① | 【インデックスしない(noindex)】にチェックを入れる ⇒Googleにサイトマップをインデックスさせないため |
| SEO設定② | 【リンクをフォローしない(nofollow)】にチェックを入れる ⇒クローラーにサイトマップを辿らせないため |
サイトマップ設定が完了したら【公開】をクリックしましょう。
プライバシーポリシーを作成する
ブログをWeb上で公開する限り、プライバシーポリシーの設置は義務になります。
ShotaGoogleアドセンス合格にはプライバシーポリシーの設置が必須です。
以下の記事では、プライバシーポリシーをコピペで作る方法を解説しています。
フッターに固定ページを設置する
WordPressの管理画面から【外観】⇒【メニュー】をクリックします。
メニュー設定では、以下のように設定してください。
| 設定項目 | 設定方法 |
|---|---|
| 編集するメニューの選択 | フッター(フッターメニュー)を選択 |
| メニュー項目を追加 | 「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」にチェックを入れる |
| メニューに追加 | クリックする |
| メニュー設定 | 【フッターメニュー】にチェックを入れる |
【メニューを保存】をクリックすれば完了です。
フッターをカスタマイズする
【Cocoon設定】⇒【フッター】をクリックしましょう。
フッター設定では、以下のように設定してください。
| 設定項目 | 設定方法 |
|---|---|
| フッター表示タイプ | 【メニュー＆クレジット(左右)】にチェックを入れる |
| フッターメニュー幅 | 【メニュー幅にテキストを合わせる】にチェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
フッターに「サイトマップ」「プライバシーポリシー」「お問い合わせフォーム」が設置されていることを確認しましょう。
Cocoonのエディター設定
- Gutenbergエディター
- ビジュアルエディター
おすすめはGutenbergエディターです。
Gutenbergエディターの方が、記事装飾を短時間で終わらせることができるからです。
| 設定項目 | 設定方法 |
|---|---|
| Gutenbergエディターを有効にする | チェックを入れる |
| エディターにテーマスタイルを反映させる | チェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
WordPressの初期設定
| 設定項目 | 進捗度合い | 重要度 |
|---|---|---|
| ①初期URLの確認 | 完了 | 高 |
| ②WordPressの常時SSL化設定 | 完了 | 高 |
| ③総合セキュリティプラグインの導入 | 未完 | 高 |
| ④WordPressのニックネームの変更 | 未完 | 高 |
| ⑤不要な初期プラグインの削除 | 未完 | 低 |
| ⑥WordPressのテーマ設定 | 完了 | 高 |
| ⑦WordPressの一般設定 | 未完 | 高 |
| ⑧WordPressの投稿設定 | 未完 | 低 |
| ⑨WordPressのディスカッション設定 | 未完 | 低 |
| ⑩WordPressのメディア設定 | 未完 | 高 |
| ⑪WordPressのパーマリンク設定 | 未完 | 高 |
| ⑫サンプルページの削除 | 未完 | 中 |
| ⑬プライバシーポリシーの設定 | 完了 | 高 |
| ⑭お問い合わせフォームの設置 | 完了 | 高 |
| ⑮アナリティクス、サーチコンソールとの連携 | 完了 | 高 |
| ⑯WordPressのプロフィール設定 | 完了 | 高 |
| ⑰WordPressのプラグイン設定 | 未完 | 高 |
| ⑱ブログ収益化ツールの導入 | 未完 | 中 |
- WordPressのセキュリティを強化する
- ブログのSEOを強化する
- WordPress運営後の不具合を予防する
重要度の高いものから、じっくり設定しましょう。
WordPressの初期設定については、以下の記事で解説しています。
Cocoonの応用的な使い方
Cocoonの初期設定が終わった後に知っておくべき、応用的な使い方を解説します。
Cocoonの吹き出し設定
WordPressの管理画面から【Cocoon設定】⇒【吹き出し】をクリックします。
デフォルトで設定されている吹き出しは、使わないので全て削除します。
次に【新規追加】をクリックします。
吹き出し設定は以下のように設定します。
| 設定項目 | 設定方法 |
|---|---|
| タイトル | 例：冒頭の挨拶 ⇒何でもOK |
| 名前 | 例：フェニック ⇒アイコン下に表示される名前を入力 |
| アイコン画像 | 幅と高さが160px以上の画像を設定 |
| 設定項目 | 設定方法 |
|---|---|
| 吹き出しスタイル | デフォルトでOK |
| 人物位置 | 用途によって右と左を使い分け ⇒アイコンを表示するポジションを設定 |
| アイコンスタイル | 四角(枠線なし)がおすすめ |
| TinyMCE | チェックを入れる |
設定が完了したら【保存】をクリックしてください。
投稿画面での吹き出しの使い方
ブロックを表示させて「吹き出し」と入力します。
表示された吹き出しボタンをクリックしましょう。
【人物】の項目から作成した吹き出しを選択します。
投稿画面に吹き出しアイコンが表示されます。
Cocoonのファビコン設定
ファビコンは、以下の場面で表示されます。
- プラウザのタブ
- ブックマークバー
- モバイルでの検索結果
Cocoonを導入したら、必ずファビコンは設定しましょう。
ファビコンの設定方法
WordPressの管理画面から【外観】⇒【カスタマイズ】をクリックします。
Cocoon Childを選択し【サイト基本情報】をクリックしましょう。
【サイトアイコンを選択】をクリックします。
【ファイルをアップロード】⇒【ファイルを選択】をクリックしましょう。
ファビコンに使用する画像を選択します。
【画像切り抜き】をクリックすれば、ファビコン設定は完了です。
Cocoonのブログカード設定
ブログカードで内部リンクを設置すると、目立つためクリック率アップが期待できます。
Cocoon設定の【ブログカード】をクリックします。
内部ブログカードの設定方法
| 設定項目 | 設定方法 |
|---|---|
| ブログカードを表示する | チェックを入れる ⇒チェックを入れないとブログカードが表示されない |
| サムネイルスタイル | 【左側】にチェックを入れる |
| 日付表示 | 【更新日】にチェックを入れる ⇒記事の鮮度をアピールできる |
| 新しいタブで開く | チェックを入れない ⇒記事からの離脱を防止するため |
外部ブログカードの設定方法
| 設定項目 | 設定方法 |
|---|---|
| ブログカードを表示する | チェックを入れる ⇒チェックを入れないとブログカードが表示されない |
| サムネイルスタイル | 【左側】にチェックを入れる |
| 新しいタブで開く | チェックを入れる ⇒外部リンクは新しいタブで開くことが多い |
| キャッシュの保管期間 | デフォルト(30日)でOK ⇒30日経過するとブログカードが自動更新される |
| キャッシュ更新モードを有効にする | チェックを入れる ⇒読者がブログカードをクリックするとブログカードが自動更新される |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
投稿画面でのブログカードの使い方
投稿画面で【＋】をクリックします。
検索窓にブログカードと入力し【ブログカードブロック】をクリックしましょう。
以下のように設定します。
- リンクマークをクリック
- ブログカードのページURLを入力
- 表示されたリンクをクリック
画面右側の【ラベル】から表示させるラベルを選択します。
これでブログカードは完成です。
プレビューで、ブログカードの表示内容に間違いがないのか確認しておきましょう。
Cocoonのおすすめカード設定
Cocoonのおすすめカードを設定すると、グローバルメニュー下に読者に読んでほしい記事を表示させることができます。
Shotaレビュー記事など収益性の高い記事を表示させましょう。
おすすめカードの設定方法（前編）
WordPressの管理画面から【外観】⇒【メニュー】をクリックします。
【新しいメニューを作成しましょう。】をクリックしてください。
メニュー名に「おすすめカード」と入力し【メニューを作成】をクリックします。
【メニュー項目を追加】では、以下のように設定します。
- 投稿を選択
- おすすめカードに表示させる記事を選択
- 【メニューに追加】をクリック
設定が完了したら【メニューを保存】をクリックしましょう。
おすすめカードの設定方法（後編）
Cocoon設定のおすすめカードをクリックします。
| 設定項目 | 設定方法 |
|---|---|
| おすすめカード表示 | 【フロントページのみで表示】にチェックを入れる ⇒ブログのトップページにのみに表示させる |
| 表示スタイル | 【画像のみ】にチェックを入れる ⇒他の選択肢も試して最適なデザインを選んでください |
| おすすめカード毎に余白を設ける | チェックを入れる ⇒おすすめカードが見やすくなる |
| おすすめカードの左右に余白を設ける | チェックを入れる |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
これでおすすめカードの設定は完了です。
Cocoonのアピールエリア設定
Cocoonでアピールエリアを設定すると、トップページにメインビジュアルとおすすめ記事へのリンクを設定できます。
アピールエリアの設定方法
Cocoon設定のアピールエリアを選択します。
| 設定項目 | 設定方法 |
|---|---|
| アピールエリアの表示 | 【フロントページのみで表示】にチェックを入れる ⇒ブログのトップページにのみ表示させる |
| 高さ | 200px |
| エリア画像 | アピールエリアに利用する画像を選択 |
| アピールエリア背景画像の固定 | チェックを入れる ⇒パソコン表示でメインビジュアルがおしゃれに表示される |
| 設定項目 | 設定方法 |
|---|---|
| エリア背景色 | デフォルトでOK |
| テキストメッセージエリアを表示する | チェックを入れる |
| タイトル | 空欄にする |
| 設定項目 | 設定方法 |
|---|---|
| ボタンメッセージ | アピールエリアに表示させる文章を入力 ⇒ボタンに文章が表示 |
| ボタンリンク先 | アピールエリアからのリンク先を入力 ⇒ボタンにリンク先URLが設定 |
| ボタンリンクの開き方 | 【同じタブで開く】を選択 |
| ボタン色 | 好みの色を選択 |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
これでトップページにアピールエリアを設定できました。
Cocoonのカルーセル設定
カルーセルとは、複数の記事を左右に移動して表示させる方法です。
読者の目に止まりやすいため、記事のクリック率アップが期待できます。
カルーセルの設定方法
Cocoon設定のカルーセルを選択します。
| 設定項目 | 設定方法 |
|---|---|
| カルーセルの表示 | 【フロントページのみで表示】にチェックを入れる ⇒ブログのトップページにのみ表示させる |
| スマートフォンで表示 | チェックを入れる |
| 表示内容 | 【全期間で集計した人気記事を含める】にチェックを入れる ⇒カルーセルに表示させたい記事を選択してください |
| 設定項目 | 設定方法 |
|---|---|
| カルーセルの並び | 【ランダム】にチェックを入れる |
| 最大表示記事数 | 12記事 ⇒12記事が最小 |
| オートプレイを実行 | チェックを入れる ⇒カルーセルが自動的に送られる |
| オートプレイインターバル | 3秒を選択 ⇒3秒が最小 |
設定が完了したら【変更をまとめて保存】をクリックしましょう。
これでトップページにカルーセルを設定できました。
Cocoonの囲みボックスの使い方
Cocoonには、デフォルトで8種類の囲みボックスが用意されています。
- アイコンボックス
- 案内ボックス
- 白抜きボックス
- 付箋風ボックス
- タグボックス
- 見出しボックス
- ラベルボックス
- タブ見出しボックス
そのため、記事を簡単に装飾できます。
投稿画面での囲みボックスの使い方
まず以下の手順で囲みボックスを記事に挿入します。
- 画面左上の【＋】を選択
- 検索窓にボックスと入力
- 使用する囲みボックスを選択
囲みボックスを挿入できたら【ブロック】を選択し、ラベルや色を設定してください。
Shotaお疲れ様でした。これでCocoonの解説は終了です。
Cocoonのインストールと使い方が分かったら
ブログツールを導入すると、より確実に稼げます。
以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。
ぜひチェックしてみてください。
＞＞ブログアフィリエイト収益化を加速させるおすすめツール20選
Cocoonのインストールと使い方のまとめ
今回はCocoonのインストール方法と初期設定について解説しました。
- Cocoonは「無料」「日本語対応」「機能性の高さ」が特徴のWordPressテーマ
- Cocoonは子テーマを有効化する
- Cocoonはスキンがあるため、初期設定とカスタマイズが簡単
Cocoonの準備ができたら、さっそく記事を執筆しましょう。
以下の記事では、WordPressでのブログ記事の書き方を解説しています。
ぜひ参考にしてください。
参考サイト
コメント