WordからきれいなHTMLへ

クリップボードに実際に入っているもの

Wordでコピーすると、クリップボードには選択範囲のいくつもの版が同時に入ります。一つはプレーンテキスト。もう一つはHTMLで、ウェブサイトのエディターが貼り付け時に受け取るのはこちらです。

WordのHTMLは、ページが画面上でどう見えたかを記述しています。段落一つがこのように届きます。

<p class="MsoNormal" style="margin-bottom:8.0pt;line-height:107%">
  <span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Hello<o:p></o:p></span>
</p>

さらに、数百行のスタイルシート、条件付きコメント、Office独自の語彙のタグが加わります。Googleドキュメントはもっと短いものの、きれいとは言えません。すべてが docs-internal-guid という識別子付きのラッパーに入り、太字は font-weight:700 の付いた span です。ウェブサイトに載ると、これらのインラインスタイルがサイト本来のデザインより優先されます。貼り付けた記事がどれも前の記事と少しずつ違って見えるのはそのためです。

残すもの、変換するもの、捨てるもの

見出しには一つのルールがあります。出力ではレベル2〜4だけを使います。多くのサイトでは、ページのタイトルがすでにレベル1を使っているからです。文書に見出し1や表題があれば、すべての見出しが1段階下がります。レベル4より深いものはレベル4になります。

ノーブレークスペースは、役目がある場所にだけ残ります。; : ! ? % や通貨記号の前、そして数字とその後に続くものの間です。それ以外はすべて通常の空白になります。

概要の読み方

貼り付けると、最初の行に、マークアップの特徴からツールが判別した元のソフト（Word、Googleドキュメント、LibreOffice、その他）が表示され、変換前後のコードのサイズが示されます。Wordなら80〜95パーセント減るのが普通です。

その下には、削除したインラインスタイルとクラスの数、作り直した偽のリストの数が出ます。対応をお願いする行が2つあります。

• 削除した画像。Wordから貼り付けた画像は自分のパソコン上の一時ファイルを、Googleドキュメントからのものは期限付きのアドレスを指しています。どちらも訪問者には見えません。サイトのエディターで画像をアップロードし、そこで代替テキストを書いてください。
• 全体が太字の段落。最初から最後まで太字の短い段落（90文字未満）は、たいてい誰かが太字で打った見出しです。ツールはレベルを推測しません。検索エンジンとスクリーンリーダーが構成を把握できるよう、本物の見出しにしてください。

結果の2つの受け取り方

エディター用にコピー

整えた内容をリッチテキストとしてクリップボードに入れます。WordPressのブロックエディターに貼り付けると、見出し、段落、リスト、表がそれぞれ独立したブロックになります。ほとんどのビジュアルエディターも同じように扱います。

HTMLコード

インデント付きで読みやすいソースです。カスタムHTMLブロック、メール配信サービスのコード表示、テンプレートで使えます。

クリップボードにHTMLがまったくない場合、たとえばターミナルやテキストエディターからコピーしたテキストでは、空行が段落の区切りになり、単独の改行は <br> になります。

意図的に失われるもの

色、蛍光ペン、配置、インデント、フォントサイズ、段組みは捨てます。コメントとテキストボックスも同様です。Wordファイル内のブックマークへのリンク、たとえば脚注の参照や目次の項目は、リンクを失いテキストだけが残ります。表の罫線と列幅も消え、表の見た目はサイトが決めます。任意のタイポグラフィ設定はフランス語のテキスト向けなので、他の言語ではオフのままにしてください。