例えばエクセルなどの文書で、こんな風に、テキストが書いてあって、それをWordPressの管理画面にあるテキストエディタに貼り付けた場合に、余計な書式が入ってしまって、結果、表示の崩れが発生する、ということが起こることがあります。
WordPressに限らず、CMSを使ってサイトを更新している場合の「あるあるネタ」ですね。実際に、表示崩れなどが起きて、修正のご連絡をいただくこともあります。
解決策としては、オフィス文書などからWordPressに直接貼り付けるのではなくて、一旦メモ帳に貼り付けるなどするとそこで書式が外れるので、そのように作業してくださいとお願いすることもありました。
しかし、それって面倒臭いんですよね。。。。おそらく。(ちなみにこれを書いている私は、オフィス文書で何かを書くということを苦手としておりまして、何か文章を書かねばならない時は、メモ帳のような、単純な機能しかないアプリケーションを愛用しております。)
他に何かソフトを使うことなく、解決できる方法はないものか?と、お問い合わせの度毎回、いろんな方法を試しておりましたので、そのことを共有したいと思います。
そもそも、何が起きるのか?
冒頭の画像のように、エクセルで作った文書から、セルを選択して、ビジュアルモードでコピペすると、こうなります。
テーブルになってしまいます。
この状態を、テキストモードで見るとこのようになります。
厄介なのが、幅の値が入ってしまうことです。今回はテーブルで起きたことですが、<p>タグでも同じようなことが起こり、幅や高さ、さらにフォントサイズやフォントファミリーの指定が入ってしまうことがありました。
こうならないように、安全に「貼り付け」をするには、どうするか〜?というお話です。
解決策1:テキストモードで貼り付ける
いきなりですが、大部分は、これで解決できると思います。
そもそも〜のところと同じようにコピーした文書を貼り付けると、以下の画像のようになります。
これで、OKです。
解決策2:「テキストとしてペースト」ボタンを使う
テキストモードを使うことが、例えばビジュアルモードから切り替えられないようにしているなどの理由で、難しい場合もあると思います。そんな時は「テキストとしてペースト」ボタンを使ってみましょう。
このボタンです。このボタンを押すと、こんな感じの画面になります。
プレーンテキストというのが、書式の付いていないテキスト、という意味です。
Wordから「リッチコンテンツ」を貼り付けたい場合はオフにして、とありますが、「リッチコンテンツ」というのが、書式付き(太字、色などの装飾付き)の文章ということです。
これを使って、実際にペーストして見ると下記のようになります。
書式なしでペーストされました。
ただし、わかりにくいのですが、この場合改行も無視されています。
テキストモードに切り替えて確認してみました。水色でハイライトされている部分に改行(正確にはエクセルのセルがふたつに分かれていたところ)が消えて、半角スペースになってしまっています。ちょっと、整形の手間がかかってしまいますね。
この2つが主な解決策になると考えています。
せっかくオフィス文書でキレイに整形したのに、それを「そっくりそのまま」貼り付けるのは無理ってこと??
身もふたもないですが、たぶん、、無理です・・・・。
オフィス文書でキレイに整形したものは、あくまでその「オフィス文書」を作ったあなたのパソコンの中で「ちゃんと整っている」だけに過ぎない、と考えます。例えば、そのオフィス文書を、お客さんに渡すとして、その人の環境で「同じように見える」保証も、ないと思います。
それはなぜか?
パソコンで使っているフォントが違えば再現できませんし、オフィスのバージョンの違いでも表示が違う場合があると思います。たまたま、大体の方が同じソフト、フォントを使っているか事故がなくて「誰でも同じように見える」と思い込めるだけではないでしょうか。
また、そもそもオフィス文書とウェブの「文書」では、なんといいましょうか、「書式の形式」が異なるので、全く同じにはできないと思っています。一部互換性はありますが、全てではないです。似てますけど・・・。
ウェブの文章は「オフィス文書」のようにはいかない、ということを覚えておいていただければと思います!
おまけ:「書式設定をクリア」ボタンで書式を削除してみる
貼り付けた後の文書の書式を消したい場合はこのボタンが便利です。
この場合、消せるのは、<strong>タグや、<em>タグ、フォントの色や背景色の設定、styleプロパティを削除するようです。
テーブル関連タグの、幅や高さは「書式設定をクリア」ボタンを使っても消せませんでした。