FC2ブログ移転にまつわるあれこれ2:ブログデザイン・リダイレクトなど

こちらは覚え書きをかねた移行ログ②です。

これまでの経過(サーバー・ドメインの検討、FC2ブログ有料版でリダイレクトできるか等)については前の記事をご覧ください。

ワードプレスをインストール

ドメインが決まったら、まずはワードプレスをインストールします。

スタードメイン無料サーバーは、ドメインの管理画面からサーバー管理画面に行きます。
これがどこかよく分かんなくて最初ちょっと探してました。

>スタードメイン管理
>管理ドメイン一覧
>ドメイン管理ツール
>サーバー管理ツール(スターサーバー管理)

画面にさえ辿り着けば、あとは簡単インストールがあるので楽です。
インストールが完了したら、ログインに進めます。
ただ…インストールが終わってすぐにログインできなくても、とりあえずは慌てず騒がずしばらく待ちましょう。
私は「インストール終わったのにログインできないしサイトにアクセスもできない!」とびびって検索しまくりましたが…。
(ちゃんと1~2時間くらいでログインできるようになりました)

まあ、サーバーの管理画面とかFFFTPとかでちゃんとフォルダ内にアクセスできるか確認すると安心なのかな。

というわけで、あんまり使わないかもしれないですが、念のためFFFTPも繋いでおきました。
中のファイル見るのこっちの方が楽だし…。

FFFTPの設定っていつも「これ何だっけ?」ってなるんですよね。
とりあえずこれもぐぐりながら試行錯誤。
やたら「接続できませんでした」と言われながらなんとかクリアしました。

【次回がある時のための覚え書き】
・ホストの設定名→任意の名前
・ホスト名(アドレス)→sv●●●.star.ne.jp(「サーバー情報」の「ホスト名」)
・ユーザー名→●●●.comなどのドメイン名
・パスワード/パスフレーズ→FTPパスワード(「FTPアカウント設定」で設定できる)

ちなみにスタードメイン無料サーバーの管理画面では、無料独自SSLも設定できるので、それもやっておく。

【マニュアル】
無料独自SSLを設定する(スタードメイン無料サーバー)

SSL導入後、もしワードプレス側にhttp://~のアドレスがあれば、https://~に変更すること。

ブログデザインを決めていく

テンプレートのインストール

まずはブログデザインを整えるべく、テンプレートをインストールします。
無料テンプレートで評判がいいのは、コクーンとヘクサリムが2強なのかな。
とりあえず両方インストールして触ってみました。

触ってみた感じは、ヘクサリムの方が直感的に使いやすい・分かりやすい印象でした。

ただ、私は逆に「ヘクサリムでこれできるけどコクーンはどうやるんだよ」と調べていって、結果的にコクーンのカスタマイズが進んでしまったんですね…。
そういう理由でコクーン使うことにしてしまいました。このしょうもなさよ。
だってデザイン触り出すと「あれもやりたい」「あ、これどうやるんだろう?」ってなるんだもん~!

最初は「両方で同じデザイン作ってみて見比べて決めればいいか」と思ってたんですが、そんな体力はなかった。
割とCSSも書いている(現在進行形)ので、もし今後他のテーマにしても少し調整すればある程度は使い回せるに違いない…ということにします。

ヘッダーロゴ・背景画像の作成(ペイント3D)

テンプレート決めと並行して、おおまかなブログデザインを考えていきます。

くすんだ緑が好きなので緑ベースで…。
でも凝ったことはできないので、背景には植物の写真を置く感じかな…。
凝ったデザインに素人が手を出すと火傷しますからね。シンプルイズベストで。

ツタ重ねたら格好いいかな~と思い、透過素材を重ねる手段を探したところ、どうもペイント3Dでできるんですね。

【手順】
・1つ目の画像を開く
・2つ目の画像を重ねる
 >メニュー
 >開く
 >ファイルの参照

※ドラッグ&ドロップでも可

意気揚々と重ねてみました。

が。

……うん、素人がやっても見栄えが悪い!

ということで重ねるのはやめにして、単に横に並べて繋げ、背景に配置することにしました。

サイズ縮小したり、不要な部分をトリミングしたりなんかの使用感は、普通のペイントとそう変わりませんね。
ペイント3D、意外と便利だな。

