アメブロからWordPress：pタグに対する処理

アメブロの記事をWordPressにコピーする時、アメブロの記事エディタでHTML表示モードにして、タグを丸ごとWordPressの記事にコピペして記事をプレビューすると、まず最初に、

「行間、広っ！！！」

と感じると思います。

大きな原因の一つが、段落を表す「pタグ」の設定が異なることです。

アメブロのpタグ（つまり段落）は、上下に余白（マージン）が設定されていません。

これに対して、WordPressでは段落の下（または上下）に1～2行分くらいの余白が設定されているのが一般的です。

例えばアメブロで、

と書くと、HTMLタグが となります。

1つめと3つめの段落の間は空白行ですが、実はここも1つの段落になっています。

そして、これをWordPressの記事にコピペすると、各pタグの下に1～2行分の余白が設定されるため、

↓こうなります。

各段落の下に設定された余白の影響で、アメブロでは1行分だった1つめと3つめの段落の間が3～5行分くらいになってしまうわけです。

これの対処方法はいくつか考えてみましたが、結局、どれも根本的に解決できる方法ではありませんでした。

比較的マシな方法として、以下の2つをご紹介します。

1. pタグを外して空白行を改行のみにする

要はHTMLタグではなく、テキストだけをコピペするということです。空白行に入っていた も消します。

ただし、WordPressでは複数の連続する改行が一つにまとめられてしまうため、この方法ではアメブロでもよく使われる「複数の空白行を使って行間を広く取る」ことはできません。

ほかにも、囲み枠内の最初の段落が上手く段落になってくれなかったり、最後の段落の下にアメブロの時にはなかった余白ができたりします。

また、手作業でやる場合は、記事毎にタグを外していくという手間がかかります。

2. アメブロ記事専用のスタイルを設定する

アメブロからコピペした記事専用に「pタグの上下の余白をゼロにしたスタイル（CSS）」を用意して記事に設定します。

ただし、単に追加CSSに設定しただけでは他の記事にも影響するため、アメブロからの記事とそれ以外の記事を切り分ける手段を考える必要があります。

切り分ける方法は、テーマの改造やプラグインを利用するなどして「bodyタグにアメブロ記事専用のclass名を付ける」のが簡単だろうと思います。

ちなみに、WordPressの段落調整の機能の影響で、編集したり、他サイトへ再コピペしたりすると、一気に行間を詰められたりしますので、再編集が前提であれば致命的な問題かもしれません。

どちらがよいか？

「１」と「２」のどちらが良いかの判断は難しいですが、再編集の場合の破綻の少なさや、テーマ変更の可能性、他サイトへ転記する可能性などを考えると、WordPressでさえあれば問題の出にくい「1」の方が良いような気がします。

しかし、どんな記事からでも完全に上手くいく方法は、残念ながら今のところ見つけられていません。

ちなみに、当アメブロからWordPressへのコピーの場合は、「1」の方法に近いやり方でやっています。