GoogleドキュメントをHTMLに変換する方法｜spanタグなどの余計なタグを入れずに、きれいに出す手順

公開日: 2026年10月6日 ／ カテゴリ: WordPress入稿 ／ 執筆: エラバレル

「GoogleドキュメントをHTMLにして、WordPressのコードエディタに貼りたい」「ダウンロードしたHTMLを開いたら、知らないタグだらけで使えなかった」。記事をGoogleドキュメントで書いている人から、よく聞く悩みです。

先に結論をお伝えします。**Googleドキュメントの標準機能でHTMLは出せますが、そのままでは文字の飾りを指定する span タグや、たくさんの class、Googleを経由するリンクなどが大量に入ります。** WordPressで使うなら、いちばん手軽できれいなのは「一度ブロックエディタに貼って、コードエディタでHTMLを取り出す」方法です。毎回の作業を減らしたいなら、ドキュメントから直接WordPressの記事を作る方法もあります。

この記事では、GoogleドキュメントのHTMLに余計なタグが入る理由と実例、HTMLに変換する4つの方法の手順、余計なタグの消し方、WordPressに入れるときの注意点までをまとめて説明します。

GoogleドキュメントをHTMLに変換するとは？

HTMLとは、ウェブページの文章に「ここは見出し」「ここは段落」「ここは太字」といった意味をつける書き方のことです。たとえば見出しは <h2>見出し</h2>、段落は <p>本文</p> のように、文章をタグではさんで表します。

Googleドキュメントで書いた文章は、画面の上では見出しや太字がついていますが、これはGoogleドキュメントの中だけの書式です。ウェブページやWordPressで同じ見た目にするには、HTMLの形に置き換える必要があります。これが「HTMLに変換する」ということです。

HTMLに変換したい場面は、主に次のようなときです。

• WordPressのコードエディタや「カスタムHTML」ブロックに、記事をそのまま貼りたい
• WordPress以外のブログやホームページ作成サービスの、HTMLを入れる欄に貼りたい
• メールマガジンの配信ツールに、HTMLで本文を入れたい
• 自分で作ったホームページのファイルに、記事の本文を書き込みたい

コピペやダウンロードで入る「余計なタグ」の実例

Googleドキュメントから出てくるHTMLが使いにくいのは、見た目を再現するための情報が、細かく大量に入るからです。代表的なものを見てみましょう。

実例1：コピペで入るspanタグとbタグ

Googleドキュメントの文章をコピーして、クラシックエディタの「ビジュアル」の画面や、HTMLをそのまま受け取る入力欄に貼ると、次のようなHTMLになることがあります。

<b id="docs-internal-guid-1a2b3c4d-7fff-1234-5678-abcdef012345" style="font-weight:normal;">
<p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;">本文の1行目です。</span>
</p>
</b>

本来なら <p>本文の1行目です。</p> の1行で済むところに、文字の大きさ・フォント・色・行間などの指定が、1文ごとについています。いちばん外側の <b id="docs-internal-guid-…"> は、コピーしたときに目印として付くもので、太字の意味はありません（font-weight:normal で太字を打ち消しています）。

実例2：ダウンロードしたHTMLに入るclassとstyle

「ウェブページ」の形式でダウンロードしたHTMLは、ページの先頭に長い <style>（見た目の指定）があり、本文は次のような形になります。

<h2 class="c4" id="h.abc123"><span class="c7">見出しの文字</span></h2>
<p class="c2"><span class="c1">本文の文字です。</span><span class="c5">ここは太字</span></p>

c1 c2 などの名前には意味がなく、ドキュメントごとに変わります。太字も <strong> ではなく、「c5という名前の飾り」として表されています。WordPressのテーマの見た目とは関係ない指定なので、そのまま貼ると、テーマの文字の大きさや色とぶつかります。

実例3：Googleを経由するリンク

ダウンロードしたHTMLでは、本文のリンクが次のように、Googleのアドレスを経由する形に書き換わります。

<a href="https://www.google.com/url?q=https://example.com/&amp;sa=D&amp;source=editors&amp;ust=...">リンクの文字</a>

このまま公開すると、読者がリンクを押したときにGoogleのページを経由します。リンク先のサイトから見ても、どこから来た読者なのかが分かりにくくなります。リンクは必ず元のアドレスに戻してから公開してください。

余計なタグが入ると、何が困るのか

検索エンジンやAIは、HTMLの見出しや段落の構造から、文章の組み立てを読み取ります。見た目の指定ばかりのHTMLより、<h2> <p> <ul> などで素直に書かれたHTMLのほうが、内容の構造が伝わりやすくなります。

HTMLに変換する4つの方法の比較

GoogleドキュメントをHTMLにする方法は、大きく4つあります。

