【設定10分】Cocoonを導入したら最初に設定すべきこと

1番女の子 Cocoon

Cocoonが無料なんて神がかってる!?

リス太もものすごくお世話になっているワードプレステーマ「Cocoon」の何がすごいって、

・プラグイン、PHP不要でたいてい何でもできる
・シンプルなデザイン
・豊富な機能
・SEOに強い
・アフィリエイトに強い
・そして無料!

って感じ。

リス太
リス太

こりゃすごいわ。

シンプルデザインのテーマだと、カスタマイズ性の高さが売りなので、プラグインのお世話になったり、PHPを触らないと思うようなことが実現できないことが多いです。

逆にデフォルトでデザインや機能がいろいろカスタマイズできるテーマとなると、たいていは有料

比べて、Cocoonは無料

Cocoon作者のわいひらさんはやはり神ですね!

スポンサーリンク

Cocoon使いこなす前にあきらめてない?

叫ぶ女の子

さて、そんな最強テーマCocoonですが、今度は機能が豊富すぎて、慣れるまではどこをどういじっていいのかよくわからないのもまた事実です。

なので、Cocoonをせっかく導入したのに、良さを感じる前に違うテーマに切り替えちゃう人もいますよね。あれ?噂と違うぞって。

でもね。それ、最低限の見た目を整えるための初期設定をしてないからだとおもうんですよね。

そこで、Cocoonを導入したら最初に設定すべきことをお伝えしますよ!

そんなわけで、この記事の対象は

・Cocoonを導入しようと思っている人
・Cocoon導入したけど、設定が面倒な人
・Cocoon導入したけど、デザインがイマイチだと思う人

です!

まず他の無料テーマとの違いを知ろう

CocoonはSEO、解析に強い

マーケティング

いままで他の無料テーマを使っていた人は、SEO対策のために「All In One SEO」などのSEO対策プラグインを使っていた人も多いのではと思います。

また、カテゴリーのトップページにメタディスクリプションを生成するためにPHPを編集した人も多いでしょう。

この辺はすべてCocoonのデフォルトの機能で実現できます。

つまりプラグインがいらないってこと!

さらにGoogleタグマネージャーやGoogleアナリティクスもコンテナIDやトラッキングIDさえわかればCocoonの設定画面から一発導入可能です。

シンプルでカスタマイズ性の高いデザイン

イケメンボーイ

デザイン的には非常にシンプルですよね。

こちらはカスタマイズ性の高さが売りなので、シンプルならシンプルなだけ、カスタマイザー魂が震える人はいいですが、デザインこそテーマに任せたいって人にはシンプルすぎるかもですね。

でもそれは、デフォルトのスキンだからです。

Cocoonには豊富なデザインスキンが多く用意されているので、Cocoon設定画面で好きなスキンを適用するだけで、自分好みの見た目に変更可能です。

そこからカスタマイズするのが王道ですかね。

スポンサーリンク

Cocoonを導入したら最初にやるべきこと

Cocoon

さぁ、Cocoonの良さがさらにわかってきたところで、Cocoonを導入してすぐに設定した方が良い部分のみピックアップしてお伝えします。

まず、ワードプレス の管理画面をパッと見たときに、初期で触る必要があるのは次の3つ。

・外観→メニュー
・外観→カスタマイズ
・Cocoon設定

です。

WPのメニュー

見ていきましょう!

メニュー設定

ここはちょっと注意なのですが、Cocoonのデフォルトの設定だと、カテゴリーの説明文がブログに表示されてしまうので、恐ろしい見た目になるんですね。

一瞬引くくらい笑

なので、メニュー画面から該当のカテゴリの詳細を開いて「説明」に記載してある内容を削除しましょう。

詳しくは、「Cocoon備忘録|Cocoon導入でハマったことのメモ」を参考にしてくださいね!

カスタマイズ

外観→カスタマイズからしか設定できないのが、ファビコンに設定する画像です。
「サイト基本情報」の中に設定画面があります

リス太
リス太

一番下ですね。

ちなみにファビコンっていうのは、

ブラウザのタブに表示される小さいアイコン

ですね。
これです。

ファビコン

設定したい画像を選択すればOKです。

Cocoon設定

最後に、初心者を悩ませる「Cocoon設定」へ。

リス太も初めは戸惑いました。

リス太
リス太

だって、タブ多すぎでしょ?

でも導入直後は全部をさわる必要なしです。

ポイントは、

①「どこからカスタマイズしようかな」を判断できる最低限の見た目にする
SEO周りと解析周りの設定をする

これだけでOKです。

最低限整えば、その後は自分の判断でここ変えたいな~って思った時に重点的に該当のタブ内の設定をいじって確認してけばいいです。

リス太
リス太

ほんとに色々できるからね。
細かいカスタマイズは別の記事で!

さて、Coconn設定で初期に使うべきタブはこれです。

Cocoon設定

赤枠で囲ったとこだけ設定しましょう。

6つならたいしたことないでしょ!

スポンサーリンク

ヘッダー

まず、ヘッダータブ。

ヘッダーレイアウトを変更します。

