Cocoon導入!最低限必要な初期設定のアレこれ

Cocoon

はい!ということでままん(@maman_selfish)です!

既存ブログをCocoonに移行する際に、移行当日にここまでは設定しておきたい!と思うポイントに絞って設定方法を解説していきます。

ところで、移行作業に入る前に準備しておきたいものの準備はできていますか?

作業時間の短縮につながりますので、確認しておきましょうね。

Cocoonを導入したい!既存のブロクから移行する時に準備しておきたいアレこれ
やほ!ままん(@maman_selfish)やで☆ 先日の夜中に突如ブログテーマをCocoonに移行したわけですが、前のこえだめをご存知の方はイメージがかなり変わっていると感じていただけることと思います。 ゆるゆると、ちょっと女...
スポンサーリンク

Cocoon子テーマを有効化する

まぁ!まずはここからですよね。

Cocoonの親テーマと子テーマをダウンロード&インストールして、子テーマを有効化させます。

親テーマと子テーマどちらもインストールしますが、有効化させるのは子テーマですので気をつけましょう。

このあたりは既存ブログのテーマでも経験済みの方が多いでしょうからササッと終わります。笑

Cocoonのダウンロードはこちら

Cocoonの設定画面について

子テーマを有効化してCocoon移行が済んだら各種設定ですね。

Cocoonは設定画面がちょっと特殊で、Cocoon設定を開けばタブでいろんなところを一気に設定できます。

いや・・・便利か!

最初は慣れないかもしれませんが、めっちゃ便利です。

この1番上のCocoon設定でタブが出てきます。

こんな感じ。

ひとまず設定に必要なところが揃っているので、とっても便利です。

では、実際に設定を進めていきましょう。

スポンサーリンク

まずは広告設定

Cocoonを導入したらまずやっておきたいことですが、いろいろいじり倒したい気持ちを抑えて、ひとまず広告設定です。

以下、簡単ですが手順を書いていきます。

広告コードを貼る

Cocoon設定のタブから広告を選ぶと設定画面に進めます。



あ、なんか説明いらないかも。笑

画像にあるところにGoogleAdSenseの広告コードを貼りましょう。

事前準備の記事にも書きましたが、基本的にはレスポンシブ広告コードと、必要であればリンクユニット広告コードが必要です。

Cocoonでは広告のAMP対応も勝手にやってくれます。
特にコードをいじることなく、コピーした広告コードをそのまま貼ればOKです。

広告表示を設定する

コードを設定したあとは、どこに表示させるかを指定しましょう。

黄色のビックリマークが出ている項目については、ナビゲーションメニューにかかるかもしれんから気をつけるんやぞ!アドセンスポリシーにひっかかるやで!Googleさん恐ろしいやで!ということです。

このようにチェックを入れるだけで簡単に設定できるので、まぢ簡単すぎて神だなと思います。

また、表示させる広告の種類も選ぶことができるので、好みのものを選んでおきましょう。

基本的に選べる広告の種類は以下の通りです。

サイドバーボトムはこんな感じです。

リンクユニットは広告コードを設定しないと表示できないので、表示させたい場合は必ずリンクユニットの広告コードを設定しましょう。

本文の広告設定について

選ぶだけで表示させることができる広告設定ですが、設置場所の解説をしておこうと思います。

タイトル上広告
記事タイトル
タイトル下広告
アイキャッチ画像やSNSボタン
本文上広告
本文(導入文)
本文中広告(h2タグの上)
本文
本文下広告

設置場所のイメージはこんな感じで、すべて表示させるとかなりウザイです。いや、相当ウザイです。

また、本文中広告についてはすべてのh2タグの上に表示させることも可能ですが、詳細設定から指定するようになります。

チェックを外した場合は1番最初のh2タグの上(目次の上)に広告が入るようになりましたよ。

また、本文での広告設定については全体のバランスも考えて自分で決めたい方もいらっしゃいますよね。

そんな方は、ショートコードを活用しましょう。


各ブログテーマでも同じような機能がある場合がありますが、その場合はタグがそのまま文章として表示されてしまうので、手直しが必要です。

手直しついでにショートコードに書き換えましょう。

ちなみにショートコードも表示させる広告の種類が選べます。
本文内で使用するので、記事内広告あたりがいいと思いますよ。

部分的に広告を表示したくない場合

Cocoonさまざまな部分において広告の表示を一括で管理できますが、このページはAdSense広告を貼りたくない!というページがある場合もありますね。

