このブログの記事は、AI（Claude Code）に下書きを作ってもらい、私が確認して公開する形で書いています。原稿はMarkdownという書き方で作り、それをWordPressの「ブロック」に変換して下書きに入れています。

10月30日の記事で、その変換の決めごとを紹介しました。そこで私は、こう書いています。

「表（テーブル）は変換していません」

当時は、表を使うのは原稿の最後のメモ（内部リンクの候補）くらいで、本文には入らない、と考えていたからです。ところが、その考えはすぐに外れました。

公開した記事に「|」が並んでいた

11月に入ってから、本文の中で表を使う記事が続きました。

• Macのファイルのコピーと、今のファイルを比べた結果
• 問い合わせフォームを「いつ・何を」確かめるかの一覧
• ブログ画像のaltを数えた結果（2つ）
• 酉の市の神社3社の比較

4本の記事で、表は全部で5つ。これが、表として表示されていませんでした。画面には、こんな文字がそのまま並んでいたのです。

| | 鷲神社（浅草） | 大鷲神社（相模原・上溝） | 波除神社（築地） |
|---|---|---|---|
| ご祭神 | 天日鷲命・日本武尊 | 大鳥祖神・日本武尊 | 倉稲魂命 |

Markdownでは、「|」でセルを区切り、2行目の「---」で見出しとの境目を表します。変換する仕組みが表に対応していなかったため、この記号が「ふつうの文章」としてそのまま入ってしまいました。

パソコンの広い画面なら、なんとか読めなくもありません。でも、スマホの幅では行が折り返して、どの文字がどの列なのか、ほとんど分かりません。

11月7日、神社の比較表を見て「これは読みにくい」と思い、表かdlを使って見やすくできないか、と相談しました。

tableとdl、どちらにするか

見やすくする方法として、2つの候補がありました。

• table（表）：行と列のマス目で並べる
• dl（定義リスト）：「項目名」と「その説明」を組にして縦に並べる

dlは、たとえば次のような「1つの項目に1つの説明」の組み合わせに向いています。

<dl>
  <dt>ご祭神</dt>
  <dd>天日鷲命・日本武尊</dd>
</dl>

一方、神社の比較表は「3つの神社」を「ご祭神・参拝・御朱印・印象」の4つの点で比べるものです。こういう複数のものを、同じ物差しで横に並べて比べる内容は、やはりtableが向いています。dlにすると、神社ごとに縦に長くなり、「ご祭神だけを3社で見比べる」ことがしにくくなります。

ほかの4つの表も、「項目と数」「時期と確認すること」のように、列をそろえて見たほうが分かりやすいものでした。そこで、5つともtableで作り直すことにしました。

WordPressの「テーブル」ブロックで作り直す

WordPressのブロックエディターには、「テーブル」というブロックがあります。HTMLを書かなくても、列と行の数を決めるだけで表が作れます。

今回、作り直すときに決めたのは次の4つです。

① 1行目は「見出し行」にする

テーブルブロックの設定にある「ヘッダーセクション」をオンにすると、1行目が見出しの行（HTMLでは <th>）になります。見た目が太字になるだけでなく、読み上げソフトにも「ここが列の名前」と伝わります。

② 1列目も太字にする

比較表では、1列目が「ご祭神」「御朱印」のような行の名前になります。ここを太字にすると、スマホで縦にスクロールしていても、今どの行を読んでいるかが分かりやすくなります。

③ 「ストライプ」のスタイルにする

テーブルブロックには、1行おきに背景の色を変える「ストライプ」というスタイルがあります。行が多い表や、セルの中で文字が折り返す表では、これだけで目で追いやすくなります。

④ セルの幅は固定しない

設定に「固定幅のテーブルセル」という項目があります。オンにすると列の幅がそろいますが、文字の量に関係なく同じ幅になるため、短い列がすき間だらけになり、長い列は細かく折り返します。今回はオフにして、中身の量に合わせて幅が決まるようにしました。

公開中の記事は「表の部分だけ」を差し替えた

5つの表のうち、すでに公開している4本の記事は、本文をまるごと入れ替えるのではなく、「|」の段落になっている部分だけをテーブルブロックに置き換えました。ほかの文章や写真、公開の状態はそのままです。

そして作業の前に、記事ごとに置き換える前の本文をファイルに保存しておきました。公開中の記事を直すときは、何かあってもすぐ元に戻せる状態にしてから手を入れる。これは、上書きしてしまった記事をリビジョンから戻したときの反省でもあります。

直したあとは、スマホの幅（375px）で表示して、すべての表が画面からはみ出さず、横にスクロールしなくても読めることを確かめました。

あわせて、原稿をWordPressに送る仕組みも直しました。今は原稿に表を書けば、最初からストライプのテーブルブロックとして下書きに入ります。10月30日に「表は変換しない」と決めたことは、2週間ほどで変えることになりました。

スマホで読みやすい表にするために

今回の作業を通して、表を作るときに気をつけたいと思ったことをまとめます。

• 列は4つくらいまで：神社の比較表は、「項目の列」を入れて4列でした。これ以上増えると、スマホでは1列が細くなりすぎます
• セルの文字は短く：説明が長くなるなら、表の下に文章で補う
• 1列目に行の名前を置く：縦に読んでも迷わない
• 公開前にスマホで見る：パソコンでは読めても、スマホで崩れていることがある

列がどうしても多くなる表は、横にスクロールさせる方法もあります。ただ、スマホで表を左右に動かしながら読むのは、案外疲れるものです。まずは「列を減らせないか」「2つの表に分けられないか」を考えるようにしています。

昔はCSSで表を作っていた

2017年には、「角丸のテーブルを作成する方法」という記事を書いています。当時は、表の見た目をCSSで1つずつ整えていました。

今はテーブルブロックの設定だけで、見出し行やストライプまで整います。表を作る手間は、ずいぶん小さくなりました。そのぶん、どの形で見せると読む人に伝わるかを考えることに時間を使えるようになったと感じます。

まとめ

1. Markdownの表は、変換しないと「|」と「---」の文字のまま表示される
2. 複数のものを同じ点で比べるならtable、「項目と説明」の組ならdl
3. テーブルブロックでは、見出し行・1列目の太字・ストライプ・セル幅を固定しない、の4つを決めた
4. 公開中の記事は、元の本文を保存してから、表の部分だけを差し替えた
5. 表は、公開前にスマホの幅で確かめる

自動で作った記事でも、最後に読むのは人です。パソコンの画面だけでなく、スマホでも一度開いてみる。今回の「|」だらけの表で、その大切さをあらためて感じました。