【写真素材の配布元】
Photo Chips
※ロゴはSTORESのロゴメーカーを使いました(3月で提供終了のようですけど…)

その他(デザインの調整)

その後は細々とテンプレートの見栄えを調整して…。
細々と…細々と…。

リンクの色の変更や、背景やメニュー部分のデザインカスタム。
ヘッダーロゴのサイズ感がスマホで見るにはあまりよろしくなかったようなので、ペイント3Dで作り直したり…。

……いやきりがないな!
とりあえず移転してしまった方がいいな!

というわけで、一旦、最低限のデザインはできたものとして、記事の移行に進みます。

パーマリンクの設定と記事のインポート

FC2からのエクスポート、ワードプレスへのインポートそのものは、簡単にできました。
テストがてらにやってみた時、こんな一瞬でこんな完璧にインポートできちゃうの!?って思ったくらい。

ただ、インポートする前に、いくつか事前準備をした方が良さそうでした。
(というわけで、仮インポートした記事は全部ゴミ箱に捨てられました笑)

【参考にしたサイト】
エクスポート・インポートの手順
FC2ブログ(無料)からWordPressへ移行する具体的すぎる手順
全体的な手順
FC2からWordPress、移行作業まとめ2021

パーマリンクの検討

まずは新ブログでの各記事のパーマリンクを決めていきます。
パーマリンクというのは、URLの中の、各記事を表す個別部分です。

下のURL↓だと「123」や「/123/」の部分
https://●●●.com/123/

FC2ブログだと↓「blog-entry-123.html」の部分
http://●●●.blog.fc2.com/blog-entry-123.html

