【初心者必見】Cocoon設定の仕方を徹底解説。Cocoonを使いこなそう！(初期設定)

今回はWordPressで人気の無料テーマである「Cocoon」の設定方法について解説していこうと思います。

実際自分も使っていましたが、とてもいいテーマです。このクオリティーが無料で使えることが奇跡です。カスタマイズも簡単で多くの種類があります。

またユーザーが多いので、調べるとすぐにCocoonに関する記事がでてきます。悩みがあってもすぐ解決します。

しかし、Cocoonの設定方法には説明書のようなものはありません。なので、初心者のうちは調べまくって使い方をマスターするしかありません。

そこで、Cocoon設定の仕方をまとめて、自分が体験したことをふまえて解説していこうと思います。

Cocoonのサイトを参考にしています。(Cocoonのマニュアルです)

Cocoonとは?

Cocoonは非常にシンプルで、どのウェブサイトにも合わせやすいテーマとなっています。繭をイメージしており、包み込むような温かいイメージをコンセプトとして作成されています。ただシンプルで利用しやすいだけではなく、SEO対策が可能になっており、導入により、検索順位を上位に表示させやすくなったり、GoogleアドセンスやAmazonのリンク貼り付けを簡単に行う事ができたりと、充実した機能を兼ね揃えています

SEOの教科書より引用

上記の通りすばらしいテーマです。

無料、デザインがいい、表示速度も速い、簡単な設定、サポートがいい、カスタマイズがしやすいなどなど多くのメリットがあり、有料テーマに劣らないものになっています。

初心者が1回は使ったことがあるんじゃないかと思ってしまうほど、多くの方に利用され、愛されています。

Cocoonが100万ダウンロードになってた。 pic.twitter.com/JR70wMUDGI

— わいひら@寝ログ (@MrYhira) February 19, 2021

なんと100万ダウンロード!!

人気がどれだけあるのかが分かりますね。

重要なCocoon設定

では早速Cocoon設定を解説していこうと思います。

まず、なぜマニュアルがあるのにこんな記事を書いているのか？

それはマニュアルの情報が多すぎて設定するべきポイントが抑えずらいからです。なので、ここでは重要な設定を詳しく説明していきたいと思います。

スキン

Cocoonには選択するだけでブログのデザインをガラッと変えることができる「スキン」という機能があります。どれもおしゃれで、有料テーマなのでは！？と思ってしまうほどすばらしいです。

左側にカーソルを合わせるとそのデザインを見ることもできて、自分の好きなスキンを簡単に選ぶことができます。

全体がまとまっていて、派手すぎないデザインがとてもよかったです。

全体

ここで自分のサイトのポイントとなる色を決めることができます。自分の好きな色や読者が見やすいと思うような色を選ぶといいと思います。(キーカラー)

サイドバーの位置や表示状態もここで確認できます。

ヘッダー

ここではサイトの頭になるヘッダーを設定できます。画像を選択したり、高さ、色など細かな設定もできます。

画像に関してはCanvaというサイトで作るのをおすすめします。アイキャッチ画像などもここで作れるので便利です。他にもロゴを作れるサイトはいくつもあるので調べてみてください。

設定するときは、モバイルで見やすいものを選ぶのがいいです。結構パソコンで見たヘッダーとモバイルで見るヘッダーが違うことがあるので、注意してください。

広告

Cocoonでは簡単にGoogleアドセンス広告を貼ることができます。アドセンスの画面でコピーした広告コードを「広告コード」というところに貼り付けます。

広告の位置なども設定できるので、自分の好きなところに貼って収益化していきましょう。

注意　　アドセンスの審査用コードはここに貼り付けません。Cocoon設定→アクセス解析・認証というところに貼り付けます。

審査に通ったあとは削除してください。

タイトル

フロントページの設定ができます。GoogleやYahoo！などで検索したときに出てくるページになります。

①タイトル

②メタディスプリクション

ここです。

メタディスプリクションで表示される文字は120文字前後まで、スマホでは約50文字の表示になります。

分かりやすく自分のブログの特徴や何を発信しているのかを明確に伝えられるように書きましょう。

ブログカード

ブログカードは結構頻繁に使う機能だと思うので、有効にしておいていいと思います。

ブログカードの設定は自分が好きなように設定してください。

結構ブログによって細かい設定は異なっていると思います。ブログカードには多種のラベルが用意されているので、「合わせて読みたい」「関連記事」など記事にあったラベルをつけることができます。

アピールエリア

アピールエリアは集客記事への流入を増やしたり、アクセス数を増やすのに繋がります。ですが、スマホでは少し見にくくなったり、デザインが微妙なので好き嫌いが別れます。

1番集客がある記事を紹介したいときには役に立ちます。1回試してみてから使ってみてください。

おすすめカード

Cocoonのおすすめカードは使って損はないと思います。おすすめしたい記事やカテゴリーをブログの顔であるヘッダー周辺に配置でき、良い第1印象を与えることができます。

「外観」→「メニュー」から新しいメニューを作成しましょう」をクリックしておすすめカード用のメニューを作ります。

そしてここで選択します。

表示スタイルも選択によってはおしゃれにできるので付けたほうがいいです。

カルーセル

カルーセル とは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。 Webページなどに設けられる画像などの表示領域で、内容を左右に移動して切り替えられるものをこのように呼ぶ。 コンピュータの操作画面を構成する要素の一つで、写真など複数の項目が横に並んでおり、これを マウス 操作やタッチ操作で左右にスライドして中央に表示される項目を次々に入れ替えていくことができるものをカルーセルという。

IT用語辞典より引用

これもおすすめカード同様に記事を目立たせて集客力アップに繋がると思います。

「オートプレイを実行」を有効にしておくと自動で回転してくれるので、記事を順番に紹介してくれますし、ブログに動きがでて目を引きやすくなります。

ボタン

ボタンを記事に貼って他の記事に誘導することができます。大きさや角丸、ボタンの色、ボタンの文字の色を変えることができ、光らせることもできます　注意　　(下のボタンを押すと記事の最初に戻ってしまいます)

こちらはSWELLでのボタンですが、こんな感じにできます。

カスタマイズで影をつけたり自分好みにできます。調べてやってみてください。

モバイル

これはヘッダー上に設置するのをおすすめします。

こちらもモバイルメニュー用のメニューを作って選択してください。

画面の下にもつけることができます。

AMP

AMP 【Accelerated Mobile Pages】. AMP. 【. Accelerated Mobile Pages. 】. AMP とは、米 グーグル （Google）社が推進する、軽量な モバイル 向けWebページの記述形式および配信方式。. 同社の配信サーバなどを介して携帯端末に高速に コンテンツ を届けることができる。

IT用語辞典より引用

簡単に言うとスマホでの表示を高速化しようってことです。スマホでは表示速度が不安定なので、スマホ向けにデータを軽くして動作を軽くしていくというものです。

これは有効化しておいて良いと思います。しかし、注意点もあるので確認しておいてください。

SNSフォロー

これだけのSNSを設定することができます。自分が使っているSNSとブログをつなげて固定のアクセスを確保することができます。もしこの中で何もやっていないという人は何か始めた方がいいです。

おすすめはTwitterかinstagramです。ブログ用に新たにアカウントを作るのもありです。

そのままでいいCocoon設定

もし変更したい場合は下手にいじらずにCocoonのホームページを見てから設定を変更してください。

最後に

今回はCocoonの設定について解説してきました。有料級のテーマであるCocoonでは設定も分かりやすく、調べれば大体問題は解決するので初心者の私でも迷わずに設定することができました。

自分だけの最強設定にして他のブログとの差別化を意識してみてください。