アメブロで表を作る方法｜HTMLをコピペするだけで作れます

2026-08-13

アメブロで記事を書いていて、表を入れたくなったこと、ありませんか。

料金の比較とか、商品ごとの違いとか、ビフォーアフターとか。並べて見せた方が絶対に伝わるのに、編集画面のどこを探しても表を作るボタンがない。

私も最初は探しました。文字色、サイズ、リンク、画像、絵文字……ひととおり並んでいるのに、表だけがないんですよね。

結論から言うと、アメブロで表は作れます。ただし、HTMLという書き方を使う必要があります。

そう聞くと身構えるかもしれませんが、大丈夫です。この記事では、コピーして貼るだけで表ができる形まで持っていきます。

Roy

とはいえ、HTMLの勉強をする必要はありませんよ！

この記事を書いた人

大手メディアでWEBライターとして執筆中
SEO・収益設計を軸に複数サイトを運営
10年以上アフィリエイトを実践し、分散型で収益化
実務と複数サイト運営の経験をもとに発信

Roy

アメブロには「HTML表示」という編集モードがある

まず前提の話から。

アメブロの記事編集画面には、通常の編集モードとは別に「HTML表示」というモードがあります。パソコンなら、編集画面の左下にある切り替えボタンから移動できます。

スマホアプリの場合は、編集画面の下部に「HTML編集」というタブがあります。呼び方が少し違うだけで、中身は同じものです。

このモードに切り替えると、記事の中身がコードとして表示されます。

呪文みたいな文字列が並んでいて、最初はぎょっとするかもしれません。でも、やることは決まっています。表を入れたい場所に、コードを貼り付けるだけ。

ちなみにアメブロの公式ヘルプにも、HTML編集で入力ができることは書かれています。

ただ、書き方についてはサポート対象外で、自分で調べてくださいという案内になっています。つまり「機能はあるので、あとはご自由に」という状態なんですね。

だからこそ、この部分で止まってしまう人が多いんだと思います。

表を作るHTMLの基本

表のHTMLは、こういう形をしています。

<table>
  <tr>
    <th>プラン</th>
    <th>月額料金</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>990円</td>
  </tr>
</table>

読み方はシンプルです。

<table> から </table> までが表全体。<tr> が1行分で、その中の <td> が1つのセル。見出しのセルだけは <th> を使います。囲んで、並べる。それだけの構造です。

ただ、これをそのまま貼ると、線のない、素っ気ない表になります。文字が並んでいるだけで、表に見えないんですよね。

なぜかというと、アメブロの多くのテンプレートでは、表の枠線が最初から設定されていないからです。線を引くには、自分で指定する必要があります。

見た目を整えたコード

線と余白を足すと、こうなります。

<table style="border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6;">
  <tr>
    <th style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: left; background: #f4f4f5; font-weight: bold;">プラン</th>
    <th style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center; background: #f4f4f5; font-weight: bold;">月額料金</th>
    <th style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center; background: #f4f4f5; font-weight: bold;">おすすめ度</th>
  </tr>
  <tr>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: left;">ベーシック</td>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center;">990円</td>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center;">★★★</td>
  </tr>
  <tr>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: left; background: #fafafa;">スタンダード</td>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center; background: #fafafa;">1,490円</td>
    <td style="border: 1px solid #d4d4d8; padding: 9px 12px; text-align: center; background: #fafafa;">★★★★</td>
  </tr>
</table>

……はい、急に長くなりましたね。

なぜこんなに膨らむかというと、セル1つずつに、同じ指定を書かなければいけないからです。

普通のWebサイトなら、CSSという別のファイルにまとめて「表のセルは全部この見た目で」と一括指定できます。でもアメブロでは、記事本文にCSSを書いても効かないことが多いんですね。だから、セルごとに直接書き込む形になります。

3列3行でこの長さなので、5列6行くらいになると、もう手作業では厳しい。私も一度やってみて、途中で数がわからなくなりました（笑）。

指定している内容自体は難しくありません。

border が枠線（#d4d4d8 が線の色）
padding がセルの内側の余白
text-align が文字寄せ（left / center / right）
background が背景色

色を変えたいときは、#d4d4d8 や #f4f4f5 の部分を別の色コードに置き換えるだけです。貼り付けた後からでも変更できます。

手打ちしなくていいツールを作りました

というわけで、ツールを用意しました。

かんたん表メーカー