※パーマリンク=URL全体(https://●●●.com/123/)という意味もあるのかな?
なんにせよページごとの固有のものがパーマリンクですよってことですかね。

このパーマリンク、ワードプレスの「設定」>「パーマリンク」から、自動でつける(変更する)ことも可能なんですけど…。
自分の場合は、それぞれのURL見たら大体どの記事か、ぱっと分かるようにしたかったのです。
FC2みたいにパーマリンクが数字だと、アクセス伸びてる記事のURL見てもどの記事かよく分かんないし…。

Excelに旧URLと記事タイトルを並べて…。
新URLの共通部分をだーっとオートフィルして…。
あとはパーマリンク部分などを隣の列に入力。
それらを更に隣の列で&で繋げば、あっという間に新URLができました!
Excelは便利で好き。

ちなみに私の場合は、元々、FC2アクセス解析の「解析ページの管理」に、全記事のURLと簡単なタイトルを入れてあったので、それを一括コピペしましたが。
まあそうでなくても、FC2はパーマリンクがきっちり投稿順の数字なので、Excelなどで、楽に旧URL一覧作れると思います。

インポート準備(置換作業)

エクスポートした記事はテキストデータになってるので、インポートする前に、内部のURLリンクなどを置換で変えちゃいます。
インポート後にも変えられますが、こっちで一括置換した方が楽な気がする。

各記事のURLだけでなく、記事に引用してあった画像についても、それぞれURL(というかパス)がどうなるか、事前にチェックして、置換で変えていきます。

まあワードプレスの場合、デフォルト設定だと画像は指定した特定のフォルダに入るだけなので、そこのパスがわかれば問題ないです。

FC2ブログでの画像アドレス
>https://blog-imgs-123.fc2.com/h/h/e/●●●/abc.jpg

↓置換

ワードプレスでの画像パス(デフォルト)
>/wp-content/uploads/2023/2/abc.jpg
※2023の部分は年、2の部分は月

「123」の数字は色々あるので、とりあえず「https://blog-imgs-」とか「img」とかで検索掛けて置換対象を探してました。

私の場合は、年・月で自動でフォルダ作られるのが面倒なのと、画像フォルダの場所を上層に変えたかったので、その辺の設定はいじってます。

※あとから考えると、このURL置換にあわせて、各記事の小見出しにhタグも入れちゃった方が楽だったな…。
FC2ブログではあまり深く考えず、小見出しつける時に、hではなくdivやstrongでデザイン調整だけしていたので、移行前に書いた記事は目次が作れてないんですよね…。

おや?コメントの様子が…?

URL関係の置換が済んだら、いよいよ正式に記事をインポート!
…記事公開状態のままでインポートしちゃったので、インポート後に、クイック編集でぽちぽち非公開作業をしておりました。
まあ別に、移行がスムーズに終わるなら、公開のままでも良いのだと思います。再公開の手間もかかるし。

さて、うまくインポートできたみたいだ!
と思いきや。
……あれ?コメントが一部反映されてない……?

色々試したところ、どうも絵文字が入ったコメントは、うまく反映できなかったみたいです。
絵文字を消してインポートし直したらうまくいきました。
でもなんかせっかくコメントつけてくれた方に申し訳ないな…。

それにしても、インポート完了画面ではちゃんと正しいコメント数が取得できてたんですよね。
この記事のコメント数は2です、みたいの、インポートツールちゃんはしっかり分かってはいるんですよ。
それでいてコメントが反映しきれないの、なんだかちょっと変な感じがしますが、こればっかりは仕方ないんでしょうね。

ワードプレスでのパーマリンク修正作業

さて、単にインポートしただけだと、各記事のURLは下記のような感じになってます。

https://●●●.com/?p=123
(パーマリンク設定が「基本」の場合)

これを自分で決めたパーマリンクに変えていくんですが…。
……一括で置換できる便利なプラグイン、ないの……?

リダイレクトとか、CSV出力とかのプラグインはあるんですけど。
パーマリンクの一括置換、ないの…?

いや、単に探せていないだけなのかもしれませんが、軽くぐぐった限りではそういう便利なプラグインのご紹介などは見つかりませんでした。

当ブログはしょせん100記事に満たないくらいの分量ですので、おとなしく各記事の編集画面から手動でちまちま変えました。
(なんかもっと良い方法があればご一報ください)

リダイレクトの設定

URLが変わることになっちゃったので、FC2ブログの各記事URLから、新ブログの該当記事に飛ばせるようにしたかったんです。
そのためには、新旧ブログ両方で、リダイレクト(もしくはリダイレクト風の)設定が必要になります。

ただ…FC2側の設定に、めちゃくちゃ苦戦しました。

まずは新ブログで設定

新ブログの方のリダイレクトは、プラグイン「Redirection」を入れてあったので、そちらを使っています。
URLリストをCSVで作って、取り込むだけ。
でも「.htaccess」でやった方が、プラグイン減るので良いのかもしれないですね。
そのうち変えるかも。

次に旧ブログで設定

一番苦戦したのがここです!

さて、たくさんの先人が記事書かれてるので細かい説明は省きますが、FC2ブログで可能なのは、あくまで「リダイレクト風の」処理になります。

リダイレクト風処理のためのコードを、FC2ブログテンプレートのhtml内に記載していくわけですが…。
なっかなか転送がうまくいかなくてね!!

まず結論から言うと、うまくいったコードはこちらになります。

<!–ここから移転用–>
<meta name="robots" content="noindex,nofollow,noarchive" />
<!–permanent_area–>
<!–topentry–>
<meta <!--index_area--><!--/index_area--> http-equiv="refresh" content="1;https://hhetayokoo.com/blog/blog-entry-<%pno>.html" />
<link rel="canonical" href="https://hhetayokoo.com/blog/blog-entry-<%pno>.html" />
<!–/topentry–>
<!–/permanent_area–>
<!–ここまで–>

※コピペすると「"(半角)」が「”(全角)」になることがあるようなので、注意!

最初の「meta name=”robots”~」は、このページはもうインデックスなどしなくて良いよ、と検索ロボットに伝えるためのもの。

2つ目の「meta http-equiv=”refresh”~」が、新ブログへのリダイレクト部分。
途中に挟まっている「index_area」×2は、今のFC2ブログは本来「http-equiv=”refresh”」をここに書けないようにしているので、それを回避するために入れてあるコードとのこと。

「link rel=”canonical”~」は、検索ロボットに「これはアクセス稼ぎのためのコピーコンテンツ!」とNGつけられないように、「この旧ブログはもう移転してて、新ブログのこっちが正式なURLなんですよ」と伝えるものです。
…効果のほどは不明ですが、旧記事を非公開にせず、転送かけたいなら絶対必要。

【参考にしたサイト】
【移転】FC2ブログからWordPressへ記事ごとにリダイレクトさせる方法
最初はこちらを参考にやってみたんですけど、うまくいかなくて。

無料FC2ブログから「meta refresh」で引越しURLへ転送(リダイレクト)方法
こちらとも見比べてみて、metaタグを「>」で閉じる前に「/」が省略されてるから駄目なのかな、と足してみて。
それでもうまくいかなくて。
※自分のブログテンプレートの他の部分を見たら、metaタグは全部きっちり「/>」で閉じてありました。

FC2からwordpressへ引っ越し 無料でリダイレクトする方法
こちらのサイトでは<%topentry_no>ではなく、<%pno>を使っていたので、そちらに変えてみたら、うまくいきました!

FC2ブログ マニュアル
テンプレート用 変数一覧
ちなみに、ここを見ると、<!–topentry>~<!–topentry>に囲まれてれば、<%topentry_no>は使えるはずなんですよね…?
まあうまくいったので良しとします。

ちなみに<%pno>はどこでも使えるコードなので、<!–topentry>で囲む必要はないのかも?
(確かめてはないです)

<!–permanent_area–>は個別記事だけで適用するためのコードですね。

あとは…FC2ブログのテンプレートはPC版、携帯版、スマホ版で分かれているので、特にスマホ版にもタグ適用させるのを忘れずに。
(携帯版は元々テンプレート適用していなかったので、何もしてません…)

新旧ブログでリダイレクトを設定する理由

ところで、リダイレクトが、新ブログ、旧FC2ブログ、両方で設定が必要な理由、最初いまいち何でか分からなかったんですよね。
旧ブログでちゃんと新URLにリダイレクトかければそれで良いんじゃないの?とか思ってました。

全然仕組みを理解していないとこう思っちゃうんですね!

全部の記事に個別にリダイレクト書くならこの考え方でもいけるんですけども。
そんな、1記事1記事個別に書くというのか。そんなのめんどいわ。

考え方としてはこうですね。
①旧ブログのURL(記事番号)を元に新ブログのURL(旧ブログの記事番号を受け継いだもの)に飛ばす
②新ブログ内でそれを更に該当の記事URLにリダイレクトする

わかりにくいんで補足しますと。

FC2ブログの個別記事URL
http://●●●.blog.fc2.com/blog-entry-123.html

↓新ブログに転送

https://○○○.com/blog-entry-123.html

でもこの「blog-entry-123.html」は個別記事のパーマリンクとは違うものなので…

↓もう一回、正しいURLに転送

https://○○○.com/abc/

ちゃんとパーマリンク「abc」に転送できました!

こうやって二段階で処理することによって、リダイレクトが可能になるわけです。
「そもそも「meta http-equiv=”refresh”~」って何なの?」とタグの解説を調べて、そこで初めて理解しました。
なるほどなー。うまいこと考えるなー。

【参考にしたサイト】
meta refreshって何?リダイレクトとの関係も解説!

【追記】
後日サーチコンソールで確認すると、1回目転送先の「https://○○○.com/blog-entry-123.html」がいくつか「ページにリダイレクトがあります」と、インデックス未登録ページとして扱われています。
たぶん、このリダイレクト風処理のせいで、Google検索ロボットが旧FC2リンクから流入してきて、リダイレクトあるやんけってなったのかなと。
まあ特に問題はなさそうなので放置で。

【追記2】
次記事で書いたサーチコンソールの移行設定のおかげか、こちらのリダイレクト風処理のおかげかは分かりませんが、移転から1ヶ月足らず(3週間ほど)でGoogleでの検索順位はだいたい戻ったように見えます。記事によってはまだのもあるかも。
実は、移行1~2週間ほどで、FC2旧ブログはnoindexのため早々に検索に表示されなくなり、それでいて新ブログは検索にひっかかりやすい記事が以前と変わってしまっていて。
「サーチコンソールにページにリダイレクトあるとか言われちゃうし、やっぱりリダイレクト風処理じゃ駄目だったのかな?」「新ブログは結局、評価引き継げずに再スタートになるのかな?」と、しばらくやきもきしていましたが…良かった!

まだまだ続くよ移転作業

当初、この記事に移行後の細かい作業も書いていたのですが。
だいぶ長くなりましたので、この後の部分は次の記事に分割しました。
よろしければそちらもご覧ください。

FC2ブログ移転にまつわるあれこれ3:ワードプレス移行後の感想など
こちらは覚え書きをかねた移行ログ③です。 ここに至るまでの作業(記事インポートやリダイレクト等)については、前の記事などをご確認ください。

コメント

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