選ばれるAI診断

WordからWordPressに貼り付けると崩れる理由と、崩さない入稿の手順|見出し・画像・表を守るコツ

公開日: / カテゴリ: WordPress入稿 / 執筆: エラバレル

WordからWordPressに貼り付けると崩れる理由と、崩さない入稿の手順|見出し・画像・表を守るコツ

「ライターさんからWordで原稿が届くが、WordPressに貼ると見出しがただの太字になってしまう」「画像だけがどうしても入らない」。Wordで原稿を受け取って、WordPressで記事を公開している会社の担当者から、よくこうした悩みを聞きます。

先に結論をお伝えします。WordからWordPressへの貼り付けが崩れるのは、Wordの「見た目の情報」と、WordPressの「ブロックの構造」が別のものだからです。Word側で見出しや箇条書きの機能を正しく使い、画像は別に用意して、貼り付けたあとにブロックとコードを確かめれば、崩れはほとんど防げます。

この記事では、崩れが起きる理由、よくある崩れ方の一覧、崩さないための下準備と貼り付けの手順、画像と表の扱い方、公開前の確認方法を説明します。最後に、Wordの原稿をGoogleドキュメントに切り替えて入稿する方法も紹介します。

この記事でわかること

  • WordからWordPressに貼ると崩れる理由
  • よくある崩れ方と、その原因の一覧
  • Word側でやっておく下準備
  • WordPressのブロックエディタに貼り付ける手順
  • 画像と表を崩さずに入れる方法
  • 原稿をGoogleドキュメントに切り替えて入稿する方法

WordとWordPressの違いとは? 崩れる理由

Wordは、紙に印刷することを前提にした文書作成のソフトです。文字の大きさ、フォント、行間、余白、ページの区切りなど、「どう見えるか」の情報をたくさん持っています。

一方のWordPressは、ウェブページを作るための仕組みです。現在のWordPressの標準の編集画面(ブロックエディタ)では、本文を「段落」「見出し」「リスト」「画像」「表」といったブロックに分けて管理します。見た目は、テーマ(サイトのデザインの設定)がまとめて決めます。

WordWordPress(ブロックエディタ)
考え方紙にどう見えるかを細かく決める内容の種類(見出し・段落など)を決め、見た目はテーマに任せる
見出しスタイルで決める(文字を大きくしただけのものも見出しに見える)見出しブロック(h2・h3など)として決める
画像文書ファイルの中に入っているメディアライブラリにアップロードして、画像ブロックで表示する
余白空の行やスペースで調整しがちテーマのデザインで決まる

貼り付けるときは、WordからコピーしたものをWordPressが読み取り、ブロックに置き換えます。このとき、Wordで「見た目だけ」で作ったものは、WordPressには意味が伝わりません。たとえば、文字を大きく太くしただけの行は、Wordの画面では見出しに見えても、WordPressには「太字の段落」としてしか伝わりません。これが崩れの一番の原因です。

見出しの「h2」「h3」とは

ウェブページの見出しには、h1からh6までの段階があります。WordPressでは、記事のタイトルがh1になり、本文の大見出しはh2、その中の小見出しはh3を使うのが一般的です。見出しの段階が正しいと、読者にも検索エンジンにも、文章の構造が伝わりやすくなります。

WordからWordPressに貼るとよくある崩れ方

実際によく起きる崩れ方と、その原因をまとめました。

崩れ方主な原因
見出しがただの太字の段落になるWordで見出しのスタイルを使わず、文字を大きく・太くしただけ
空の段落がたくさん入るWordで行間を空けるために、空の行を入れている
箇条書きが「・」や「1.」の文字になる箇条書きの機能を使わず、記号を手で打っている
画像が表示されない、または貼れないWordの画像はファイルの中にあり、そのままではWordPressにアップロードされない
表の幅や色が崩れるWordで細かく決めた幅・色・結合したセルが、ウェブでは同じように表示されない
字下げが全角スペースで残る段落の頭に全角スペースを打っている
文字の色やフォントの指定が残るWordの書式の情報が、コードの中に残っている
テキストボックスや図形が消えるWordPressに同じ仕組みがない

この中で、見た目ですぐ気づくのは見出しや画像です。一方で、文字の色やフォントの指定は、画面では目立たなくても、コードの中に余計な情報として残っていることがあります。テーマを変えたときに一部だけ違う見た目になる、といった問題の原因になります。

「とりあえず貼って、あとで直す」がいちばん時間がかかる

崩れた状態から1つずつ直すと、見出しを付け直し、空の段落を消し、画像を入れ直し…と、1記事に長い時間がかかることがあります。貼る前にWord側で整えるほうが、結果として早く終わります。

崩さないための下準備(Word側でやること)

