当ブログのテーマをSimplicityからAFFINGER4へ変更しました。
今回は切り替えた理由と手順、特に移行の障壁になりがちな記事コンテンツの移行部分にフォーカスしてお伝えします。
スポンサーリンク
目次
AFFINGER4へ変更した理由
2017年2月にはてなブログからWordPressへ移行してからお世話になってきたSimplicity。
無料テーマとは思えないきめ細やかな機能群と、自分色に染め上げられるカスタマイズの自由さに惚れ、ずっと使い込んできました。
にもかかわらずAFFINGER4へくら替えしたのには理由があります。
ほかで運営中のミニサイトにおける実績です。
例1: 特化型ミニサイトA
2017年2月オープン、記事数およそ70、作ってからほぼ放置。
SNS拡散施策はゼロで、アクセスは100%検索のみ。
がっちりサイト設計を行い、記事別に狙うワードを決め、検索意図に答える形で作ったミニサイトです。
オープン当初は1日10PVが関の山でしたが、今は狙ったワードできっちり上位表示されており、最低でも1日500PVくらい出ています。
例2: 特化型ミニサイトB
2017年4月にオープン、記事数およそ10、同じく100%検索流入のみ。
さきほどのサイトとは違い、PVあたりの収益を最大化する方針でコンテンツを組みました。
記事の書きっぷりはかなりエモーショナルで「響く人には響く」に全振りしています。
タイトルに狙うキーワードを入れる以外のSEO対策は行っていません。
サイト設計もトップページをハブに各記事へリンクを張る単純きわまりないもの。
にもかかわらず、検索ボリュームが膨らむ時節にしっかりと集客できており、ちょこちょこ発生もしています。
NaeNoteのPVは下降傾向
ひるがえって当ブログ。PVは下火です。
もともと13万くらいあったところが最近は8～9万くらい。
だいたい月10万PVって言い張れるギリギリレベルです。
ほかのサイトにあやかりたい
そんな中、ゴリゴリ結果を出し続ける特化ミニサイトたち……。
しかし、出自が雑記の当ブログ。
テーマがバラバラですし、可視化ツールでの内部リンクを最適化するにしてもサイト設計の改善には限界があります。
ゆくゆくは大規模な整理・切り出しが必要でしょう。足の長い作業です。
そんな中、今すぐできることといえばAFFINGER4を使いはじめることくらい？
と思い、ブログ改造の第一歩としてAFFINGER4移行を画策したのでありました。
AFFINGER4への変更手順の設計
SimplicityからAFFINGER4への移行では、
- 手順を固める
- 一気に移行する
というアプローチを取りました。
テスト環境に本番相当のものを入れ、行う変更を可視化していったうえで、移行作業自体は短くスパッと終わらせます。
テスト環境の準備
Cloud9というクラウド開発環境（無料）にテスト環境を作ります。
WordPressをクリック一発でインストールできる点、すべてがブラウザ完結するのでどこからでもアクセスできる点、作業中以外はWordPressを落としておけるのでセキュリティリスクも少なめな点が便利です。
具体的な環境の作り方は次の記事をどうぞ。
参考 簡単数分！Cloud9でクラウド上にWordpressテスト環境を作成する方法
Cloud9にWordPressをインストールしたら、Updraftというプラグインでバックアップした本番環境データを投入します。（サイトURLなどは変更が必要）
使い方の解説はこちら。
参考 UpdraftPlus で WordPress を丸ごとバックアップ | データ復旧大図鑑 – 自分で解決！ファイル復元
AFFINGER設定、デザインカスタマイズ
本番相当のテスト環境にAFFINGER4をインストール。
AFFINGER設定やデザインカスタマイズを入れ、形を整えていきます。
ウィジェット配置
忘れがちなのがウィジェットです。
WordPressではテーマ毎にウィジェット挿入可能部分が異なるため、テーマ変更の際はウィジェットの入れ直しが必要です。
完成形を確認しつつウィジェット配置を決めていきます。
コンテンツ移行の設計
一番重いのがコレです。
Simplicityに組み込まれていたCSSなどの独自デザインやタグを洗い出したうえ、AFFINGER4側で対応するものにマップし、それぞれに移行方針を決めていきます。
組み込みCSSの移行
CSSとショートコードについては
- 似たスタイルあればclassを置換する
- なければ独自CSSをあてるかあきらめる
- ショートコード化する場合は置換用の正規表現を作る
というアプローチで進めました。
たとえば赤太字スタイルはSimplicityにもAFFINGER4にもありますが、class名称が違うので置き換えが必要です。
- Simplicity……class="bold-red"
- AFFINGER4……class="hutoaka"
他に移行が必要なものと方針を洗い出したのが下記の表です。
スッキリしたかったので、SimplicityにあってAFFINGER4にないスタイルは、AFFINGER4組み込みのスタイルにマージする形としました。
独自に追加したスタイルの移行
吹き出しなど独自に追加していたものについても、AFINGER4に該当スタイルを利用するよう変更しました。
吹き出しはシロマさんのコレを使わせていただいていました。
ブログカードの移行
特に苦労したのがブログカードです。
Simplicityでは記事本文に直接URLを書けば自動的にブログカードに変換されます。
しかしAFFINGER4ではブログカードはショートコード。しかも記事IDを指定ずる形です。（［st-card id=記事ID］）
正規表現を使った単純な置換ができないので、PHPの移行用プログラムを組む必要がありました。
自分用に作ったもので動作検証が甘いので公開はしませんが、おおまかな処理は以下のとおりです。
- 記事本文を対象に、改行2つで囲まれた自ドメイン対象のURLを探索
- WordPressの組み込み関数「url_to_postid()」でURLから記事IDを取得
- 1でマッチしたURLを［st-card id=記事ID］に置換
本番反映は流れ作業でサクッと
以上に従って本番環境へ変更を加えていきます。
やることが明らかであとは作業だけ状態なので、変更作業自体は1時間もかからずに終了しました。
ブログそのものの変更
画面の右側に本番環境、左側にテスト環境を表示しておきます。
本番環境へAFFINGER4をインストールしたら、テスト環境にある通りの設定やカスタマイズ等を投入します。
組み込みCSSや独自スタイルはSearch Regexで行ないます。コンテンツ自体の変更なので、ミスがないよう1つずつ確認・置換します。
ブログカードのショートコード化は移行プログラムで一発で済ませます。
サンプルチェック
アクセスや収益の大きな記事を実際に開いてみて、デザインやコンテンツの崩れがないか確認します。
想定していた正規表現にマッチしない場合（想定外）もあるので最後の目視チェックは必須です。
Search Consoleへ反映
最後に、Search Consoleで最後の仕上げを行います。
WordPressにおけるテーマ変更はHTML構造そのものの変更を伴うもの。
正しい姿をGoogleに認識してもらうべく、全記事へのリンクが貼ってあるサイトマップページを「このページと直接リンクをクロールする」でFetch as Googleしましょう。
それが終わってしばらくしたら、「データハイライター」も設定し直しておきます。
以上で移行作業は完了です。
スポンサーリンク
AFFINGER4へ変更後のPV/CV変化
AFFNGER4へテーマを変更してから数字に変化が出始めました。
PVは引き続きじわじわ減っている一方、CV数（アフィリエイトリンクのクリック数）は逆にアップしています。
AFFINGER4への移行により、当ブログは細マッチョになりつつあるのだと感じました。
とはいえ2週間しかたっていない状態での変化なので、もっと長い期間で見ると違ってくるかもしれません。
AFFINGER4に変更して良かった点、悪かった点
で結局AFFINGER4へ変更して良かったのか悪かったのか。
感想を総括します。
○数値の面では満足度高
PVよりCV重視なぼくにとって細マッチョ化は嬉しい変化です。
しかしもともとの動機がPV減やばいだったので、PV面の改善も期待したいところではあります。
○デザインがすっきりした
Simplicity時代とくらべてデザインがスッキリしました。
以前は細かに自前カスタマイズを入れていましたが、移行を機にAFFINGER4のカスタマイザーで変更できる範囲だけに切り捨てました。
結果、余計な装飾が減り、かつデザインに統一感が出てきたように感じます。
コンテンツに集中してもらいやすい骨太な感じになったと思います。
×ビジュアルエディタが使いにくい
ビジュアルエディタが若干使いにくくなりました。
AFFINGER4のカスタマイザーで入れたデザインカスタマイズはビジュアルエディタに反映されません。
たくさんプリインされているタグもビジュアルエディタ上ではどれも同じただの灰色の枠にしか見えません。
公開時のイメージそのものを編集できたSimplicityのビジュアルエディタに慣れていた身としては違和感たっぷりです。
ただきっとそのうち慣れてくると思います。
×ブログカードが使いにくい
過去記事のブログカード修正はプログラムで一発で済んだものの、これから各記事となるとそうもいきません。
ブログカードを入れるときショートコードに記事IDを入れなければならない。これとっても不便です。
記事一覧ページを別タブで開きながらの作業が必要で、特にスマホでブログを書くとき使いづらくなりました。
SimplicityではWordPressデフォルトのリンク挿入機能（Ctrl＋k）をそのまま使えて便利だったんですが……
これはそのうちプラグインを自作して解決しようと思います。
スポンサーリンク
まとめ
以上、SimplicityからAFFINGER4へ移行した理由と手順をお送りしました。
今回の移行、個人的にはやってよかったと感じています。なんせCVが伸びてるので……
AFFINGER4にはこれからもお世話になっていこうと思います。
ここまで読んでいる人はAFFINGER4を買うべきか迷ってるかもしれません。
そんな人に向け、AFFINGER4を買う前に自問すべき3つの問いを定義しました。参考になればと思います。
