はてなブログからワードプレスに移行して１か月が経ちました。最新のバージョンでは Gutenbergというブロックエディターが使えるのですが、Affinger５では「Classic Editor」を推奨していたので、そちらを導入しました。
はてなブログからWordPressに移行にはデザインが崩れる、移行後は修正が必要、など聞きましたが、具体的には何がどうなるのか、分かりませんでした。なので、移行した後に、変わったところや「こうしておけばよかった」と思った点、突如現れたエラーの解消方法をまとめてみました。これから移行される方への情報の一つになれば幸いです。
利用しているサーバーとテーマなど
- サーバーは ConoHa を使っています。
- WordPressテーマ 「WING（AFFINGER5）」
- Classic Editor (クラッシックエディタ－) というプラグインを利用しています。
吹き出し
はてなブログからWordPressに移行すると、「崩れ」がある！と先人の方のブログで拝見したので、移行する前に、｛ ｝デザインCSS でカスタマイズしていた部分を（可能な限り）取り消しておくことにしました。その中の一つが「吹き出し」です。
上のような吹き出しに入れていたものは、普通の文章に直して、もし崩れても読みにくくならないようにしておきました。ただし、移行時点で記事が300近くありましたので、全部は修正できませんでした。移行後に、修正できなかった部分を見てみると、下のような普通の文になっていました。
ただし、このままでは見にくいので、移行後に一つ一つ修正をかけることにしました。
吹き出しの設定の仕方
Affinger 5 では、「吹き出し」は「会話風アイコン」という名前になっています。
設定の仕方
「AFFINGER 5 管理」 >「 会話・ファビコン等」に画像のURLを入れて、アップロードするだけです。
無料で８つまで作ることができます。はてなブログでは、｛ ｝デザインCSS にコードを入れるだけで、好きなだけ「吹き出し」を追加することができたので、ちょっと不便を感じます。ちなみに、吹き出しを増やしたい場合は有料となります。
囲み枠（ボックスデザイン）
同じく、カスタマイズしていた 囲み枠（ボックスデザイン）も、デザインがなくなりました。
上のような囲み枠はなくなっており、はてなブログからWordPressに移行した後の記事では、以下のように、文字だけとなっていました。
point マッサージオイルにグレープフルーツの精油を加えるときは、肌の塗布後４～５時間は、肌を直射日光に当てないよう注意が必要です。
「タグ」を使う
タグ
「タグ」の中にある「＋マイボックス」を使うと、このように枠を付けることができます。
次に、ボックスデザインを使ってみます。
ポイント
色は自由にカスタマイズできます。
WordPressの方がカスタマイズは多いのですが、最初、どこからアプローチしていいのかが分かりませんでした。１カ月使ってみてやっと慣れました。私の場合一番使うのは「タグ」で、ここから吹き出しや囲み枠を作ることができます。
移行後に分かったこと
はてなブログの「管理画面」にある「デザイン > ｛ ｝デザインCSS」に記入したコードは、すべて引き継げません。よく考えたらあたりまえのことなのですが、どのように崩れるのかが分からなかったで、不安でした。でも、文章が読めなくなるほど崩れるわけでないことが分かりました。なので、移行する前に、修正（コードを消す）する必要はないと思いますが、読んでくださっている方が見にくくなりますので、移行後に修正する必要がある箇所です。
写真
はてなブログからWordPressに移行後、写真のすべて移行されたのですが、記事の表示で少し変化がありました。はてなブログでは、写真を横に何枚か並べることが簡単にできたので、写真が多くなる場合に活用していました（これは、とても便利な機能でした）。しかし、移行後のWordPressでは、はてなブログで横に並べていた写真がフルサイズで上下にくっついて表示されていました。
上のような感じです。WordPressでは ビジュアル と コードエディタ (テキスト) でブログを書くことができますが、コードエディタ でコードを見てみると、以下のようになっていました。
小さくて見にくいのですが、オレンジで囲んだ </div><div class-"images-row-item">などの部分を消すと、くっついていて表示されていた写真が離れて、普通の表示になりました。その後、フルサイズになっていた写真のサイズを小さく変更しました。もちろん「ビジュアル」の画面で一つ一つ写真を修正して行くことも可能です。もし移行しようと思われている方は、写真を横並びにしない方がいいと思います。移行後に、気が遠くなる作業（まだ完全に終わっていません）が待っています。
画像のサイズ
初めて画像を張り付けたとき、画像のサイズが小さく画面上で拡大させたのですが、ぼやけてしまい、うまくいきませんでした。そんなとき「画像詳細」を見てみることをおすすめします。私の場合、画像のサイズが「中ー300×11」に設定されていたのです。
これが初期設定かどうかは、分かりませんが「大ー920×35」に設定しなおすことで問題は解決しました。現在は、画面上 (テキスト) で、さらに縮小させています。
エラーが出た！
ところで、WordPressに移行後、Google Search Consoleで、今まで見なかった２つのエラーが出ました。「レポートを開く ＞」をクリックして「詳細」を見てみました。
エラーが出ていた記事は２つです。何が原因なのかが分かりません。
ただ、他の記事との違いは、Flickrからの写真を多用していたことだったので、写真を確認してみることにしました。「ビジュアル」で見てみると、Flickrから張り付けた写真の下には、ビデオのアイコンのような「メディアを挿入/編集」のマークが付いています。なので、そのマークを削除することにしました。
同じ部分を コードエディタ で見てみると、下のようなコードとなっています。なので、<script async=""・・・></script>という部分を消しました。
消したあと、記事の写真に影響はありませんでした。同時に写真も「700×354」の中サイズくらいに小さくしました。問題（と思われる個所）を修正したので、検証を依頼すると、次の日には「問題解消」のメールが来ました。
Google Search Console の表示も変わりました。何が悪くて何が良かったのか分からない状態ですが、私の場合は、とりあえずFlickrからの写真を修正することでエラーは消えました。合格と該当なしの違いがよく分かりませんが・・・。
font awesome：アイコン
はてなブログでは「font awesome」のアイコンが気に入ってよく使っていました。しかし、移行後は、これも表示されなくなりました。それは、「はてなブログ」と「WordPress」では、使用するバージョンが違うからです。
WordPressでは、Font Awesome 4 を使います。Font Awesome 5のはてなブログバージョンのままでは、表示されません。ただ表示されないだけで、画面が崩れることはなく、見た目も問題はないようです。ただし、コードエディタ で見てみると、表示されない CSS が残っているので、消したり修正したほうがいいようです。
アクセス数
ところで、移行後にブログを見ていただいている数ですが（ありがたいことに）はてなブログのときより、若干増えました。はてなブログでのアクセス数は、当たり前ですが、移行した次の日から劇的に減りましたので記録しておくことにしました (笑) 。ただ、はてなブログでお友達になっていただいた方々が引き続き訪問してくださり、ブックマークを付けてくださったり、コメントを下さったりして、とても嬉しく思っています。
はてなブックマーク
「はてなブックマーク」もそのまま使えるようです。しかし、半世紀生きてます さんが書かれていた通り、お知らせがないのですぐには確認できません。そのため、せっかくブックマークしてくださって、コメントを下さっても気づくのが遅くなってしまい、申し訳なく思っています。でも、ブックマークしていただくのは嬉しいので、そのまま利用させていただきたいと思っています。
移行後に「はてなブログ」でしたこと
移行した後、すぐにブログの独自URLを削除しました。proでなくなったら、URL自体が消滅するのか？と思っていたら、独自に作った部分 (monteverde-aroma) はそのままで、後ろが「.com」から「hatena.jp」に自動で変わっていました。なので、しばらくしてからタイトルを変更しました。
よく分からず、はてなブログで別の無料サイトを立ち上げていたのですが、そちらは必要なかったようです。読書登録してくださった方々、申し訳ありません。移行後に自動設定されたブログが継続され、そのまま読者登録させていただいていた方のブログに「はてなスター」を付けることができるようです。
ところで、proの方は解約しようとしたのですが、即解約となならず、契約期間は残るようです。ただし、proを使うとなると、また独自URLを取らないといけないので、どっちにしても未使用です。
さいごに
はてなブログからWordPressに移行後（最初はちょっと泣きながら）格闘して、過去の記事を修正しながら使い方を学んできました。ただ、まだまだ便利な機能を使いこなせていない感じですが、なんとか写真を張り付けたり、カスタマイズしながら記事を書くことができるようになりました。一番うれしかったのがこれ
モバイルの方は（写真が多いせいか？）まだまだ改善が必要ですが、パソコンでの読み込みスピードは劇的にアップしました。移行した理由のひとつに、読み込み速度を上げたい！という想いもあったので、やっぱり移行してよかったな・・・と思いました。
まだ慣れていない部分も多く、はてなブログのほうが使い勝手が良かったな・・・と思うこともあります。カスタマイズが自由にできる反面、使いこなせるまでは時間がかかりそうです。でも、引き続き、いろいろ楽しみながらWordPressで頑張って、記事を増やしていこうと思います。
最後までご覧いただき、ありがとうございます。