受信メールが画面の真ん中に細く表示される問題と、作成中の段落が中央揃えになる問題は、確認場所が違います。受信時はイマーシブリーダーや表示幅を、作成時は段落の配置と貼り付け書式を確認します。メールを読むだけの設定を変えても、送る本文の左揃えを変更したことにはなりません。
HTMLタグを文字として貼り付ける操作と、ブラウザー上の整形された本文をコピーする操作は別です。タグを本文欄へ貼るだけでHTMLメールのデザインに変換されるとは考えないでください。
受信メールが中央に細く表示される場合
まず同じメールを通常表示とイマーシブリーダーで比較します。Microsoft公式の説明では、イマーシブリーダーの［列の幅］は行の長さ、［テキストの間隔］は単語・文字・行の間隔を変える設定です。本文の段落を中央揃えに編集する機能とは区別してください。
- イマーシブリーダーの専用リボンやテキスト設定が出ているか確認する。
- 専用画面の［イマーシブリーダーを閉じる］、Web版では戻る操作で通常表示へ戻す。
- 同じメールの幅と文字間隔が戻るか確認する。必要なら通常表示のウィンドウ幅も広げて比べる。
閉じても同じメールだけが中央に表示されるなら、送信された本文のレイアウトも確認対象です。別のメール、Web版、送信者が意図した見た目と比較し、特定の原因と決めつけず範囲を絞ります。
| 状態 | 確認場所 |
|---|---|
| どの受信メールも細い列になる | イマーシブリーダーの列幅、通常画面の幅 |
| 特定の受信メールだけ中央にある | そのメールの本文レイアウトと別環境での表示 |
| 作成中の段落だけ中央揃え | 段落の配置と貼り付け書式 |
HTMLメールをブラウザからコピー＆ペーストすると左揃えになってしまう問題
メールを作成する際、ブラウザ上のHTMLエディタや他のWebサイトでデザインした内容をコピーして、Outlookの新規メール本文にペーストすると、なぜかすべて左揃えに崩れてしまうことがあります。あるいはフォントや行間、リンクの色なども変わってしまう場合も多々あります。ここでは、その原因と対策について解説します。
作成中は段落の配置とメッセージ形式を確認する
ブラウザーで表示される内容をコピーする場合、コピー元と貼り付け先で書式が変わることがあります。まず対象段落を選び、本文の書式設定から［左揃え］または［中央揃え］を選びます。操作はMicrosoftの段落配置の説明で新しいOutlook・従来版・Web版に分かれています。
対策1：貼り付けオプションや書式設定の確認
最初に試していただきたいのが、Outlookの「貼り付けオプション」をチェックする方法です。Outlookには、コピー＆ペーストを行った際に以下のようなオプションが表示される場合があります。
- 元の書式を保持（K）
- 貼り付け先の書式に合わせる（M）
- テキストのみ保持（T）
もし「貼り付け先の書式に合わせる」を選択してしまうと、Outlookの標準書式に上書きされ、中央寄せが左揃えに変わってしまうことがあります。中央寄せや独自デザインを保ちたい場合は「元の書式を保持」を選ぶか、貼り付け後に個別の文字や段落ごとに書式を修正する作業が必要となります。
実際の操作イメージ
- ブラウザ上のメール本文、またはHTML編集画面を選択してコピー
- Outlookで新規メールを作成し、本文エリアを右クリック
- 「貼り付けオプション」のアイコンや表示を選択
- 「元の書式を保持」や「テキストのみ保持」のどちらを選ぶかで仕上がりが変わる
また、コピー元のHTMLが複雑なCSSを使用している場合、Outlook側が正しく解釈できないこともあります。その際は、一度余計なCSSを削除したり、インラインスタイル（<p style="text-align:center;"> など）で調整したりすることを検討してみてください。
貼り付け書式を取り除いてから整える
既存の書式が不要なら、テキストのみとして貼り付けてから必要な段落を整えます。ただし、メッセージ全体をプレーンテキスト形式にしたままでは中央揃え、色、画像などの書式は使えません。書式が必要ならHTML形式で作成します。
Microsoftの形式変更の説明では、新しいOutlookはHTMLまたはプレーンテキスト、従来版にはリッチテキスト形式もあります。外部の受信者へデザインを保つ目的でリッチテキストを一律に選ぶのは避けてください。
署名・テンプレート・インデントを比較する
新規メールは正常なのに署名や定型文の追加後だけ位置が変わる場合、追加した段落の配置、インデント、表の幅を確認します。関係を確認する前にWord全体の既定スタイルを変更せず、まずコピーを残した下書きでその部分だけ修正して比較してください。
HTMLメールのレイアウトを保つための実践的テクニック
HTMLメールをOutlookで問題なく表示したい場合や、コピー＆ペーストによる書式崩れを最小限に抑えたい場合、いくつかのテクニックを組み合わせると効果的です。
インラインCSSの活用
Outlookでは外部スタイルシートや一部のCSSセレクタが正しく解釈されないことがあります。そのため、下記のようにインラインスタイルを用いた方が安全です。
<p style="text-align:center; font-family:Arial; font-size:14pt;">
ここにセンタリングしたいテキストを記入
</p>このコードはHTMLを編集できる作成環境での指定例です。Outlookの本文へコードそのものを貼り付けても、段落の書式設定の代わりにはなりません。また、新しいOutlookと従来版、受信アプリで同じ表示になる保証はないため、送信前に実際の宛先環境でテストしてください。
シンプルなHTML構造に整形
タグやタグなど、複雑なHTMLセマンティクスを使うと、Outlook側で解釈されずに予期せぬ挙動を起こすことがあります。大切なのは以下のように「保守的なHTML」を心がけることです。
<table width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse; margin:0 auto;">
<tr>
<td style="text-align:center; font-size:14px; line-height:1.5;">
メール本文の主要コンテンツ
</td>
</tr>
</table>テーブルレイアウトを使うと、比較的Outlookで表示が安定しやすい傾向があります。ただし、あまりに多層のテーブルをネストすると管理が大変になるので、必要最低限の構造にとどめましょう。
実際に送って表示を確認する
下書き画面だけで完成とせず、検証用に自分へ送信し、送信済みメールと受信側の表示を比較します。Web版と利用するOutlookの双方で見て、本文、署名、画像、リンクが意図どおりか確認してください。Wordでの見た目だけをすべてのOutlookの表示確認の代わりにはしません。
修正後の確認
受信時の幅は閲覧設定、作成時の文字揃えは段落の書式で確認します。イマーシブリーダーを閉じても直らないときは同じメールを別環境で比較し、作成時は署名や貼り付けた部分から調べます。変更は下書きで一つずつ試し、最後に実際の送受信結果を確認してください。
コメント