Cocoonを導入したい!既存のブロクから移行する時に準備しておきたいアレこれ

Cocoon

やほ!ままん(@maman_selfish)やで☆

先日の夜中に突如ブログテーマをCocoonに移行したわけですが、前のこえだめをご存知の方はイメージがかなり変わっていると感じていただけることと思います。

ゆるゆると、ちょっと女子っぽくなっているのではないかと・・・。

こんな風にイメージが変わったのは当然ながらブログテーマのお引越しのおかげです。

ただやっぱり、苦労して作ったブログをまた1から設定し直すのがなぁ・・・と尻込みしている方もいらっしゃると思います。

ワシもそうやったで\(°∀° )/

もう1つの運営ブログでは最初からCocoonでスタートさせていたくらいCocoonが気になっていたのに、なかなかやる気になりませんでした。

Cocoonが気になっているけどどうにも1歩踏み出しきれない方に、とりあえずコレ準備しとけばさっさと移行できるから、はよCocoon導入せぇ!とバシバシ背中を押しまくるために書いていきます。

スポンサーリンク

導入前に準備しておくとよいもの

さて、わたしの場合ブログテーマのお引越しでさえ勢いでしたので、特になんの準備もなく作業に取り掛かりました。

正直なところ、たとえ調べながらでもとりあえず公開できるレベルまでの移行は割と余裕です。

ただそれでも、時間短縮のために前もって準備しておくとよかったかな・・・と思うものがあったのでまとめてみました。

AdSense広告のコードコピー

Cocoonでは、非常に簡単に広告設定ができます。

大した手間ではありませんが、いちいちAdSenseで拾ってくるよりは、どこかにコピーしておいた方が早いですね。

Cocoonで使う広告コードは基本的にレスポンシブ広告コードですが、利用する場合はリンクユニット広告コードも設定できます。

すでにブログを運営されている場合は、現在のブログテーマにも設定されているはずですのですぐにコピーできる場所にメモしておくと便利ですね。

アクセス解析に必要なIDとコード

Cocoonでは、アクセス解析の設定も簡単です。

以下、アクセス解析の設定ができるサービスです。

  • Google Tag Manager(トラッキングID)
  • Google Analytics(トラッキングID)
  • Google Search Console(サイト認証ID)
  • ヘッド用アクセス解析(アクセス解析タグ)
  • ヘッダー用アクセス解析(アクセス解析タグ)
  • フッター用アクセス解析(アクセス解析タグ)

それぞれの設定に必要なものも()内に記載してあるので、それぞれ拾ってきてメモにまとめておくといいですよ。

既存のブログテーマに設定しているものをそのまま使う場合も、同じようにメモにまとめておきましょう。

ヘッダーロゴ用画像

このブログでもヘッダーロゴを使用しています。

ページの上にあるこの画像ですね。

Cocoonでは、このようにヘッダーロゴを設定できるので、あらかじめ画像を準備しておくといいと思います。

特にヘッダーにこだわりがなく、ヘッダーが普通のテキスト(文字)でもなんの問題もないという方は不要な準備ですね。

ただ、ヘッダーはブログの顔ですので、できれば画像を用意した方がいいでしょう。

わたしの場合は1000×300くらいの画像を設定してみたら普通に適用されたので、それくらいの大きさであれば大丈夫ですよ。

ちなみに・・・

実はこのヘッダー画像、わたしのTwitterページのヘッダーを使い回しています。笑

偶然にも、Cocoonに移行した日にTwitterのヘッダーもノリで変更してたんですよね。

やっべぇー。いい画像ねーな。
・・・あ!Twitterのヘッダー使えるんちゃう?!

・・・ということで、秒で使い回しです(´▽`*)アハ←

AMP用ロゴ画像

またもロゴ画像ですが、CocoonはAMP対応も簡単です。

ただし、AMP用のロゴがないと対応させられませんので、AMP対応する予定ならロゴを必ず準備しましょう。

AMP用のロゴは大きさが幅600px・高さ60px以下と決まっています。

これより大きいサイズをロゴに設定しただけでもエラーが出ることがあるそうですので、サイズに気をつけて準備しましょう。

わたしはヘッダーの画像をリサイズして小さくしたものをそのまま設定しましたよ。

ちなみに・・・

CocoonのAMP対応ページは、非対応のページと見た目の変化がほぼありません。

さらに、AMP用の広告コードを設定しなくても、勝手にAMP対応ページにも広告を表示してくれます。

AMP対応するだけでも上位表示されやすくなりますので、AMPページでブログを読まれることも多くなりますよね。

そのAMPページに広告が上手く貼れていないとなると大問題です。

広告まできちんとAMP対応されると、収益面でもかなり変化があるかもしれませんよ。

スポンサーリンク

移行にかかった時間(ままんの場合)

さて、事前準備についてここまで書いてきましたが実際どのくらいの時間がかかったか気になりますよね。

あくまでもわたしの場合ですが、Twitterを見ると様子がわかりますので埋め込みます。笑
https://twitter.com/maman_selfish/status/1044200807673999360?s=19

ワロタwwwww
1人でキレて絶望しとるwwww

AMP対応記事に広告が出ていないことに気がついてブチギレているようですね。

そしてこうなるわけです。笑

確かこの15~30分後くらいに移行を開始したような気がします。

そしてこう。

Twitterの様子から推測すると、だいたい23:30~23:45くらいから移行し始めて、1:40あたりに目処が立った感じですかね。2時間くらいかな?

ただ、わたしの場合いろんなところに飛んでコードを引っ張ってきたり画像を探したりしながらの作業なので、準備をしてからであればもう少し早くできたと思います。

そのあと、すべての記事を確認しておかしなコードを直したり、ブログ全体のデザインを修正までしたので、結局は寝たのが3:30くらいだったかな?

3連休最終日、朝から仕事という状況です。笑

やり始めると止まらなくなるので、2時間~3時間くらい時間をとって移行し始めた方がいいかもしれません。

ちなみに上記のようなTwitter埋め込みも、勝手にAMP対応してくれるので非常に便利ですよ。

スポンサーリンク

まとめ

実際に既存ブログをCocoonに移行させてみて、今のところやってよかったとしか思えないです。

まぁ、だからこの記事を書こうと思ったんですが、準備をすればもっとスイスイ移行できたとも思います。

Cocoonは無料テーマでありながらかゆいところに手が届きまくる上に、カスタマイズについての記事がわんさかあるのがホントすごい。

やりたいことを調べればすぐにやり方がわかるというのが、とても素敵ですね。

それだけ利用者が多いということでしょうが、実際に使い始めると記事を書きたくなる気持ちがよくわかります。

こんなことできるよ!こうすればうまくできたよ!って言いたくなります。笑

今後も引き続き、既存ブログからCocoonへの移行について順を追って記事にしていく予定です。

まぢで使いやすい&無料ということで、Cocoonをパワープッシュします☆

コメント