不具合や表示の崩れなくFC2ブログからwordpressに移転する

 このページはあくまでFC2ブログからwordpressに移行するにあたってのノウハウについてまとめたものです。いかに不具合や表示の崩れをなくし円滑に作業を進めるか、そこに主眼を置いています。
 そのためパーマネントリンクやSSLの設定のような万人が行うべき初期設定及び、サイト内リンクや画像のURLの変更といった環境の移行に伴って当然必要になる類の作業についてはまとめていません。

インポートする前にwordpressに入れるべきプラグイン

TinyMCE Advanced (機能拡張と一部自動整形の阻止)

 FC2ブログには旧投稿ページと新投稿ページがあります。ネット上を見る限り、多くの人がリアルタイムプレビュー機能や表の自動生成など多機能な旧投稿ページを使っているようです。これに慣れた人ならwordpressの投稿画面は不便に感じることでしょう。ミニマル過ぎて表の自動生成すらありません。そこで登場するのがこのプラグイン「TinyMCE Advanced」。ビジュアルエディターの機能を拡張してくれます。

 しかしこのプラグイン真価は多機能さにとどまりません。それはwordpressのありがた迷惑なまでの自動整形機能を一部ではありますが無効にしてくれるという点。<br>が連続で並んでいれば消しとばしますし、段落頭の字下げ代わりの全角スペースも消しとばす整形機能。行間や空白はスタイルを指定して適切に行えということなのでしょうが、毎回同じ広さなわけでも、毎回字下げするわけでもないですから面倒です。正直日本語の文章には不向きな機能です。

 インストールしたら「設定 > TinyMCE Advanced」から「段落タグの保持」にチェックを入れてください。環境によって英文で書かれている場合があるようですが、概ね「Stop removing the <p> and <br> tags」で始まる説明が書かれているものがそれです。これをせずにFC2から記事をインポートすると優秀な自動整形のおかげで後々の作業が増えます。ただし、すべての自動整形をストップするわけではないです。

WP Maintenance Mode (一時的にサイトを非公開に)

 FC2から記事を移行しただけでは、下書きになっているもの以外全てそのまま公開されます。当然の話ですね。しかし手直しのための時間は欲しいです。エクスポートしたログファイルから「STATUS: Publish」を「Draft」に書き換え、全ての記事を下書きとして保存することもできますがそれも面倒です。書き換え作業はこの後もたくさんあり、単純作業と言えど疲れます。その上完成後にはまた公開に切り替えが必要ですし…。

 「WP Maintenance Mode」はサイトをメンテナンスモードにして非公開にしてくれるプラグインです。デフォルトでは全ページ一括で非公開となりますが、「設定 > WP Maintenance Mode > 除外」にて記事に割り振ったスラッグを指定することで記事単位で公開していくことも可能です。

 メンテナンスのためにプラグインを入れるほどではない、完全非公開でなくともクローラーさえ来なければいい、ということであれば「設定 > 表示設定 > 検索エンジンでの表示」に続く項目にチェックを入れるだけでもいいかもしれません。ただしセキュリティ関係が万全でない場合、スパムにはご注意ください。

FC2からエクスポートしたログファイルを手直しする

 FC2ブログからエクスポートしたログファイルは1記事につき以下のような書式で保存されます。この書式に則り、記事の数だけ書き連ねられています。

エクスポートされたログファイルの例 備考
AUTHOR: のらねこ … ①
TITLE: 今日の出来事 … ②
STATUS: Publish … ③
ALLOW COMMENTS: 1 … ④
CONVERT BREAKS: default … ⑤
ALLOW PINGS: 0 … ⑥
PRIMARY CATEGORY: 日記 … ⑦
CATEGORY: 日記 … ⑧

DATE: 01/26/2019 21:26:57 … ⑨
-----
BODY: … ⑩
記事本文 記事本文 記事本文
-----
EXTENDED BODY:
… ⑪
追記部分 追記部分 追記部分
-----
EXCERPT: … ⑫

