ブログ:コピー&ペーストした文章に、元々の書式が適用されることを防ぐ方法

イントロダクション

ブログを書くときには、HTMLにて記述するよりも、文字への装飾がそのまま見えるモードで作業することが多いと思います。

ブログ：文字への装飾がそのまま見えるモードで編集

やっぱり、HTMLで書くのは面倒くさいですし、どんな見た目になるのかも直観的に分かりづらいです。


さて、そのような編集方法にてブログを書くときに結構問題になるのが、書式が設定された文章をコピーしてきて、ブログに張り付けると、そのままコピー元の書式まで張り付けられてしまうという点です。


例えば、このブログのタイトルをコピーして、張り付けた場合には、

Dr.ウーパのコンピュータ備忘録

という風に、書式も一緒に張り付けられます。
文字のサイズ、文字の色などがコピー元の装飾のままです。


本当は、ただのテキストとして張り付けたい（書式はいらない）というケースも多いはずです。


その時の対処方法について記載します。

ブログ:コピー&ペーストした文章に、書式が適用されることを防ぐ方法

テキストエディタを使用して、文字装飾情報のみを消す

もっとも手っ取り早いのは、Windows であれば、メモ帳などのテキストエディタ（文章に書式を設定する機能がないもの）にいったんコピーした文章を張り付けて、再度その文章をテキストエディタからコピーします。

そうして、ブログのエディタに貼り付けます。

[元の情報]

ABC

↓

[メモ帳]

ABC

↓

[ブログのエディタ]

ABC

そのように、いったんメモ帳などのテキストエディタを経由することによって、コピーした文章に適用されていた装飾情報が、コピーした文章から消えます。

そのため、テキストエディタからコピーした文章を、ブログのエディタに張り付けた時には、装飾情報がない、ただの文字だけの情報を張り付けることができます。

ブログのエディタの機能によって、文字装飾情報を消す

そのほかにも、ブログのエディタによっては、張り付けた後の書式をクリアする機能を持っているものもあります。

でも、張り付けた後に書式をクリアするよりも、書式を消してから張り付けた方が、いろいろと楽な場合もあります。

まとめ

ブログを書くときに、書式をクリアした文章を張り付けたい場合には、テキストエディタに張り付けてから、ブログのエディタに張り付けましょう。

もっと手軽に書式なしのテキスト（プレーンテキスト）を張り付けるには？

Google Chrome を使っている場合

Google Chrome を使っている場合には、ブログのエディタ上で右クリックを行い、右クリックメニューから「プレーン テキストとして貼り付ける」を行うと、上記のようにテキストエディタを経由するような面倒な方法をとらなくても、簡単に書式なしのテキストを張り付けることができます。

もしくは、「Ctrl + Shift + v」のキーボードショートカットでも、同じように書式なしのテキストを張り付けることができます！

物凄く簡単です。

Google Chrome Blog: Tip: Just the text, please!
http://chrome.blogspot.jp/2010/09/tip-just-text-please.html

Firefox を使っている場合

Firefox を使っている場合には、「Ctrl + Shift + v」のキーボードショートカットで、書式なしのテキストを張り付けることができます！

キーボードショートカット | Firefox ヘルプ
https://support.mozilla.org/ja/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

是非、Chrome や Firefox を使っている人は、書式情報を抜いたテキスト情報のみを張り付けることが出来るキーボードショートカット「Ctrl + Shift + v」を試してみてください！

きっと作業を、より効率化することができます！


以下に、リッチテキストを張り付けられる領域(div 要素の contenteditable 属性を true にした領域)を用意しました。
早速試してみてください！

これをプレーンテキストとして張り付けてみてください！

HTML5 div contenteditable="true";
リッチテキストも張り付けられます。

contenteditable 属性 の参考資料：

[HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現 - monoe's blog - Site Home - MSDN Blogs
http://blogs.msdn.com/b/osamum/archive/2014/02/14/html5api-contenteditable.aspx