loader image

ブログ成長日記

ジプシーナースはGoogleアドセンスに合格したので「Cocoon」から「AFFINGER6」に移行しました‼崩れた記事の修正とカスタマイズをした話

2023-01-12

Googleアドセンスに合格できたので、本格的に稼げるブログ作りが始められます。

ブログもちゃんと続けることができているので有料テーマにしようと、収益に特化した「AFFINGER6」というテーマにしました。

「Cocoon」に慣れてきたところですが、これからは「AFFINGER6」で記事を書いていきます。

CocoonからAFFINGER6への移行手順

AFFINGER6

「Cocoon」から「AFFINGER6」への移行します。

AFFINGER6の購入

  1. AFFINGER6公式サイトへアクセス
  2. 購入ページに移動
  3. インフォトップの会員登録を済ませる
  4. 支払い情報を入力

【ダウンロード方法】

  1. インフォトップの購入確認メールからマイページへ移動
  2. 注文履歴へ移動しダウンロード
  3. AFFINGER6のダウンロードしたファイルを確認
  4. WordPressでテーマ選択画面へ移動
  5. AFFINGER6のzipファイルのダウンロードを済ませる
  6. AFFINGER6の子テーマのみ有効化する
Kagaya

めでたく「Cocoon」から「AFFINGER6」に移行することができました。

しかし、これからが大変です‼

プラグインの見直し

「Gutenbergプラグイン2」を導入しないとAFFINGER6の装飾機能が使いないらしいので導入必須です。

それに伴い、ブラグインを見直すことにしました。

Cocoon

  • BackWPup:データのバックアップ~もしもの時の保険
  • Broken Link Checker:リンク切れたときに教えてくれる
  • SiteGuard WP Plugin:乗っ取られ防止
  • Site Kit by Google:Googleツールと連携
  • WebSub:検索エンジンに早く通知してくれる
  • Google XML Sitemaps:XMLサイトマップを作成・送信することで検索エンジンに素早く認識される
  • Contact Form 7:お問い合わせフォーム作成
  • EWWW Image Optimizer:画像軽量化
  • WP Multibyte Patch:文字化け対策
  • Invisible reCaptcha:スパム対策
  • ConoHa WING コントロールパネルプラグイン:初めから入っている
  • ConoHa WING 自動キャッシュクリア:初めから入っている

Cocoonの時は上記のプラグインを導入していました。

AFFINGER6

  • BackWPup:データのバックアップ~もしもの時の保険
  • Broken Link Checker:リンク切れたときに教えてくれる
  • ConoHa WING 自動キャッシュクリア:初めから入っている
  • Contact Form 7:お問い合わせフォーム作成
  • EWWW Image Optimizer:画像軽量化
  • Site Kit by Google:Googleツールと連携
  • Gutenberg 用ブロックプラグイン2:AFFINGER6の装飾機能
  • Invisible reCaptcha:スパム対策
  • Google XML Sitemaps:XMLサイトマップを作成・送信することで検索エンジンに素早く認識される
  • SiteGuard WP Plugin:乗っ取られ防止
  • SUGOI MOKUJI(すごいもくじ)LITE:目次作成
  • WP Multibyte Patch:文字化け対策
  • WP Sitemap Page:サイトマップ作成

AFFINGER6には目次作成とサイトマップ作成の機能がないため新たにプラグイン導入しました。

ConoHa WING コントロールパネルプラグインはよくわからないので削除しました。

トップページを作る

これから、ブログの顔でもあるトップページを作っていきます。

Cocoonのスキンと違ってAFFINGER6は1からトップページを作っていかなくてはいけません。

一応、AFFINGER6もスキン的なものはありますが、有料のプラグインを購入しないといけないみたいなので、Kagayaは購入しませんでした。

何とかAFFINGER6のマニュアルを見ながら作成してみました。

Cocoonの気に入っていた部分がなくなってしまったのはちょっと悲しいです。

だけど、AFFINGER6はかなり細かいところまでカスタマイズできるので、自分らしいブログを作ることができます。

管理画面から「外観」>「カスタマイズ」で配色を設定していきます。

トップページ

こんな感じでトップページを作ってみました。

固定ページの修正

お問い合わせカスタマイズ

お問い合わせカスタム前
お問い合わせカスタマイズ後

こちらのブログを参考に「お問い合わせ」をこんな感じにカスタマイズしました。

色も自分の好みに変更できます

サイトマップ

こちらのブログを参考に「サイトマップ」を作成しカスタマイズしました。