ヘッダーメニュー設定

デフォルトのままでもいいですが、リス太オススメは、「センターロゴ(スリムメニュー)」か「センターロゴ(スリムトップメニュー)」です。

スッキリした見た目になります。

あと、ブログのロゴが用意できている人は、「ヘッダーロゴ」を設定しましょう。

ヘッダロゴ設定

時々キャッシュの関係でエラーが出ちゃってうまくロゴが反映されないケースがあるので、その時はキャッシュを削除すればOKです。

エラーが出た時の対応方法は、「Cocoon備忘録|Cocoon導入でハマったことのメモを参考にしてください。

スキン

お次はスキンを選びます。

たくさんのデザインスキンが用意されているのもCocoonのすばらしいところ。

しかも、随時選べるスキンが増えてます。

スキン選択

 

リス太
リス太

ごめんなさい。画像は一部だけですが、2018年11月30日現在で35個のスキンから選べますよ。すげ~!!

リス太のオススメは、「モダンブラック」と「COLORS」シリーズですね。

1カラムの「Metal Styles」もスッキリしてていい感じ。

まぁ、お好みで。いつでも変えられますしね。

リス太
リス太

ちなみに「ぐろすめ。」はモダンブラック!

タイトル

今度は重要なタイトル設定ですね。

トップページのタイトルやディスクリプションの設定や投稿、固定ページ、カテゴリーページのSEO設定ができます。

必要なテキストを入れていきましょう。

タイトル設定

通常、プラグインやPHPをさわらないと対応できないこの辺の設定ができるのはCocoonの大きな魅力。

注意点は、投稿、固定ページとカテゴリページ両方とも、「メタディスクリプションの出力」と「メタキーワードの出力」にチェックが入っていることです。

メタ設定

リス太
リス太

これであっさり完了。

SEO

ここでは、タグ周りの設定を行います。

URLの正規化にとって重要なcanonicalタグの設定や一覧ページ、分割ページを作った時に大切なnext/prevタグの設定までここでできちゃいます!

リス太
リス太

いままでのブログ運営の苦労はなんだったの?って思っちゃうほどすばらしい機能!

SEO設定

基本的にこのSEO設定では「カテゴリページの2ページ目以降をnoindexとする」以外は、オールチェックありでOK!

リス太
リス太

SEOに詳しい人、こだわりがある人は自由にお任せします!

スポンサーリンク

OGP

ソーシャル周りの設定ですね。

チェックはすべて入れて、ホームイメージの画像を設定したらOK。

OGP設定

アクセス解析・認証

最後にアクセス解析ツールなどの各種GoogleサービスIDを入力していきます。

まず、Googleタグマネージャー。

ちなみに、Googleタグマネージャー(GTM)は、

タグをサイトに反映させるだけで、あとはいろんなタグをタグマネージャーに設定するだけでOKになる便利なタグ管理(ワンタグ)ツール

です。

Googleタグマネージャーを使っている人は、タグマネージャーのコンテナIDを「タグマネージャID」に入力しましょう(GTM-xxxxxxxってやつです)。

また、投稿ページをAMP対応させている人は、「AMP用タグマネージャ ID」にも入力します。

GTM設定

この時、AMP用のタグマネージャIDと通常のタグマネージャIDは別のものを設定します。
そもそもGoogleタグマネージャーでアカウントを作成する時点で、WebサイトとAMPサイトは別に設定しますので、当然ですね。

リス太
リス太

ちなみにAMPってのは、Accelerated Mobile Pagesの略で、簡単に言うとGoogleのサーバにページごとキャッシュされるんで、表示速度が超早いんです!

AMPの詳しい解説は「AMP対応しやすいテーマを選ぶ」を参考に!

さて、Googleタグマネージャーを使ってない人は、その下の「Google Analytics トラッキングID」にアナリティクスのUA-IDを入力しましょう(UA-00000000-0ってやつです)。
Googleアナリティクス設定

ちなみにGoogleタグマネージャーを使っている人は、タグマネージャー側にアナリティクスの設定を行うので、Cocoon設定でのGoogle Analytics設定は不要ですよ!

最後に「Google Search Console ID」の入力です。
サイト認証IDは、HTMLタグでサイトの所有権確認をするときにでてくる、

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

ってタグの中の「XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX」の部分です。

こちらを入力しましょう。

GSC設定

以上で、Cocoonを導入したら最初にやるべきことは完了です。

見た目をチェックしてみてくださいね。

リス太
リス太

実は、すでになかなかの完成度のブログになっているはずですよ!

おわりに

「Cocoonを導入したら最初に設定すべきこと」でした。

初期の準備ができたら、あとは自由に自分好みのカスタマイズをしていってください!

でも、この時点で十分なデザイン性は確保できてるんじゃないかなと思いますけどね!

見た目が整えば、あとは自分のやりたいように、Cocoon設定やCSSなどを編集してどんどんカスタマイズしていけば、相当イケてる(古い?)ブログが出来上がるはずです!

リス太
リス太

細かいカスタマイズについては別記事で!

楽しんでカスタマイズしてくださいね☆