1回だけなら方法1か2、毎回の作業なら方法4、と考えると選びやすくなります。ここから、それぞれの手順を説明します。

方法1：ウェブページ形式でダウンロードする

Googleドキュメントの標準機能で、HTMLのファイルを作る方法です。

1. HTMLにしたいGoogleドキュメントを開く
2. 上のメニューの「ファイル」を押す
3. 「ダウンロード」を選ぶ
4. 「ウェブページ（.html、zip）」を選ぶ
5. zipファイルがダウンロードされるので、右クリックして「すべて展開」で開く
6. 中にあるHTMLファイルを、メモ帳やテキストエディタで開く

zipの中には、HTMLファイルと、画像を入れたフォルダ（images）が入っています。画像はHTMLの中から、このフォルダの画像を読む形になっています。

この方法で出てきたHTMLは、そのままだと実例2・3のような状態です。使う前に、次の「余計なタグを消す手順」で掃除が必要です。

方法2：ブロックエディタに貼って、コードエディタでHTMLを取り出す

WordPressを使っているなら、いちばんきれいなHTMLが手早く手に入る方法です。WordPressのブロックエディタは、Googleドキュメントから貼り付けた文章を、見出し・段落・リストなどのブロックに変換し、余計な飾りの指定を大部分取り除いてくれます。

1. WordPressの管理画面で「投稿」→「新規投稿を追加」を開く（下書き用の作業ページとして使う）
2. Googleドキュメントで本文を選んでコピーする（Ctrl + C）
3. ブロックエディタの本文の最初の段落をクリックして、貼り付ける（Ctrl + V）
4. 見出し・太字・リスト・表がブロックに変わったことを確かめる
5. 右上の「︙」（オプション）を押し、「コードエディター」を選ぶ
6. 表示されたHTMLを全部選んでコピーする

コードエディタで見えるHTMLには、<!-- wp:paragraph --> のような、ブロックの区切りを示すコメントが入っています。WordPressの別の記事に貼るなら、このコメントはそのまま残したほうが、ブロックとして正しく読み込まれます。WordPress以外の場所で使うなら、コメントの行を消してください。

画像だけは、取り込み直しが必要

ブロックエディタに貼った画像は、Googleのサーバーにある画像を参照しているだけのことがあります。画像ブロックを選ぶと、ツールバーに「外部画像をアップロード」という表示が出る場合は、それを押してメディアライブラリに取り込んでから、コードエディタでHTMLを取り出してください。取り込まないままだと、時間がたつと画像が表示されなくなることがあります。

方法3：マークダウンとしてコピーし、HTMLに変換する

マークダウンとは、## 見出し や **太字** のように、記号で文章の構造を書く書き方です。Googleドキュメントには、文章をマークダウンの形でコピーする機能があります。

1. Googleドキュメントの「ツール」→「設定」を開き、「マークダウンを有効にする」にチェックを入れる
2. 本文を選んで右クリックし、「マークダウンとしてコピー」を選ぶ
3. マークダウンをHTMLに変換するツールやテキストエディタの機能に貼って、HTMLにする

マークダウンからのHTMLは、<h2> <p> <strong> <ul> などだけの、素直な形になります。WordPressのブロックエディタは、マークダウンを貼るとブロックに変換してくれるので、方法2と組み合わせることもできます。メニューの名前は、Googleドキュメントの更新で変わることがあります。詳しくはGoogleドキュメントをマークダウンに変換する方法で説明しています。

余計なタグを消す手順（方法1のHTMLを掃除する）

方法1でダウンロードしたHTMLを、自分で整える手順です。テキストエディタの「置換」機能を使います。正規表現（文字のパターンで検索する機能）が使えるエディタだと、一度にまとめて消せます。

1. HTMLファイルのコピーを作り、元のファイルは残しておく
2. <body> から </body> の間（本文）だけを取り出す。<head> の中の <style> は使わない
3. 下の表の順番で、置換していく
4. ブラウザでファイルを開き、見出し・太字・リンクが崩れていないか確かめる

classとstyleを先に消すと、<span class="c1"> が <span> だけになるので、あとから <span> と </span> をまとめて消せます。

掃除したあとに確かめること

WordPressのコードエディタ・カスタムHTMLに貼るときの注意

きれいなHTMLが手に入っても、WordPressへの入れ方によって扱いが変わります。

コードエディタに貼る場合

ブロックエディタのコードエディタに、ブロックのコメント（<!-- wp:paragraph --> など）がないHTMLを貼ると、ビジュアルの画面に戻したときに「クラシック」ブロックや、変換を求めるブロックとして表示されることがあります。その場合は、ブロックのメニューから「ブロックへ変換」を選ぶと、見出し・段落のブロックに分かれます。