貼り付けの前に、Wordの原稿を次のように整えます。ライターさんに原稿を頼むときに、最初からこのルールで書いてもらうと、受け取ったあとの手間がさらに減ります。

1. 見出しは「スタイル」の見出しを使う

Wordの「ホーム」タブにある「スタイル」の一覧から、「見出し1」「見出し2」などを選んで見出しにします。文字を大きくしたり太字にしたりするだけでは、見出しとして伝わりません。

記事のタイトルはWordPressのタイトル欄に入れるので、本文では次のように決めておくと、貼ったときに段階がそろいます。

  • 本文の大見出し → Wordの「見出し2」
  • その中の小見出し → Wordの「見出し3」

2. 箇条書きと番号は、Wordの機能で作る

「・」や「1.」を手で打たず、「ホーム」タブの箇条書きや段落番号のボタンを使います。こうしておくと、WordPressのリストブロックとして入ります。

3. 空の行で間を空けない

段落と段落の間を空けるために空の行を入れていると、WordPressでは空の段落として入ります。間隔はテーマのデザインで自然に空くので、空の行は消しておきます。Wordの「編集記号の表示/非表示」のボタンを押すと、空の行や改行の記号が見えるので、見つけやすくなります。

4. 字下げの全角スペースを消す

ウェブの記事では、段落の頭の字下げはしないのが一般的です。全角スペースで字下げしている場合は、置換の機能(「ホーム」タブの「置換」)で消しておきます。

5. テキストボックス・図形・脚注は使わない

WordPressには、Wordのテキストボックスや図形と同じ仕組みがありません。補足は普通の段落に書き、図は画像にしておきます。脚注も、本文の中か記事の最後に書き直します。

Word原稿の下準備チェックリスト

  • 見出しに「見出し2」「見出し3」のスタイルを使っている
  • 箇条書き・番号は、Wordの機能で作っている
  • 段落の間に空の行を入れていない
  • 段落の頭に全角スペースがない
  • テキストボックス・図形・脚注を使っていない
  • 画像は元のファイルが別に用意されている

WordPressに貼り付ける手順

下準備ができたら、WordPressに貼り付けます。ここでは、標準のブロックエディタを使う方法を説明します。

  1. WordPressの管理画面で、「投稿」の「新規投稿を追加」(バージョンによっては「新規追加」)を開きます。
  2. タイトル欄に、記事のタイトルを入れます。Wordの原稿のタイトル部分はコピーに含めません。
  3. Wordで本文を選んでコピーします(タイトルを除いた本文だけ)。
  4. WordPressの本文の最初の空の段落をクリックして、貼り付けます。ブロックエディタが、見出し・段落・リストなどを自動でブロックに分けてくれます。
  5. 左上あたりにある「ドキュメント概要」(リスト表示)のボタンを押して、ブロックの一覧を確かめます。見出しがきちんと見出しブロックになっているか、空の段落がないかが分かります。
  6. 見出しになっていない行があれば、そのブロックを選び、ブロックのツールバーで見出しに変えて、h2かh3を選びます。
  7. 画像を入れたい場所に画像ブロックを追加し、画像をアップロードします(次の章で説明します)。
  8. 最後に、プレビューで見た目を確かめてから、下書き保存または公開します。

画面の名前やボタンの位置は、WordPressのバージョンやテーマによって少し違うことがあります。

書式が崩れすぎるときは「テキストだけ」貼る

Word側の書式がどうしても残ってしまう場合は、書式を捨てて文字だけを貼る方法もあります。WindowsのChromeなど多くのブラウザでは、Ctrl+Shift+Vで、書式なしで貼り付けられます(Macではキーの組み合わせが違うことがあるので、ブラウザの「編集」メニューで確かめてください)。この場合、見出しやリストも消えるので、WordPress側で付け直す必要があります。短い記事や、書式が大きく崩れる原稿のときの最後の手段と考えてください。

画像と表を崩さずに入れる方法

画像は「元のファイル」を別に用意する

Wordに貼られた画像は、Word文書の中に入っています。WordPressに文章と一緒に貼り付けても、画像はうまく入らないことが多いです。画像はWordから切り離して、元のファイルとしてWordPressにアップロードするのが確実です。

元の画像ファイルを手に入れる方法は、次の3つです。

  • ライターさんに、画像を別ファイルで送ってもらう(いちばん確実)
  • Wordの「名前を付けて保存」で「Webページ」として保存する:文書と一緒に、画像が入ったフォルダーができます
  • Wordのファイル(.docx)を、名前の最後を「.zip」に変えて開く:中の「word」→「media」というフォルダーに画像が入っています(元のファイルはコピーしてから試してください)

