いつもは買ってよかったモノを紹介しているブログですが、今日はちょっと違う話を。
自分で作ったツールの紹介です。
アメブロには表を作るボタンがありません
ご存知の方もいると思いますが、アメブロの編集画面には表を作るボタンがないんですよね。
文字色もサイズもリンクも画像も揃っているのに、表だけがない。昔からずっとそうです。
なので、比較の記事を書こうとすると困るんですよ。
「Aは990円で、Bは1,490円で、Cは1,980円で……」
こう書くしかなくて。読みにくいですよね。書いてる方も、これ伝わってるかなと不安になります。
でも、実は作れます
先に結果をお見せしますね。| プラン | 月額料金 | おすすめ度 |
|---|---|---|
| ベーシック | 990円 | ★★★ |
| スタンダード | 1,490円 | ★★★★ |
| プレミアム | 1,980円 | ★★★★★ |
はい、表です。
この記事、アメブロで書いてます。画像じゃありません。ちゃんと表として入っています。
使うのは「HTML編集」
方法としては、HTMLを使います。
……と言った瞬間に何人か離脱しそうですが（笑）、大丈夫です。書く必要はありません。
アメブロの編集画面には「HTML表示」というモードがあります。パソコンなら左下、スマホアプリなら画面の下の方に「HTML編集」というタブがあるはずです。
そこに切り替えて、コードを貼り付ける。これだけで表になります。
問題は、そのコードなんですよ。
上に貼った3列4行の表、コードにすると30行以上あります。しかも枠線や余白の指定を、セル1つずつに書かないといけない。アメブロは記事の中でCSSがうまく効かないので、まとめて指定ができないんですね。
私は仕事でHTMLを書いているので、書けと言われれば書けます。でも、記事を書くたびに毎回これをやるのかと思うと、正直やってられません。
ましてHTMLに触ったことがない方だと、ここで諦めますよね。
なので、ツールを作りました
「かんたん表メーカー」といいます。
▼ こちら（無料・登録不要）▼
セルに文字を入れるだけで、アメブロに貼れるコードができます。
やることは3つ。
セルに文字を入力する。 コピーボタンを押す。 アメブロのHTML編集に貼り付ける。
以上です。コードは一切書きません。
エクセルやスプレッドシートで作った表があるなら、それをコピーして貼り付けるだけで取り込めます。作り直さなくて大丈夫です。
行や列はボタンで増やせますし、文字を中央寄せにしたり右寄せにしたりもワンタップ。貼る前に仕上がりも見えるので、「貼ったら崩れてた」ということもありません。
スマホだけでも作れます
利用されている方もいると思いますが、アメブロのスマホアプリでもHTMLのコピペができます。
記事作成画面の下の方に「HTML編集」というタブがあって、切り替えてコードを貼ったら、普通に表が表示されるんです。
ツールの方もスマホで動くので、パソコンを開かなくても表が作れるわけですね。
スマホだけでブログを書いている方も、ツールを使ってコードをコピペしてから貼り付けてみてください。
ひとつだけコツを
列は、3つか4つまでにしておくのがおすすめです。
アメブロって、読んでいる方のほとんどがスマホなんですよね。列が多い表を作ると、画面に収まりきらずに文字が潰れます。
パソコンで確認したときは完璧なのに、スマホで見たら読めない。これ、けっこう起こります。
項目が多いときは、表を2つに分けた方が親切かなと。
おわりに｜かんたん表メーカーを試してみて
比較の記事を書くとき、表があるかないかで説得力がぜんぜん違います。
無料で使えるので、よかったら試してみてください。
▼ かんたん表メーカー ▼