セルに文字を入力するだけで、アメブロ用のHTMLを書き出します。無料で、会員登録もいりません。

さっきの長いコード、あれを1文字も書かずに作れます。

行や列はボタンで増減できて、列ごとの文字寄せもワンタップで切り替えられます。見出し行の色分けや、1行おきの背景色も自動でつきます。

使い方は3ステップです。

セルに文字を入力する
「HTML / アメブロ」のタブを選ぶ
コピーして、アメブロのHTML表示に貼り付ける

エクセルやスプレッドシートで作った表があるなら、それを範囲コピーして貼り付けるだけで取り込めます。作り直す必要はありません。

仕上がりのプレビューも表示されるので、アメブロに貼る前に確認できます。

▼ 登録不要・無料で使えます ▼

かんたん表メーカーを開く

ちなみに、noteで使えるTeX記法も同時に生成できます。両方で書いている人は、1回の入力で2つ分作れます。

貼り付けるときの注意点

実際にやってみると、いくつか引っかかるところがあります。

必ず「HTML表示」に切り替えてから貼る

いちばん多い失敗がこれです。

通常の編集モードのまま貼り付けると、コードがそのまま文字として表示されます。<table> とか <td> とかが、記事にそのまま並ぶ状態ですね。

表示された記事を見て「なんで？」となったら、まずここを確認してみてください。

表は最後に貼るのがおすすめ

これは念のための話なんですが、表を入れる作業は、本文を書き終えてから最後にまとめてやるのがおすすめです。

先に表を貼ってしまうと、その後の編集でコードの中を触ってしまうことがあります。うっかり <td> の1つを消してしまうと、そこから表全体が崩れます。しかもHTML表示のままだと、崩れたことに気づきにくい。

本文を仕上げる → HTML編集に切り替える → 表を貼る → プレビューで確認する。この順番が安全かなと。

スマホアプリでも使えます

これ、意外だったんですが、アメブロのスマホアプリでも問題なく使えました。

記事作成の編集画面の下部に「HTML編集」というタブがあるので、そこをタップして切り替えます。あとはパソコンと同じで、コードを貼り付けるだけ。ちゃんと表として表示されます。

スマホしか持っていない人でも、表が作れるということですね。ツールの方もスマホで動くので、外出先で記事を書いている人も大丈夫です。

ただ、セルに文字を打ち込む作業はどうしても画面が狭くなるので、行数の多い表を作るならパソコンの方が楽だとは思います。

列は3〜4つまでが読みやすい

アメブロは、読者のほとんどがスマホで見ています。

列が多い表を作ると、スマホの画面幅に収まりきらず、文字が潰れたり、横に見切れたりします。パソコンで確認したときは完璧でも、スマホだと読めない、ということが起こります。

項目が多いときは、表を2つに分ける方が親切です。読み手にとっても、その方が理解しやすいと思います。

画像で貼るのとどっちがいい？

表を入れる方法として、エクセルの画面をスクリーンショットで撮って、画像として貼る手もあります。

手軽ではあります。見た目も自由に作れます。セルを結合したり、色を細かく使ったり、やりたい放題です。

ただ、文字として読まれないんですよね。

読者が表の中の文字をコピーできません。検索エンジンも中身を認識しません。音声読み上げを使っている読者にも届きません。

それと、スマホで見たときに小さくなりがちです。パソコンで作った横長の表を画像にすると、スマホでは文字が読めないサイズになります。

比較表って、読者にとってはいちばん大事な情報が詰まっている場所だと思うんです。どれを選ぶかを判断する材料そのもの。そこが画像になっているのは、読む側にとっても書く側にとっても、ちょっともったいない。

なので私は、まずHTMLで作ってみて、どうしても表現しきれないものだけ画像にするという使い分けにしています。

まとめ｜かんたん表メーカーを使ってみよう

アメブロに表のボタンはありません。でも、HTMLを使えば作れます。

編集画面を「HTML表示」に切り替えて、コードを貼るだけ
枠線や背景色は、セルごとに指定する必要がある
手打ちは現実的ではないので、ツールで作るのが早い
スマホで読まれることを考えて、列は3〜4つまでに

HTMLと聞くと構えてしまいますが、やっていることは「コピーして貼る」だけです。一度やってしまえば、次からは3分で終わります。

表がひとつ入るだけで、記事の説得力ってけっこう変わります。書きかけの記事に、ひとつ足してみてください。