「カスタムHTML」ブロックに貼る場合

「カスタムHTML」ブロックは、貼ったHTMLをそのまま表示します。ただし、記事全体をこの1つのブロックに入れると、あとで1文直すにもHTMLを触ることになります。また、見出しがブロックとして認識されないため、目次のプラグインなどが見出しを拾えない場合があります。記事の本文は、なるべく見出し・段落のブロックとして入れるのが基本です。

見出しの階層をそろえる

Googleドキュメントの「タイトル」や「見出し1」をそのまま変換すると、本文の中に <h1> が入ることがあります。WordPressのテーマは、記事のタイトルを <h1> として表示するため、本文の見出しは <h2> から始めるのが一般的です。ドキュメントの段階で「見出し2」「見出し3」を使って書いておくと、変換後に直す手間がなくなります。見出しの構造は、検索やAIが文章の組み立てを読み取る手がかりにもなります。

毎回の変換をなくしたい人へ：ドキュメントから直接WordPressの記事を作る

ここまでの方法は、1本ずつ手で変換する方法です。毎週何本も記事を入稿するなら、変換そのものを自動にしてしまう方法もあります。

エラバレルのドクポスは、GoogleドキュメントのURLを貼ると、WordPressの記事（下書き・予約・公開）を作るウェブサービスです。見出し・太字・斜体・下線・取り消し線・リンク・箇条書き・番号リスト・表・画像・蛍光ペンを、WordPressのブロックに変換します。

• 画像は、WordPressのメディアライブラリにアップロードした状態で入ります
• 空の段落は入りません。表の1行目が太字なら、見出しの行になります
• ドキュメントの先頭に「タイトル：」「スラッグ：」「カテゴリ：」などを書くと、記事の設定にも入ります
• AIは使っていないので、文章は書き換わらず、ドキュメントのとおりに変換されます

WordPressとは、WordPress 5.6以降の標準機能である「アプリケーションパスワード」でつなぎます。WordPressのログインパスワードを渡す必要はありません。5記事まで、カード登録なしで試せます。

1回だけHTMLが欲しいなら方法2、入稿の作業そのものを減らしたいならドクポス、という使い分けがおすすめです。ドキュメントをWordPressの記事にする方法全体の比較は、GoogleドキュメントをWordPressの記事に変換する方法にまとめています。

よくある質問

GoogleドキュメントだけでHTMLのコードを見ることはできますか？

Googleドキュメントの画面の中で、HTMLを直接見たり編集したりする機能はありません。「ファイル」→「ダウンロード」→「ウェブページ（.html、zip）」で保存したファイルを、テキストエディタで開いて確認します。

コピペしたときのspanタグは、WordPressの表示に影響しますか？

影響することがあります。文字の大きさ・フォント・色が1文ごとに指定されるため、テーマで決めた文字の大きさや色と違う見た目になる場合があります。ブロックエディタに貼った場合は多くが取り除かれますが、クラシックエディタのビジュアルの画面に貼った場合は残りやすいので、テキストのタブで確認してください。

「書式なしで貼り付け」をすれば、きれいになりますか？

Ctrl + Shift + V の「書式なしで貼り付け」をすると、余計なタグは入りませんが、見出し・太字・リンク・表もすべて消えて、ただの文字になります。見出しなどを付け直す手間がかかるので、構造を残したいなら、この記事の方法2か方法4がおすすめです。

ダウンロードしたHTMLの画像を、WordPressで使うには？

zipの中のimagesフォルダの画像を、WordPressのメディアライブラリにアップロードし、HTMLの中の画像のアドレスを、アップロード後のアドレスに書き換えます。画像の数が多いと手間がかかるので、画像が多い記事は方法2か方法4のほうが楽です。

表もHTMLに変換できますか？

できます。ダウンロードした場合は <table> のタグになりますが、セルごとに細かいstyleが入るので掃除が必要です。ブロックエディタに貼ると「テーブル」ブロックになります。表の扱いはGoogleドキュメントの表をWordPressに貼る方法で詳しく説明しています。

Wordの文書でも同じ方法が使えますか？

Wordにも「Webページ」として保存する機能がありますが、Word独自の指定が大量に入ります。WordからWordPressへの入れ方は、WordからWordPressに貼り付けると崩れる理由の記事をご覧ください。

まとめ

GoogleドキュメントのHTMLは、出し方によってきれいさが大きく変わります。目的に合った方法を選んでください。

ドクポスなら、GoogleドキュメントのURLを貼るだけで、見出し・表・画像つきのWordPressの記事を作れます。5記事まで、カード登録なしで試せます。

参考にした資料

• Google ドキュメント エディタ ヘルプ
• WordPress Block Editor（WordPress.org・英語）