画像をWordPressに入れるときは、画像ブロックの「アップロード」から選ぶか、「メディア」の「ライブラリ」に先にまとめてアップロードしておきます。アップロードしたら、画像の説明(代替テキスト)も入れておきます。代替テキストは、画像が見えない人や検索エンジンに、何の画像かを伝えるための文章です。書き方は画像のalt属性の記事で説明しています。

画像の名前と大きさを整えてからアップロードする

「image1.png」のような名前のままより、内容が分かる名前にしておくと、あとでメディアライブラリから探しやすくなります。また、スマホで撮った写真は大きすぎることが多いので、横幅を小さくしてからアップロードすると、ページの表示が速くなります。

表はシンプルにして、貼ったあと確かめる

Wordの表をWordPressに貼ると、表ブロックとして入ることが多いですが、セルの結合・細かい幅・色は崩れやすい部分です。表はできるだけシンプルにして(結合しない、色を付けない)、1行目を見出しの行にしておくと、ウェブでも見やすくなります。

貼ったあとは、表ブロックの設定で、見出しの行(ヘッダー)を付けるかどうかを確かめます。スマホでは横にはみ出すこともあるので、プレビューでスマホの表示も確かめてください。列が多い表は、2つに分けるか、箇条書きに書き直すほうが読みやすくなる場合もあります。

崩れるのが面倒だからといって、表をスクリーンショットの画像にして貼るのはおすすめしません。画像にした表は、文字を選んでコピーできず、検索エンジンやAIにも中の文字が読み取りにくくなります。料金表や比較表のように大事な情報ほど、表ブロックの文字として入れておきましょう。

入稿の時間を短くするコツ

毎回の入稿を速くするには、1記事ごとの作業を減らすより、「崩れない原稿が届く仕組み」を作るほうが効きます。

ひな形のWordファイルを渡す

見出し2・見出し3・箇条書きのスタイルを設定済みのWordファイルを1つ作り、ライターさんにはそのファイルをコピーして書いてもらいます。見本の見出しや文章を入れておくと、「どこで何のスタイルを使うか」が伝わりやすくなります。

記事の設定は原稿の先頭にまとめてもらう

記事のタイトル、URLの末尾(スラッグ)、カテゴリ、検索結果に出る説明文などは、原稿の先頭にまとめて書いてもらうと、入稿のときに探す手間がなくなります。本文と分けておけば、コピーする範囲も迷いません。

確かめる順番を決めておく

入稿のたびに確かめる順番を「ドキュメント概要で見出しを見る → 画像を入れる → 表を見る → コードを見る → プレビュー」のように決めておくと、見落としが減ります。担当者が替わっても、同じ品質で入稿できます。

公開前に、コードと見た目を確かめる

貼り付けたあと、見た目に問題がなくても、コードに余計な情報が残っていることがあります。公開する前に、一度コードを確かめておきます。

  1. 編集画面の右上の「︙」(オプション)のメニューを開き、「コードエディター」を選びます。
  2. 本文がコード(HTML)で表示されます。
  3. 「style=」「font-family」「mso-」「span」のような文字が多く入っていないかを見ます。これらはWordの書式の名残です。
  4. 多く残っている場合は、そのブロックを書式なしで貼り直すか、文字を打ち直します。
  5. 終わったら、同じメニューから「ビジュアルエディター」に戻します。

見た目が同じでも、コードがきれいな記事のほうが、テーマを変えたときにも崩れにくく、検索エンジンやAIにも構造が伝わりやすくなります。

〇〇工務店(ライターからWordで原稿を受け取っている)の場合

よくある状態:毎回、Wordの原稿を貼ると見出しが太字の段落になり、空の段落が10個以上入る。画像は1枚ずつ保存し直して入れていた。
変えたこと:①ライター向けに「見出しはスタイルの見出し2・見出し3を使う」「空の行を入れない」「画像は別ファイルで送る」のルールを渡す ②貼ったあとはドキュメント概要でブロックを確かめる ③公開前にコードエディターで余計な書式が残っていないかを見る。
結果:直す作業が、見出しの付け直しから「確かめるだけ」に変わった。

Wordの原稿をGoogleドキュメントで入稿する方法

ここまでWordのまま入稿する方法を説明してきましたが、原稿をGoogleドキュメントに切り替えると、受け渡しも入稿も楽になることがあります。

WordのファイルはGoogleドライブにアップロードすると、Googleドキュメントとして開けます。手順は次のとおりです。

  1. Googleドライブを開き、「新規」から「ファイルのアップロード」で、Wordのファイル(.docx)をアップロードします。
  2. アップロードしたファイルを右クリックし、「アプリで開く」から「Googleドキュメント」を選びます。
  3. Wordのまま編集できる表示になった場合は、「ファイル」メニューの「Googleドキュメントとして保存」を選ぶと、Googleドキュメントの形式のコピーができます。
  4. 見出し・箇条書き・表・画像がそのまま残っているかを確かめます。Wordで見出しのスタイルを使っていれば、Googleドキュメントでも見出しとして引き継がれます。

