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