お知らせなどの記事が崩れる！？コピーするとタグまでコピーされるのが原因！

お知らせやブログなど、記事を投稿するとなぜか記事が崩れるという経験ってありませんか？

ブログなどの投稿に慣れている人は回避できると思います。ですが、ホームページやウェブサイトを初めて作って、お知らせやブログなど初めて記事を投稿する方の場合にはよく起きると思います。実際にサイトを運用し始めた方からも「普通に投稿しただけなのに、なぜか崩れます」と問い合わせがくることはよくあります。

こういった場合、他のウェブサイトからコピペした部分などが悪さをしていることが多いです。
実際に見てみましょう。

記事が崩れるのはコピペが原因？

—————
テキストだけコピーしたい
↑実際にテストで使用したテキストです。
—————

上の画像の「テキストだけコピーしたい」のテキストだけをコピーしたいとします。

実際にブラウザ上でコピーしてみます。

▼ コピーの仕方はこちら

WordPressの記事を編集するところに貼り付けてみました。テキストだけを貼り付けたかったのにピンクのラインが付いてしまいました。

—————
↓実際にテストで貼り付けたテキストです。
テキストだけコピーしたい
—————

上の画像のようにピンクのラインが見えているのは「ビジュアル」モードで編集している状態です。基本的にサイト上でどう見えるかを確認しながら編集できるモードです。

ここでは、なぜピンクのラインまでもコピーされているか知りたいので「テキスト」モードで確認してみます。「テキスト」モードとは、タグ（HTMLソース）の状態で編集するモードです。見てみた方が早いかと思いますので、画像を添付します。

「テキスト」モードで確認してみると、タグ（赤線の部分）もコピーされているのが分かります。そして、ここで指定されている「class=”line-pink”」line-pinkクラスには、ピンクの線を引くようなスタイルを指定しています。

よって、ピンクのライン付のテキストが表示されたわけです。

今回の場合はクラス指定ですが、タグにスタイルが設定されている場合があり、それが影響する

今回の場合はクラスによるスタイルでした。よって、他のサイトの記事などに貼り付けても見た目上はテキストだけ貼り付けられた状態になります。ですが、実際はタグも貼り付けられています。つまり貼り付け先のサイトにも「line-pink」クラスに対してスタイルが設定されていればそれが反映されます。

とはいえ、クラスが被ることはあまりありません。
ですが、タグ自体にスタイルを付けている場合があります。例えば、強調タグの「strong」であれば、文字を太く大きくしていたり、色を変えたり下線を引いていることもあるかもしれません。

そうするとコピー元がstrongタグを指定しているとそのスタイルが反映されてしまいます。意図にあったスタイルであれば良いのですが、崩れてしまうようなスタイルが反映されてしまう場合があります。

これが本記事で取り上げている記事が崩れてしまう原因です。

崩れないようにする方法

タグがコピペされる可能性を紹介させていただきました。原因が分かっていれば対処は簡単です。

「テキスト」モードでタグを消す

単純に「テキスト」モードで下記のようにタグ部分を削除します。大体のブログの記事編集画面でソースの編集は可能だと思います。

---------------
↓実際にテストで貼り付けたテキストです。
<span class="line-pink">テキストだけコピーしたい
</span>---------------

↓

---------------
↓実際にテストで貼り付けたテキストです。
テキストだけコピーしたい
---------------

一度テキストエディタに貼り付けてから再度コピーする

①ブラウザ上でコピーします。

②テキストエディタに貼り付けます。

③テキストエディタのテキストをコピーします。

④貼り付けます。
—————
↓実際にテストで貼り付けたテキストです。
テキストだけコピーしたい
—————
ピンクのラインなしで貼り付けられました。

Clibor（ソフト）を使う

▼ こちらをご覧ください

まとめ

タグをコピーしてくれることが有難いことも多いですが、そのことを知らない人からすると余計なお世話になる事もあります。知らないままコピペすると意図しないレイアウトになってしまったり、最悪の場合、崩れてしまいますのでご注意ください。

スポンサーリンク