比較表を入れたい。
そう思って編集画面を見たら、表を作るボタンがなかった。ブログを書いていて、この経験をした人は多いと思います。
やっかいなのは、サービスごとに事情がまったく違うこと。
WordPressなら標準機能で作れます。アメブロはHTMLを書けば作れます。noteに至っては、数式の機能を使うという裏道しかありません。
同じ「表を入れたい」なのに、答えが3つある。
この記事では、それぞれの作り方をまとめました。あわせて、コードを書かずに表を作れる無料ツールも用意したので、必要な方は使ってください。
先に、ツールの話をします
「かんたん表メーカー」というツールを作りました。
セルに文字を入力すると、アメブロ用のHTMLと、note用のTeX記法を同時に書き出します。無料で、会員登録もいりません。
作った理由は単純で、この2つのサービスで表を作る作業が、毎回あまりに面倒だったからです。
アメブロ用のHTMLは、3列4行の表でも30行を超えます。枠線や余白の指定を、セル1つずつに書く必要があるからです。
noteのTeX記法はもっと厄介で、日本語を1つずつ \textsf{} で囲んだうえ、記号の一部をエスケープしないと表示すらされません。
記事を書くたびにこれをやるのは、書ける人間にとっても苦痛です。ましてコードに触れたことがない人なら、まず間違いなく途中で諦めます。
設計で意識したこと
ブラウザの中だけで完結させました。 入力された文字はサーバーに送信していません。他人の記事の中身を預かる理由がないからです。ページを閉じれば消えます。
エクセルからの取り込みに対応しました。 すでに表計算ソフトで作った表があるなら、範囲コピーして貼り付けるだけで取り込めます。ゼロから打ち直す必要はありません。実際、比較表の元データがスプレッドシートにある人は多いはずです。
プレビューを常に表示しています。 コードだけ渡されても、貼るまで結果がわからないのは不安です。仕上がりを見ながら作れるようにしました。
note特有の落とし穴を自動で処理しています。 後述しますが、noteは貼り付けたコードの一部を削ってしまう挙動があります。それを見越した形で書き出すので、利用者が気にする必要はありません。
WordPressの場合：標準機能で作れます
まずWordPressから。ここはあっさり終わります。
ブロックエディタなら「テーブル」ブロックがあります。ブロックを追加して、列数と行数を指定すれば、あとはセルに文字を打つだけ。ヘッダー行やフッター行の追加、セル幅の調整も、サイドバーから設定できます。
テーマによっては、独自の表ブロックやスタイルが用意されている場合もあります。
つまりWordPressで書いている人は、この記事の残りを読む必要がありません。標準機能で十分です。
問題はここから先の2つです。
アメブロの場合：HTMLを使います
アメブロの編集画面には、表を作るボタンがありません。ただ、HTMLを書き込めるモードがあるので、そこから作れます。
パソコンなら編集画面の左下、スマホアプリなら画面下部に「HTML編集」というタブがあります。そこに切り替えて、コードを貼り付ける形です。
基本のコード
表のHTMLは、こういう構造です。
<table>
<tr>
<th>プラン</th>
<th>月額料金</th>
</tr>
<tr>
<td>ベーシック</td>
<td>990円</td>
</tr>
</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>
</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>
</tr>
</table>2列2行でこの長さです。
なぜ膨らむかというと、セルごとに同じ指定を繰り返さなければいけないからです。通常のWebサイトならCSSで一括指定できますが、アメブロは記事内でCSSがうまく効かないため、各セルに直接書き込む形になります。
5列6行の表を手で書こうとすると、どこかで必ず <td> の数を間違えます。ここはツールに任せた方が早いです。
貼り付けるときの注意
必ずHTML編集モードに切り替えてから貼ってください。 通常モードのまま貼ると、コードがそのまま文字として表示されます。いちばん多い失敗がこれです。
列は3〜4つまでに。 アメブロは読者の大半がスマホです。列が多いと画面幅に収まらず、文字が潰れます。
アメブロでの手順は、別のブログにもう少し詳しくまとめています。
関連記事：アメブロで表を作る方法｜HTMLをコピペするだけで作れます
noteの場合：数式機能を使います
noteがいちばん特殊です。
表の機能はありません。HTMLも書けません。では諦めるしかないかというと、抜け道があります。
数式機能を使います。
noteにはTeX記法で数式を書く機能があり、そのTeXの中に表を組む書き方が含まれています。数式のつもりで用意された機能を、表として使うわけです。
実際のコード
$$
\begin{array}{|l|c|c|} \hline
\textsf{\textbf{プラン}} & \textsf{\textbf{月額料金}} \\\\ \hline
\textsf{ベーシック} & \textsf{990円} \\\\ \hline
\textsf{スタンダード} & \textsf{1,490円} \\\\ \hline
\end{array}
$$$$ で囲むと数式ブロックになります。\begin{array} から \end{array} までが表の中身で、{|l|c|c|} が列の設定。l が左寄せ、c が中央、r が右寄せ、| が縦線です。セルの区切りが &、横線が \hline。日本語は \textsf{} で囲みます。
行末が4本になっている理由
上のコード、行末が \\\\ と4本になっているのに気づいたでしょうか。
TeXの文法として、行の終わりは \\ の2本です。ところが、noteのエディタにコードを貼り付けると、これが \ 1本に減ってしまいます。バックスラッシュがエスケープ文字として解釈されるためです。
結果として行の区切りが壊れ、表になりません。コードがそのまま文字として表示されます。
対策は、最初から4本書いておくこと。貼り付けの過程で半分になり、ちょうど2本になります。かなり力技ですが、これが確実です。
他のサイトで見つけたコードが動かない場合も、たいていこれが原因です。
そのほかの注意点
$$ は単独の行に置いてください。 文章と同じ行に混ざっていると認識されません。
iOSアプリでは動かないことがあります。 note公式のヘルプにも、iOSアプリでは数式記法が正常に動作しない場合があると書かれています。iPhoneの方はブラウザ版から編集してください。
セル内で折り返されません。 長い文章を入れると横に伸びて画面からはみ出します。1セルには短い言葉を。
noteでの手順は、こちらに詳しくまとめました。
関連記事：noteで表を作る3つの方法｜TeX記法なら文字のまま貼れます
画像で貼るという選択肢について
ここまで読んで、「面倒だから画像でいいのでは」と思った方もいるはずです。
実際、エクセルの画面をスクリーンショットで撮って貼れば、どのサービスでも表は入ります。見た目も自由に作れます。セルの結合も色分けも思いのままです。
ただ、画像には決定的な弱点があります。文字として読まれません。
読者が表の中身をコピーできない。検索エンジンも中身を認識しない。音声読み上げでも届かない。それと、スマホで見たときに小さくなりがちです。
比較表というのは、読者にとっていちばん重要な情報が詰まっている場所です。どれを選ぶかを判断する材料そのものと言ってもいい。そこが画像として扱われるのは、読む側にとっても書く側にとっても損だと思います。
まずテキストで作れないか試して、どうしても表現しきれないものだけ画像にする。 この順番をおすすめします。
まとめ：かんたん表メーカーを試してみて
| サービス | 方法 | 難易度 |
|---|---|---|
| WordPress | テーブルブロック | かんたん |
| アメブロ | HTMLを貼る | ふつう |
| note | TeX記法（数式機能） | ややこしい |
WordPressは標準機能で完結します。アメブロとnoteは、どちらもコードを貼る形になりますが、書き方はまったく違います。
そのコードを書かずに済ませるために、ツールを用意しました。セルに文字を入れるだけで、両方の形式を同時に書き出します。
▼ 登録不要・無料で使えます ▼
表がひとつ入るだけで、記事の説得力は変わります。箇条書きで説明していた部分を、一度置き換えてみてください。
