ブログテーマをCocoonに移行してからやったこと一覧

Make

cocoonにしてからいいこと尽くしです。見た目がまず、人に読んでもらうためのプラットフォームへと変わりました。(以前はECサイトみたいな感じだった)

自分がやったことのメモにしかならないのですが、誰かの参考になればと思い、記録に残しておきたいと思います。

経緯は前回の記事にものせたのですが、僕の作品ポートフォリオサイトからブログ用にサブディレクトリを切り離し、別テーマ(Cocoon)を入れたのが発端です。

とにもかくにも見た目を整えた

Cocoonのいいところは、検索すればいくらでもカスタマイズの方法がでてくることだと思います。

何せ、純国産のテーマであり、公式サイトにはコミュニティ機能があり作者のわいひらさんと直接の相談が出来ること。

また、無料であるがゆえに利用している人がとても多く、たいていの悩みはググればすぐに出てきます。

それらに沿っていろいろと参考にしつつ自分好みの見た目に修正していきました。

例えば今回使いたかった機能として、ブログのインデックス機能があります。

記事の冒頭にボタンが4つ並んでいて、カテゴリごとに出してくれるものですね。

これがインデックスだということすら知りませんでしたが、一度名前がわかれば本当になんでもでてくるので便利です。

以前はOceanWPを使っていましたが、日本では使っている方も少なく、英語で調べるのもめんどくさいので地道に改善努力をしていました。

モバイル対応に苦戦

PCでの見栄えはよくてもスマホでのユーザーエクスペリエンスがあまりよろしくない箇所があり、対策に苦戦しました。

特にヘッダーメニューが3つ以上の項目になると2段になってしまうという問題がずっとあり、解決策を見つけるまで時間がかかりました。

以下のブログを参考にスライダーにすることが出来ました。本当にありがとうございます。

【Cocoon】スマホメニューを横スクロールできるようにする方法!
Cocoonのスマホ(モバイル)メニューのカスタマイズです。スマホでもメニューをヘッダー下に表示させ、横スクロールをできるようにします。その他にもアイコンを入れたり、英語を入れるカスタマイズ方法も紹介します!

いらないプラグインを削除して軽くした

table of contentsやSEO対策、SNS共有ボタン等はプラグインを使っていました。

ダサかったし、それを設定してきれいにするのは大変だし、プラグインを多用すると重くなるしで、あまりいいことありませんでした。

なのでこういった機能がすべてCocoonでマネージされているのは感動です。

入れなくて良いのは軽くて良いなと思う一方、Cocoonの使い方になれる必要がありますね。

とはいえ上でも書いた通り、調べれば大体なんでも出てきますので、一つ一つつぶしていくだけです。

ちなみにローコードで見た目を整えることができるElementorも消しました。

ポートフォリオのように、ホームページみたいなものを作るのではなく、ブログを作るのが目的でそれにはCocoonの基本機能と少しのCSS編集があれば事足りたからです。

分析ツールをいれた

どれだけ人が見に来ているのか、どんなワードに引っかかってきてくれているのかなどを理解するため、GA4とGoogle search consoleを作成し、紐づけます。

これも以前は連携するためにプラグインを使用していましたので、使わなくて済むのは大変ありがたいです。

以前使っていたプラグインはMonster insightというものです。

Elementorでも関連して使えたので重宝していましたが、プラグインが一つでも減るのはありがたいです。

広告機能をいれた

バリューコマース、もしもアフィリエイト(一度審査に落ちた)を入れました。

Cocoonには広告ツールを設定する機能が最初から入っておりますので、Amazon,Yahoo,楽天のそれぞれを設定しました。

やりたかったのは後述するぽちっぷで商品に対してそれぞれの購入サイトへと飛ばすことを可能にすることです。

バリューコマースはYahooのAPI情報を取ってくるために必要です。

もしもアフィリエイトは楽天とAmazonのAPI情報を取ってくるために必要です。

楽天はザルなのですぐに使えるようになるのですが、Amazonで一度申請が却下されました。

どうしたらいいのか、理由などは教えてくれないようですので、直せるところは直しました。

A8のAmazonリンクをいくつか入れていたのですがそれはすべて消して代わりにAmazonの公式アフェリエイトに入会してそっちの商品説明に入れ替えました。

あとは、プライバシーポリシーを書き換えました。

プライバシーポリシーには先に「もしもアフィリエイトを使っています」という趣旨の文言をいれておきました。

結果、2回目の申請で承認を得ることが出来ました。

ぽちっぷを入れた

ぽちっぷとはこういうやつです。

¥472 (2023/07/26 16:55時点 | Amazon調べ)

読んだ本の紹介がしたかったのでいれました。

ほかにもRinkerなどといった有名なプラグインがありますが、ぽちっぷが一番簡単そうで見た目も派手じゃなくていいなと思い導入しました。

Google adsenseを申請した

見た目がアレなので使うかどうかは置いておいて、ダメもとでまあ今回も申請しておくか~くらいのノリで一度申請してみたところ、あっさり承認されました。

承認されるとやっぱりうれしいです。

以前別サイト(ファンガスブラザーズ)で申請した際には1週間以上かかった気がするのですが、今回は半日で承認が下りました。

アカウントが同じだったこと、コンテンツも増えていたことが原因でしょうか。

ちなみにサブディレクトリでの申請は出来ませんでしたので、本家サイトで申請しました。

以前自動で掲載していたところ、とんでもない見た目になりました。

ただCocoonにしているおかげで簡単に、あまりうざくないように広告がはれるみたいなので、使ってみようかなとも思っています。

SEO対策をした

XMLマップを作成しGoogle search consoleに送信

Google XML Sitemapsというプラグインを使ってXMLマップ作成しました。

SEO対策としては、サイトマップをつくりGoogle search consoleへと送ることが必須です。

そうすることで、ネットという無限の世界にてGoogleに対し「お~い、おれはここだ~見に来てくれ~」という指示をだすことができるそうです。

これをしないと、Googleは探しに来てくれない=検索するためのデータベースに載せてくれないということです。

参考:https://blog-bootcamp.jp/start/wordpress-googlexmlsitemaps/

All in one SEOは入れてないです。

Cocoonで全部できちゃいます。すごいですね。

やらなくて大丈夫だったこと

SSL化の作業は、Worpress、サーバーともにやる必要はありませんでした。

本家サイトにぶら下がるかたちで作っているため、SSLの効果がサブディレクトリまで効いているものだとおもわれます。

以上です

恐らく今のところこれで行った作業は以上になると思います。

CSSでのデザイン調整などは続けているのですが、気になりだすと止まらないです。

あとはロゴを作ったり、アイキャッチ画像を作ったりですね。これは移行したからというより、今までやっていなかったのでやっと見た目を整え始めたってところかなと思います。

FontAwesomeはなぜか調子が悪く、仕様を断念したところがあったりというのもあるのですが、きりがないのでまずはここまでとしたいと思います。

あとは記事を書くことに時間を使っていけたらと思っております。

参考になれば幸いです。

コメント

タイトルとURLをコピーしました