Googleドキュメントにしておくと、ライターさんと同じ原稿を共有でき、コメントや提案モードで修正のやり取りができます。ファイルを何度も送り合う必要がなくなり、「どれが最新版か分からない」ということも防げます。ライターさんの納品をGoogleドキュメントにする流れは、ライターの納品をGoogleドキュメントにする記事で詳しく説明しています。

Googleドキュメントの原稿をWordPressに入れる方法には、コピーして貼る方法のほかに、HTMLに変換する方法や、ツールで投稿する方法があります。比べ方はGoogleドキュメントをWordPressの記事に変換する方法の記事にまとめています。

入稿を自動にしたい人へ

記事の本数が多い場合は、入稿そのものをツールに任せる方法もあります。エラバレルの「ドクポス」は、GoogleドキュメントのURLを貼ると、WordPressに記事を作るウェブサービスです。見出し・太字・リンク・箇条書き・表・画像などをWordPressのブロックに変換し、画像はWordPressのメディアライブラリにアップロードした状態で入ります。空の段落は入りません。下書き・予約・公開から選べます。

WordPressとは、アプリケーションパスワード(WordPress 5.6以降の標準機能)で接続するので、WordPressのログインパスワードを渡す必要はありません。文章はAIで書き換えず、ドキュメントのとおりに変換します。アプリケーションパスワードの発行の仕方は、WordPressのアプリケーションパスワードの記事で説明しています。

よくある質問

Wordから貼り付けると、なぜ見出しが消えるのですか?

Wordで見出しのスタイルを使わず、文字を大きく・太くしただけの場合、WordPressには「太字の段落」としてしか伝わらないためです。Wordの「スタイル」から「見出し2」「見出し3」を選んで見出しにしておくと、貼ったときに見出しブロックとして入ります。

Wordの画像をまとめてWordPressに入れる方法はありますか?

Wordの「名前を付けて保存」で「Webページ」として保存すると、画像がフォルダーにまとめて書き出されます。その画像を、WordPressの「メディア」の「ライブラリ」からまとめてアップロードし、記事の中で画像ブロックから選んで入れます。

クラシックエディタでも、同じ方法で大丈夫ですか?

下準備(見出しのスタイル、空の行を入れない、画像を別に用意する)は同じです。クラシックエディタでは、ブロックに分かれない代わりに、余計な書式が残りやすいので、「テキスト」のタブでコードを確かめると安心です。違いはブロックエディタとクラシックエディタの違いの記事で説明しています。

貼り付けたら文字の色やフォントが変わってしまいました。

Wordの書式の情報が残っている状態です。そのブロックを消して、書式なしの貼り付け(Ctrl+Shift+V)で入れ直すか、コードエディターで余計な指定を消してください。

ライターさんにWordで書いてもらうときのルールはありますか?

「見出しはスタイルの見出し2・見出し3」「箇条書きはWordの機能で」「空の行を入れない」「画像は別ファイルで送る」の4つを伝えるだけで、入稿の手間は大きく減ります。可能なら、原稿をGoogleドキュメントで受け取る形に切り替えるのもおすすめです。

WordのファイルをそのままWordPressにアップロードできますか?

Wordのファイルをメディアライブラリに置いて、ダウンロードできるようにすることはできますが、記事の本文にはなりません。本文にするには、貼り付けるか、Googleドキュメントなどを経由して入稿する必要があります。

まとめ

WordからWordPressへの入稿で、崩れを防ぐための大事な点をまとめます。

この記事のまとめ

  • 崩れるのは、Wordの「見た目の情報」とWordPressの「ブロックの構造」が別のものだから
  • 見出しはスタイルの見出し2・見出し3を使い、箇条書きはWordの機能で作る
  • 空の行・全角スペースの字下げ・テキストボックスは使わない
  • 画像はWordから切り離し、元のファイルとしてメディアライブラリにアップロードする
  • 貼ったあとはドキュメント概要とコードエディターで、ブロックと余計な書式を確かめる
  • WordのファイルはGoogleドライブでGoogleドキュメントとして開けるので、受け渡しと入稿をまとめて楽にできる

Wordの原稿の入稿に時間がかかっている場合は、原稿をGoogleドキュメントに切り替えて、入稿をツールに任せる方法も試してみてください。ドクポスは、5記事まで、カード登録なしで試せます。

ドクポスを無料で試す

参考にした資料