Wordで記事を書くとテンプレートが崩れることがあります

改行のつもりで実際は改段落になる

まず、Wordだけでなくブログサービスのエディターもそうなんですが、Enterキー押下による「改行」はできません。

Enter

Shift + Enter

改行、つまり文章末尾に <br> を記載するためにはEnterキーだけでなくShiftキーも同時押しする必要があります。Shiftを押さずにEnterだけで「改行(したつもり)」すると、その文章は p要素 としてマークアップされます(Wordの話です)

脳内イメージ(「改行」のつもり)

あいうえお<br>
かきくけこ<br>
さしすせそ<br>

実際のhtml

<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>

つまりEnterキーだけをWordで押下した場合は改行ではなく 改段落 です。FC2の新投稿画面でも同じです。新投稿画面の場合は p要素 ではなく div要素 としてマークアップされますが、これはユーザーに便宜を図っているためだろうと思います。何故それが「便宜」と言えるかというと p要素は文章の前後に空白を設けるのがデフォルトスタイル だからです。

【p要素でマークアップされた文章】

<p>これはp要素の文章その1です。</p>
<p>これはp要素の文章その2です。</p>
<p>これはp要素の文章その3です。</p>

【div要素でマークアップされた文章】

<div>これはdiv要素の文章その1です。</div>
<div>これはdiv要素の文章その2です。</div>
<div>これはdiv要素の文章その3です。</div>

【br改行でマークアップされた文章】

この文章その1は末尾brタグによる改行です。<br>
この文章その2は末尾brタグによる改行です。<br>
この文章その3は末尾brタグによる改行です。<br>

div要素マークアップと改行タグbrを用いた文章の見た目はほぼ同じですが、p要素だけは独特で p要素間の上下に一行分の空白ができている、これが本来のp要素のスタイルです。

FC2ブログの「旧投稿画面」には「改行の扱い『自動』」という設定があります。これは本来Enterキーのみ押下は改行ではないけれども、利便上「改行とみなす」設定です。なので特殊なんですね。

p要素の上下marginを知っている人が少ない

p要素間の上下の余白はhtmlの専門用語を用いると上下に margin が付いているために起こります。これがどのブラウザでもデフォルトのスタイリングです。p要素とは英語で言う paragraph(パラグラフ)のことですから、英語のgrammar(文法)でも上下に空白を設けるのが正当なルールです。

• Enterキー押下は改段落なのでp要素でマークアップされるのが正式
• p要素の上下にはmarginが付いているのが正式

ところが これらのルールを知っている人がものすごく少ない のが現実です。この2点については常にペアです(笑)
現にブログサービスのスタッフブログを拝見しますと「何故か勝手に行間が空いてしまう。不具合だ。直せ。」みたいな訴えがたくさん。実際は「Enterキーのみ押下を改行だと思いこんでおり、p要素の上下に空白ができるのは正当だと知らない」というだけ、つまり自分のせいなんですけどね (´・ω・｀)

FC2ブログの「Enterキー押下でdiv要素」になるのが「便宜」であると私が考えるのは、div要素にすればこの「勝手に空白」は起こらないわけなんです。しかし本来正しいのはp要素なんですよ。

WordはWYSIWYGエディターです

WordはWYSIWYG(ウィジウィグ, What you see is what you get, 見たまんま編集)です。作業中にhtmlタグを目にしたり意識することはありません。これを言い換えると どんなhtml内容になっているか知らないまま編集してしまう ことでもあります。