そういった場合に使えるのが広告除外設定です。

例えば、アドセンスポリシーに触れそうな内容の記事(アダルト・お酒・タバコ・ギャンブルなど)を書いた時にそのページだけは除外しておきたいとか、そういった内容のカテゴリーを作った場合などに有効です。


こんな感じで、記事を指定したりカテゴリーを指定したりすれば広告表示が除外されます。

また、記事単体の広告除外は投稿画面からでも指定できます。

記事内でアフィリエイトをする場合は、無駄にAdSenseを踏まれて離脱されては成果が上がりにくくなってしまいます。

サービスを紹介するなり、商品を紹介するなり、とにかく踏んで欲しいのはアフィリエイトリンクですね。

こういったページでは、AdSense広告は貼らない!という広告の断捨離も必要です。

広告設定における注意点

とても簡単なので割とすぐに終わる広告設定ですが、既存ブログからの導入の場合は気をつけたいことがあります。

それは、ウィジェットを利用した広告を使用していた場合です。

テーマ特有のウィジェットであれば引き継がれませんが、プラグインで有効化するウィジェットであったり、デフォルトで使えるウィジェットの場合は引き継がれます。

もし引き継がれたウィジェットで広告を表示していたりすると、Cocoon設定からでは操作ができません。

Cocoon設定からサイドバー上下の広告も簡単に操作できるため、広告の設定はCocoon設定でまとめる方がよいと思います。

ですので、不要なウィジェット広告は削除しておきましょう。

スポンサーリンク

次はアクセス解析設定

テーマ移行前後での変化を調査するのにも、アクセス解析は有効ですよね。

できるだけ、テーマを移行した当日に行うのがいいと思います。

各種ID・認証タグを貼る

アクセス解析の設定もCocoon設定からできますので、タブのアクセス解析から設定していきます。




あ、なんか説明いらないかも。笑(2回目)

ホントにね、貼るだけです。笑

広告設定のようにこのあとの細かい設定はありませんので、パパっと貼って次の設定に進みましょう。

スポンサーリンク

いよいよヘッダーロゴの設定

事前準備の記事にも書きましたが、ヘッダーはブログの顔!です。

ブログのイメージが全然変わりますので、できればすぐに設定しておくことをおすすめしますよ。

Cocoon設定のヘッダータブから設定していきましょう。

すでにヘッダーを設定しているのでこんな感じですが、デフォルトではただのテキストです。

テキストでも、背景の色を変えたり文字の色を変えたりできるので頑張ればヘッダーロゴがなくても大丈夫ですが、ヘッダーロゴがあった方が設定がめっちゃ楽なので、ヘッダーロゴの活用をおすすめします。

ヘッダー設定の中ほどにある、項目から画像を指定しましょう。

ここから、準備した画像をアップロードして指定したら終わりです。

めっちゃ簡単すぎワロタwwww

スポンサーリンク

すでにAMP対応済みならAMP設定も!

すでに既存ブログでAMP対応している場合なら、意外と簡単にAMP対応できると思いますので、ついでにやっておくといいと思います。

AMP対応すると一瞬で読み込まれる代わりにデザインが簡素になり、テーマによっては全然違うページになってしまいます。

その点Cocoonでは、ほとんどデザインに変化なくAMP対応できるのでとてもおすすめです。

Cocoon設定のAMPタブから設定していきます。

AMP機能を有効化するにチェックを入れ、AMPロゴをアップロードして指定するだけです。

めっちゃ簡単すぎワロタwwww(2回目)

ただし、AMP対応は本来とても繊細な作業のため、どこか一部のコードがおかしいだけでもエラーが出ます。

既存ブログですでに対応している場合は、あまり苦労せず設定できると思いますが、もしエラーが出た場合は修正するかAMP対応から除外しておきましょう。


AMP設定からだと、カテゴリーごとのAMPの除外設定ができます。


投稿画面からだと、単一記事のAMP除外設定ができます。

スポンサーリンク

まとめ

とりあえず移行当日にここまでできれば上出来じゃない?!という設定についてまとめてきましたが、Cocoonの設定自体かなり簡単になっているので、とりあえず公開できる段階まではすんなり行くのではないかと思います。

デザインや細かな設定はあとからでもいいかと思いますが、ひとまずこれらを設定しておけば安心ですよ。

既存ブログを運営中の方はCocoonへの移行も検討してみてはいかがでしょうか?

Cocoonのダウンロードはこちら

コメント