-----
KEYWORDS: … ⑬

-----
COMMENT: … ⑭
AUTHOR: 匿名
EMAIL:
IP: xxxxxxxxxxxxxxx.net
URL:
DATE: 01/26/2019 21:26:58
TITLE: 無題
SECRET: 0 … ⑮
PASS: aaaaaaaaaaaaaaa … ⑯
コメント文 コメント文 コメント文
-----

--------
:ブログ運営者名
:記事のタイトル
:公開(Publish) / 下書き(Draft)
:コメント受付 有効(1) / 無効(0)
:自動改行 有効(default) / 無効(0)
:トラックバック受信 有効(1) / 無効(0)
:カテゴリー名
:カテゴリー名(FC2ではPRIMARYと同じ)
:投稿日時
:記事本文
:追記部分(「続きを読む」で展開する部分)
:記事の概要。FC2ブログでは使用しない
:キーワード。FC2ブログでは使用しない
:ここから下はコメントがある場合生成される
:wordpressではコメント文として出力される
:wordpressではコメント文として出力される

 備考欄を参考に各自必要に応じて手直ししていただく他、で背景をハイライトした部分が、wordpressに移行するにあたって必ず手直しが必要になる部分です。ファイルの文字コードは「UTF-8」ですので、この形式で保存ができるテキストエディターで編集してください。
 ログファイルは長いですから、一つ一つ探すのではなくテキストエディターの「検索」「置換」を利用して効率よく行いましょう。

EXTENDED BODY:

 FC2ブログでは、ここに書き込まれた部分が追記として「続きを読む」を押した際に表示されます。つまり記事一覧(トップページ)では表示されず、リンクから個別ページに移動することで表示される部分です。
 一方、wordpressでは記事一覧に表示される冒頭の抜粋部分は、記事単位ではなくテーマ(FC2ブログでのテンプレートと同義)ごとに「文頭から◯文字を表示する」というように決められる場合が一般的です。よってこの「EXTENDED BODY:」の部分は不要になります。前の行の「-----」と共に削除し、追記部分の文章を「BODY:」から始まる文章と自然につながる形に修正してください。

SECRET: 及び PASS:

 この部分はコメントを運営者以外にも公開するかどうかの判定と、コメントにかけられたパスワードに関する部分です。ただ、wordpressにはこのような形式がないため、タグではなくコメント本文の一部として読み込まれてしまいます。このままインポートするとコメントの文頭にこの二行がそのまま表示されることになります。削除しましょう。
 また、「SECRET:」は「0」が公開、「1」が非公開を意味します。非公開のものはコメントごと消しておいたほうが無難でしょう。

FC2で自動生成したテーブル(表)のレイアウト崩れを直す

 ウェブサイトはHTMLという言語によって書かれていますが、HTMLの知識がなくともホームページを作ったりブログで投稿することができます。これを可能にしているのが「WYSIWYG(ウィジウィグ)式エディター」というもの。FC2ブログであれば旧投稿ページの「高機能テキストエディタ」が、wordpressであれば「ビジュアルエディター」がそれにあたります。文字の大きさや色を変えたい時、範囲を指定してツールバー内のアイコンを押せばその通りにスタイルを変更してくれます。知識を必要とせず視覚的に編集が可能になるのです。「WYSIWYG」とは「What You See Is What You Get」の頭文字から取られています。「見た目通りの結果が得られる」と言う意味です。
 サイトに表を作るにはHTMLでテーブルタグというものを使うわけですが、これもWYSIWYG式エディターにより自動生成が可能です。ポチポチとタグを打って作る人は少ないでしょう。

 しかし、FC2からwordpressに移行した際、表の崩れの原因になるのがこの自動生成機能です。語弊のないよう言い換えるならば「自動生成されるHTMLの書き方の違いから起きる」となります。
 以下2つがwordpressとFC2それぞれで生成したテーブルタグの中身です。どちらも「ページの中央配置、横幅200px、枠線の幅1px、縦3×横2の計6セル」という同じ条件の表を出力したものです。