Wordのhtml文はめちゃくちゃ汚い問題 (∵`)
ホームページビルダーなんかも同じです。ビルダーなんてもう見るに堪えない(笑)

何が言いたいかというと、自分が書いた文章がp要素であることももしかしたら気づいていない、そして不要なタグや不明なCSSがくっついていることも理解していないまま コピー をします。コピーというのは文字列だけを拾うわけではなくhtml内容も同時に取得します。それ故「赤くした文字は赤く」「太くした文字は太く」というスタイリングを保ったままでペーストできるわけです。

Wordからコピーした文章をどこに貼り付けるかと言うと 新投稿画面 です。新投稿画面のデフォルトモードはWYSIWYGですからコピー情報がそのまま反映されます。いえ、されてしまいます。

旧投稿画面のデフォルトモードはhtmlエディターですから、取得したhtml内容は破棄されます。それがhtmlエディター(テキストエディター)の性質です。この仕組を考えると、Wordからコピーした内容をペーストするのは新投稿画面でしかありえません。そのためにWordを使っている、という言い方もできると思います。

Wordのhtmlの一例

悪例です。概ねこんな感じではないかと。

<p class="MsoNormal" style="margin-left: -49.65pt;" align="center"><span style="font-size:10.0pt;font-family:&quot;ＭＳ ゴシック&quot;;mso-ascii-theme-font:major-fareast;mso-fareast-theme-font:major-fareast;mso-hansi-theme-font:major-fareast;↩
mso-bidi-font-family:メイリオ">ここに一行目の文章が書いてあります。<span lang="EN-US"></span></span>
</p>
<p class="MsoNormal" style="margin-left: -49.65pt;" align="center"><span style="font-size:10.0pt;font-family:&quot;ＭＳ ゴシック&quot;;mso-ascii-theme-font:major-fareast;↩
mso-fareast-theme-font:major-fareast;mso-hansi-theme-font:major-fareast;↩
mso-bidi-font-family:メイリオ">ここに二行目の文章が書いてあります。<span lang="EN-US"></span></span></p>

うん。ひどいね。めちゃくちゃです(笑)
ソース間改行がわかるように ↩ のマークを入れてあります。上記htmlの実際の表示は以下の通りです。(ソースは綺麗に直しています)

これだけよ？たったこれだけのためにこんなに冗長なhtml内容になっているんです。でもご本人は全く気がついていません。何故なら WYSIWYGだから。これはある意味「簡単であることの弊害」と言えるかもしれません。Wordのソースを図解してみます。(ソースの見た目を少しだけ整形しています)

「問題アリ」と判断できる部位に白い背景をつけてあります。

p要素になっていることに気がついているか

FC2ブログではp要素の上下に空白ができるかどうかは テンプレート次第 です。

先程述べたように「p要素間上下にmarginがつくことを知らない」という方がとても多いので、多くの製作者はp要素の上下空白を リセット しています。つまり空白を作らないようワザとCSSを操作しているわけです。でないと「勝手に空白ができる」というクレームが生じる可能性がありますし(本来は言いがかりだとしても)、大勢のユーザーにとってその方が良いであろうという判断です。

私のテンプレートについては最近のものは記事内のp要素を敢えてデフォルトスタイリングに戻しています。理由は弊テンプレート利用者さんにhtml構文ルールへの意識の高い方が増えているから。つまり意図的にp要素を用いる方が増加しているようなので、意図的利用の場合は当然上下空白も見越しているはず。
(サイドメニュー部ではリセットをしています)

不要なクラス属性

不要っちゃ不要ですが、この記事を読まれまして「修正をしよう」と思った方にとっては逆にこのクラス属性のおかげで 全記事修正 の憂き目は免れます。その代りソース自体は汚いままというか、さらに汚染されることにはなります ^^;

装飾関連のCSSが style属性 を利用した インラインCSS という方法で書かれています。この書き方は非常に強制力が強い(優先度が高い)指定なので、スタイルシート側の指定が負けてしまいます。style属性内のCSSよりも優先度を上げるには最優先指定の !important を利用するしかありません。

ですから修正時には元のあまりよろしくないhtml内容はそのまま残し、せっかくクラス名がついてますからそれを利用してimportant指定でCSSをスタイルシートに追加する、という方法になります。悪手ですが全記事修正するよりその方がマシというかなんというか。しかもテンプレートを変更するたびにそのCSS内容を移植する羽目になります。これはもう仕方がありません (´・ｪ・｀)
それが嫌ならWordを利用した記事を全て手打ち修正。

ネガティブマージン指定は絶対ダメ 修正必須

サンプルソースを見ると margin-left: -49.65pt という箇所があります。p要素の左側にネガティブ(マイナス)の値(しかも単位がpt)が指定されています。ネガティブマージンを指定すると左側に存在する要素が右に引っ張られ、結果 p要素の左側が記事の幅を超過 つまり はみ出します。

何のための指定かよくわかりませんが、このネガティブマージン指定を割とみかけるんですね。Wordでの文章の見た目で決めてしまったのだろうと思いますが。これは修正必須です。直さない限りどのテンプレートを利用しても問題が生じます。

フォント指定が自分本位になっていないか

フォントというのは原則 所有するデバイス内にインストールされているもの以外は表示できない という性質のものです。サンプルソース内にある major-fareast はWord所有者以外には見られないフォント種です。

フォント表示の性質を考慮し、テンプレート製作者は Mac用フォント Windows用フォント 双方の指定、あるいは両者共通のフォントを指定するよう心がけています。ところがWord専用フォントを指定されてはその努力が水の泡。何度も言うようにstyle属性によるCSS指定は強制力が強いのでテンプレートスタイルシート側のフォント指定は上書きされて無効化されてしまいます。

閲覧者のデバイス内に該当するフォント種が無い場合には閲覧ブラウザの個人設定に倣った表示が行われます。つまり表示フォントの種類が閲覧者によってまちまち、記事作成者の意図したもので表示されている可能性は低いと思ってください。

おまけ

サンプルソースを修正してみます。

<p style="text-align: right; font-size: 10px;">ここに一行目の文章が書いてあります。</p>
<p style="text-align: right; font-size: 10px;">ここに二行目の文章が書いてあります。</p>

こんな簡単な内容なんですよ。もっと言えば

<p style="text-align: right; font-size: 10px;">ここに一行目の文章が書いてあります。<br>
ここに二行目の文章が書いてあります。</p>

こうかもしれませんよね。通常「段落」というのは一文毎に発生するものではありません。ある程度内容的にまとまった文章が段落を構成します。

まとめ

WYSIWYG(Word)からWYSIWYG(新投稿画面)へコピペする意味がちょっと個人的にはよくわからない。ツールバーの使い勝手とか指定できる色彩群など利便上のことでしょうか。でもWord使うより素直に新投稿画面のWYSIWYGで書いた方がよほど綺麗に仕上がるはずですよ (´・ω・｀)

というわけで Wordでの下書きは辞めましょう のススメでございます。