サイトマップ

色も自分好みに変更できます。

記事の修正

Cocoonで使用していた装飾がなくなり、吹き出しも崩れ、外部リンクもただの文字列にってしまい殺風景な記事になりました。

記事が崩れてしまっているので、ひたすら記事の修正をしなくてはいけません。

目次作り

「SUGOI MOKUJI(すごいもくじ)LITE」というプラグインで作成しています。

管理画面から「目次」をクリックして「SUGOI MOKUJI(すごいもくじ)LITE」の管理画面から初期設定します。

次に管理画面から「外観」>「カスタマイズ」「オプション(その他)」「目次プラグイン(すごいもくじ)」から見た目のカスタマイズをします。

すごい目次

こんな感じにカスタマイズしました。

↑「旧プティパ」のブログで使用した目次が一番かわいいなと思います。

「SUGOI MOKUJI(すごいもくじ)LITE」の目次はシンプルです。

見出し作り

AFFINGER6は「見出し」のカスタマイズがすごいです。

「外観」>「カスタマイズ」「オプション(その他)」「見出しタグ(hx)/テキスト」から見出しを細かくカスタマイズできます。

画像も使用できるので同じテーマを使用しても、かなり個性を出すことができます。

記事の「見出し」で印象が変わってくるのでとても重要なパーツだと思います。

もう少しカワイイ画像を使用して「見出し」作りたかったのだけれど、今のKagayaの技術ではこれが精一杯かな?

これからもう少し凝ったものを作れたらいいなと思います。

吹き出し作り

管理画面から「AFFINGER管理」>「会話アイコン」から吹き出しに使用する画像と名前を設定することができます。

次に「外観」>「カスタマイズ」「オプション(その他)」「会話ふきだし」から吹き出し部分のカスタマイズができます。

「Cocoon」から「AFFINGER6」に移行してショックなのが「吹き出し」が崩れ、↑こんな状態になっていたことです。

Kagaya

AFFINGER6版の吹き出しはこんな感じです。

画像が動きます。

ちゃんと位置を変えることもできます‼

Kagaya

「吹き出し多用」で「記事数多い」ブログは修正作業がとても大変です。

「Cocoon」では画像があれば無限に吹き出しを作れることができましたが、「AFFINGER6」では8種類の吹き出ししか作ることができません。

ピコピコ吹き出し画像が動いてかわいいですが、無限に作成できる「Cocoon」の吹き出しの方が良いなと思います。

外部リンク作成

そして一番困るのが、「AFFINGER6」にはブログカード機能がないのです。

ブログカードを作成するにはプラグインを導入しなくてはいけないみたいです。

これ以上、プラグインを導入してブログが重たくなってしまうのはイヤなので、ちょっとヤボッたいですが「はてなブログ」のブログカードを作成することにしました。

こちらのサイトで「はてなブログのブログカードを(裏技的に)はてな以外でも使う」という部分でHTMLコードを作成してくれます。

  1. ブログカードにしたいURLを入力しHTMLコード作成する
  2. HTMLコードをコピーする
  3. ブログカードを設置したい部分に「カスタムHTML」を開く
  4. 「カスタムHTML」に先ほどコピーしたHTMLコードを貼り付ける

上記のようなブログカードを設置することができました。

プラグインを導入すれば「Cocoon」のようなステキなブログカードを設置することができるのでしょうけど、導入はしたくないのでこれでガマンするしかないです。

以前「Blogger」ブログの時に活用していたブログカード作成方法が役立ちました。

内部リンクの方は崩れずそのまま使用できる感じでした。

まとめ

テーマ変更したことによりCocoonで普通に使っていた機能がAFFINGER6ではなかったりして、トップページ作り・記事の修正にかなり時間が必要です。

崩れた記事にも関わらずAFFINGER6に移行したとたんにPV数が増えてきています。

さすが、収益に特化したテーマです。

Cocoonでブログを始める方も多いと思います。

しかし、ブログの先輩方も言っている通りブログで稼ぐことを目的にしている人は始めからAFFINGER6にした方がいいです。

記事の修正に時間を取られることはありません。

そして、他のテーマからAFFINGER6に移行するのであれば、記事が少ない内にした方がいいと思いました。

まだまたAFFINGER6は使いこなせていませんが、早く記事を修正し、新たな記事を増やしていきたいと思います。

だけど今思うと、無料テーマであるCocoonは本当に有料並みにすごいテーマだったということがわかりました。

ありがと~、Cocoon‼

-ブログ成長日記