wordpress(TinyMCE Advanced)により生成 FC2(高機能テキストエディタ)により生成
<table class="aligncenter" 
style="width: 200px;" border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<table width="200" border="1" 
align="center"><tbody><tr><td>1</td>
<td>2</td></tr><tr><td>3</td><td>4
</td></tr><tr><td>5</td><td>6</td></tr>
</tbody></table>
1. 横幅は<style>で指定されている
2. 表の中央配置は<class>で指定されている
3. 要素がセルごとに改行され整えられている
1. 横幅は<width>で指定されている
2. 表の中央配置は<align>で指定されている
3. コードは改行されず、長い一行になっている

横幅と配置の指定方法について

 FC2ブログの自動生成で用いられている<width>と<align>という属性による指定は、古い記述方法であり現在は推奨されていません。FC2ブログでは未だ旧投稿ページが主流であろう環境のため、テンプレート(wordpressでいうテーマ)もこれに倣ったものが多くある可能性があります。
 一般的には横幅や配置などスタイルを指定するものは<style>を使って記述することが勧められています。wordpressでも<width>や<align>による指定は可能ですが、優先順位が低くなりますし、対応状況はブラウザによります。CSSで基準になるものが指定されていた場合、ほぼ確実にそちらが優先されます。
 また、wordpressのビジュアルエディターでは<class>を付加することで配置が指定されます。<class>はCSS内で定義されたものですのでテーマによってレイアウトの細部が異なります。ただ中央に配置するだけなら「style="margin-right: auto; margin-left: auto;"」か「style="margin: 0 auto;"」で代替が可能です。

改行によるタグの整頓について

 作られた表をただただコードとして出力するだけのFC2ブログに対し、wordpressでは適宜改行が挟まれ、形を整えてくれます。改行するということ自体にはなんら問題はありませんし、HTMLの見やすさを考えればむしろ合理的な機能です。
 ただしこの整形処理はビジュアルエディターで新規作成した表だけでなく、FC2からインポートした記事内の表に対しても行われます。正しく行われるならよいのですが、一部の記事にてタグの「<」と「>」の途中に改行が入り、正しく読み込まれず意図した表示にならないものがありました。HTMLにおいては改行は半角スペースとして処理されるためと思われます。もちろんインポート前の段階においてはこのような改行もスペースもありませんでした。自身が経験した範囲で言うならば、表が大きく複雑でコードが長いものに起こるように感じます。また、これは想像の域ではありますが、改行のミスと自動整形が繰り返され、不自然な形で記述が増えてるのではと感じる部分もありました。
 現状対処方法は確認後手動で手直しするしかないように思われます。ただ、今後のバージョンアップによっては解消される可能性もあります。

それ以外でレイアウトが崩れるとしたら…

  • 改行<br>と改段落<p>
  • <p> <table> <img>等に設定されている余白

 なにか表示が変わるとすればこの辺りでしょうか。
 <br>は文の途中に挟むことで改行します。改行とは行を一つ送り、次の行に移動することです。ビジュアルエディターでは「shift+enter」で行います。<p>は</p>とセットで文章を挟むことで、一つの段落であることを示します。段落終わりには改行がなされ、また余白(margin)が設けられていることが一般的です。余白の広さはCSSで定義されています。ビジュアルエディターでは「enter」で現在の段落を閉じ、次の段落が始まります。「enterは改行ではない」というのがポイントです。

 FC2ブログでは<p>が自動で挿入されません。enterキーは旧投稿画面であれば<br>を、新投稿画面であれば<div>を出力します。知識のない人でも直感的に文章を書けるための仕様でしょう。もちろんこれらはworedpressに移行すれば最善な文法ではないとして自動整形されますので、多少の手直しが必要になることがあります。

 <p>のほか、<table>や<img>(画像)にも欄外の余白が設定されていることが多いです。思った通りの表示にならないと感じたら、一度CSSを見直してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA