こんにちは。ブログのテーマを変えました！
ずっと変えたいと思っていたのです。
「Cocoon」というテーマにしました。その後けっこういじっているのでトップページが今までとかなり変わっています。
テーマを変えたいけれどなんだか失敗したら怖いと思っていた私の背中を押してくれたのは、ブログの表示？にエラーがでたからです。
最初グーグルサーチコンソールに「エラーがあるよ！」って言われた時はどうしようかと思いましたが、今はテーマを変えるきっかけをくれてありがとう！と思っています。
ただ、まだエラーが全部消えたわけではないのがちょっと心配です。
「Cocoon」というテーマはとても使いやすくて機能がいろいろあってわくわくしています。
しばらく試行錯誤でブログの表示が崩れたりガラッと変わったりといろいろあると思いますがよろしくお願いします。
以下に書くのは基本自分の覚書です。テーマを入れる時に気をつけたこととか何をしたかを書いておかないと忘れてしまうので。
テーマを変えた理由
私のブログに今まで使っていたテーマはシンプリシティ２です。Simplicity2はとてもシンプルで使いやすいテーマで大好きでした。
そのシンプリシティ２の作者のわいひらさんが新しいテーマ「Cocoon」を作ってくれたのです。
いろんな機能が詰まっていて使いやすそうでいろいろ工夫が凝らされていて、いいなぁと思っていたのです。
でもパソコンのことブログのことがよくわかっていないのでテーマを変えるというのが怖くてなかなか手を出せずにいました。
変えたいなー変えたいなーでもなーってなっていました。
その私がテーマを変えた理由は、
グーグルサーチコンソールでエラーが出たから
グーグルサーチコンソールでエラーが出ちゃったんですよね。
日々どんどん増えるエラーに怖くなってしまって。
やれることはないかなって考えた時にふと「テーマ変えちゃったらエラーが消えるのでは？」って思いました。
アクセスが少なくなる時期だった
エラーが出たせいなのか、時期的なものなのか、アクセスが減ってました。
右肩上がりとはいかないまでもジリジリっと少しずつアクセスが増えていたのにここにきてガタっと減ったのです。
「そういえば去年も年末はアクセスが減って落ち込んでいたなぁ」って思い出しました。
テーマを変えるという大きな変更って怖いです。テーマを変えてもしもアクセス減っちゃたらどうしようっていうのはどうしても頭をよぎります。
でも今アクセスが減ってる時ならテーマを変えて減ってもそんなに落ち込まないんじゃないかなって思ったのです。
Cocoonがこなれてきている
Cocoonというテーマが正式にリリースされてから、けっこう時間がたちました。
なので使っている人も増えて、困った時でも調べれば大抵のことは解決するだろう土台が整っています。
今なのでは！？と思って変更です。
Cocoonへテーマ変更 準備編
テーマを移行しようと思ったらやっておかなければならない準備があります。
色々あります。途中でめんどくさくなって適当にやったらやっぱり後悔しました。
でも勢いがないとテーマ変更なんてやってられないですよ。
バックアップを取る
バックアップを取っておくのは重要です。とても大切です。
失敗してももとに戻せるならとても気持ちが楽だからです。
とりあえずブログのバックアップを取れるというプラグインを入れてバックアップを取りました。
よくわかりませんが、これでブログがめちゃくちゃになっても元に戻せるはずです。
多分きっと。
アナリティクスとグーグルサーチコンソールのID？を控える
ブログのデータを取っているのでこれは重要ですね。
アナリティクスとグーグルサーチコンソールのID？タグ？まあそれを控えてください。
シンプリシティ２にも入れたはずなのですが昔のことなので忘れています。
探し出して控えましょう。Cocoonにも入力しなければいけません。
CSSのコピーを取る
私はほとんど怖くていじってないのですが、CSSという装飾？をしているやつをコピーしておいて、Cocoonに変えた後に貼るといいようです。
一応コピーしてメモ帳にでも貼り付けておきましょう。
私はコピーはしたのですが結局まだ貼り付けていません。だって何をどう変えていたのか覚えてないんですよ……
ウィジェットに入れているものの記録を取る
シンプリシティ２のウィジェットに何をどういう順番で入れていたのかを、メモしておくといいと思います。
ここら辺もう記憶が曖昧なんですけど、あれ？ウィジェットの情報は残っていたような気がしますね。
Cocoon設定のその他から「Simplicityから投稿設定を引き継ぐ」ってのにチェックを入れるとけっこういろいろ引き継いでくれるのです。
引き継いでくれなかったのはアドセンス広告だったような気がしてきました。
まあでも記録はとっておくと良いと思います。
Cocoonに変えた後にウィジェットもいろいろいじるので、いじった後に「あれ？前はどうなってたんだっけ？戻したいけど戻せない！！」ってなります。
使っている色を控える
シンプリシティで使っている色のカラーコードをメモしておきます。
ここの背景色はこれとか、字の色真っ黒にしてなかったんだ？とか昔の自分がしたことなに驚きがあって楽しいです。
けど、適当にしかメモらなかったので後悔しています。
「ここの色何色にしてたんだ！？」って移行してから悩むことになります。
Cocoonテーマをダウンロード
Cocoonのテーマと子テーマをダウンロードして準備です。
後はもうポチって「有効化」を押すだけです。
これ押したらどうなっちゃうの！？ってめっちゃドキドキときめきました。
ぽちっとな
Cocoonへテーマ変更 最低限調整編
Cocoonにテーマを変更したらとりあえず急いでやったほうが良いよってことを書きます。
特に上２つは記事の表示がおかしくなっているのでまずチェックしてください。
目次のプラグインを停止
Cocoonには目次を自動生成する機能が備わっています。
なので今までプラグインで目次を作っていた場合は目次が２つ出現します。
なので対応は、
- 目次プラグインを停止する
- Cocoonの目次機能を停止する
の二つに一つです。
プラグインは少なければ少ない方がいいと思っているので私は目次プラグインを停止しました。
Cocoonの目次を停止する場合はCocoon設定の「目次」タブからできます。
Cocoon設定「画像」アイキャッチの表示を変える
Cocoonにはアイキャッチ画像を自動で入れてくれる機能があります。
この機能があるせいか移行直後はアイキャッチ画像が２枚連続して記事に入っている状態になりました。
とりあえず、Cocoon設定の「画像」タブでアイキャッチ設定を変更してください。
「本文上にアイキャッチを表示する」のチェックを外せばいいのです。
とりあえず二重になってる画像を直して、その後どうするのか考えましょう。
Cocoon設定「その他」でシンプリシティの設定を受け継ぐ、SSL化
Cocoon設定というところを開いて「その他」というタブをクリックしてください。
そこで、
- 内部URLをSSL対応（簡易版）
- Simplicityから投稿設定を引き継ぐ
にチェックをいれます。
シンプリシティの時もSSL化にはシンプリシティの機能に頼っていたのでこの機能嬉しすぎます。
SSL化を自分でやっているならSSL対応のチェックはいらないのかもしれません。
Simplicityから投稿設定を引き継ぐはシンプリシティからのテーマ移行であればとりあえずチェックしておけばいろいろ設定を引き継いでくれるのでやっておくと良いと思います。
Cocoon設定「本文」テーブル設定横スクロール
ブログ記事に表を使っている場合に設定しておいた方がよいです。
スマホで見た時にはみ出した表を横スクロールで見えるようにしてくれる設定です。
Cocoon設定の「本文」タグの下の方に「横幅の広いテーブルは横スクロール」ってところがあるのでチェックを入れてください。
この機能シンプリシティにあってとても重宝していたのでCocoonにも付けてくれてとても嬉しいです。
Cocoon設定「全体」でカラーをいじる
とりあえず格好をつけるためにさくっと色だけいじってみましょう。
この時に、シンプリシティで使っていた色を控えてあるとサクサク進みます。
控え忘れていてもいろいろ試行錯誤するのは楽しいです。
ここまでやれば最低限体裁は整います。
Cocoonへテーマ変更 早めに設定したいこと
最低限の体裁をさくっと整えたら、次はできたら早めに設定しておきたいことをやります。
Cocoon設定「アクセス解析・認証」でアナリティクスとグーグルサーチコンソールのIDをセット
サイト分析のためにアナリティクスとグーグルサーチコンソールのデータは取っておきたいのでその設定をやります。
Cocoon設定の「アクセス解析・認証」のところにアナリティクスとグーグルサーチコンソールのIDを入れます。他の解析をつかっていてタグを入れないといけないならそれも入れます。
事前準備でメモっておくとさくっと入力できて楽です。
Cocoon設定「広告」でアドセンス広告調整
アドセンス広告を使っている場合はCocoon設定の「広告」で入力です。
いろいろ調整できるのでがんばります。
私は関連ユニットも使っていて、それは外観のウィジェットから入れてます。
ここらへんも一回設定するとあまりいじらないところなので設定した記憶が薄れていてどうやるんだっけ？ってなりました。
Cocoon設定「OGP」にホームイメージを入れる
テーマCocoonを使っている人がツイッターでブログを紹介していると、そのブログの紹介画像がCocoonの画像になっているのをよく見ます。
どうも「OGP」ってところに画像を入れておかないとCocoonの画像が出るみたいなんですよね。
よくわかっていないのですが、ここに自分のブログの画像を入れておいたほうがいいようなので、入れました。
Cocoon設定の「OGP」タグを開いてホームイメージの画像をアップです。
Cocoon設定「投稿ベージ」でパンくずリストの位置変更
パンくずリストの位置は好き好きがあると思います。
私は上にある方が好きなのですが、Cocoonの初期設定では下に出ています。
変更はCocoon設定の「投稿ページ」タグで出来るので変更しました。
Cocoonにテーマ変更したからにはやってみたいこと
Cocoonというテーマはとても機能が充実しています。
このテーマにしたからにはやってみたいことってあるじゃないですか。
「AMP」設定（してみてすぐやめる）
Cocoonというテーマの売りの一つに「AMP」対応が簡単で表示も綺麗！というのがあると思います。
これやってみたいなって思いました。
だってチェックを一つ入れるだけでAMP化できちゃうんです。わくわくします。
ってことでポチッとなってしてみました。
ぱっと見、いい感じに思えたのですがしばらくよく見てみると表示がちょっとおかしかったりする箇所がありまして。
多分少し手直しすればいいのだと思ったのですが、まだ手が回らないし、もうちょっと後でもいいかなぁと思ってチェックを１日くらいでまた外してしまいました。
その１日の間だけでもけっこうAMP化したページからアクセスが有りました。
チェックを外したら少しずつAMPページからのアクセスは減ってきました。
また、もう少し余裕がある時にAMP化にチャレンジしてみたいと思います。
吹き出しを使ってみる
吹き出し機能がある！嬉しい！って思いました。
とても簡単に吹き出しが作れる！
めっちゃ簡単に会話風にできます。
これやってみたかったんです。
でもいざできるとなると使い所に迷っています。少なくとも後一人いないと会話にならない。
新しいイラストが欲しい……
トップページをいじってみる
せっかくテーマを変えたのだからいろいろいじってみたいと思います。思いますよね。
前々からブログのトップページって新しい情報を探すにはいいのだけど、自分が見たい情報を探すのが面倒だなって思っていました。
できたら要素ごとに整理されたトップページにできたら良いのにって。
特に私のように雑多にいろいろな記事を書いている場合、せっかく興味を持ってトップページに来てもらってもあまりにも記事の内容がいろいろで来てくれた人が興味を引く記事が探しにくいだろうなぁと思います。
なのでそれをなんとかしてみたくて、
以上３つの記事を参考にコピペコピペさせてもらってトップページをいじってみました。
本当はCSSもいじらないといけないのですが、サーバーがロリポップなせいかいじろうとするとエラーが出るんですよね……。
あ、一応もしトップページをこの形式にしようとしている人に参考なりそうなことを言うと、
全体の新着記事へのリンクは、
この質問を参考にしました。
「BLOG」のリンク先を”https://example.com/?cat=0″とすれば全カテゴリの「投稿」(= 全ての投稿)が表示されるページへリンクを貼れる
っていうのがほんと参考になりました。
あとは、カテゴリへのリンクで子カテゴリを作っている場合はChildrenのあとの数字を0から1にするといいと思います。
〜new_list count=”●●” type=”default” cats=”●●” children=“0” post_type=”post”〜
ここを思いつくまでカテゴリと子カテゴリの数字を地道にカンマで並べていたのですが、無駄な努力でしたね。
ってことで完成したトップページ、よかったら見てみてください。
まだまだ改良の余地ありなんですがけっこう気に入っています。
Cocoonは素敵なテーマなので移行してよかった！
今まだ全然使いこなせていませんがCocoonはすごく良いテーマだと思います。
素敵です。
えいや！って移行してよかったなって思っています。
グーグルサーチコンソールのエラーも徐々に消えつつあります。まあこれはテーマ移行関係ないかもしれないんですけど。
ずっとCocoonにしたいと思っていたのでグーグルサーチコンソールにエラーが出てくれて踏ん切りがついてほんとよかったです。
