ブログに表を入れる方法｜吹き出しの中は難しかったけど、別でも違和感なかった話

「表（テーブル）」をブログに追加する方法だね！

基本的には2通りあるよ：

① WordPressのブロックエディタ（Gutenberg）で「テーブルブロック」を使う

・記事編集画面で「＋」ボタンを押す

・「テーブル（表）」ブロックを選択

・「列数」と「行数」を入力して、好きに中身を埋めていく

これが一番簡単！

② HTMLを直接書く（ちょっと上級者向け）

例えばこういうコードを書く：

・<table>：表全体

・<tr>：行

・<th>：見出しセル

・ <td>：普通のセル

これを「カスタムHTML」ブロックに貼り付けると表ができる！

とちぴは、

サクッと作りたいなら①（テーブルブロック）

細かいデザインもカスタムしたいなら②（HTML）

がおすすめだよ。

やりたい表って、どんな感じのもの？シンプル？装飾付き？

いい質問だね！

結論から言うと、

吹き出しの中にも表（テーブル）を入れられるよ！

ただし少しコツがいる。

やり方（Cocoonの場合）

1.吹き出しブロックを作る

（「とちぴ」とか「AI」の吹き出しね）

2.その吹き出しの中にカーソルを置いた状態で 「＋」ボタンからテーブルブロックを追加する

これだけ！

注意点

・テーブルの幅が広すぎると、吹き出しからはみ出ることがある

・スマホで見るときに見づらい場合もあるから、できれば列数は少なめ＆シンプルにするといいよ

・それでも不安なら、表を小さめにCSSで調整する方法もある

もし「吹き出しの中に入れた表が崩れた！」みたいなときは教えてね。

CSS調整方法もすぐ教えられるから！

試してみる？どんな表を吹き出しに入れたい？

うん、まさにその通り！

スマホだと横幅が狭いから、

・2列 → ほぼ安心

・3列 → 内容を「短く」すればいける

・4列以上 → 崩れるか、字がめちゃ小さくなる

って感じだよ。

吹き出しって「中身がコンパクトだと可愛く見える」から、

2〜3列くらいでサクッとまとめたほうが、読みやすさも見た目もいい！

もしさらにスマホ特化で整えたいなら、

「列を縦並びに変える（レスポンシブ対応）」っていうテクニックもあるけど、

それは必要になったらでOKだと思う！

ちなみに今作ろうとしてる表、内容ざっくり教えてもらえたら、

ぴったりなサイズ感も一緒に考えるよ？試してみる？

なるほどー！やってみたんだね、えらい！

吹き出しの中って、実は「中にさらにブロックを入れる」っていうのが意外と難しい仕様になってて、

（特にCocoonの吹き出しは、段落ブロック専用みたいな作りになってるから）

テーブルとかリストとか「複雑なブロック」を直接置こうとすると、うまくいかないことがあるんだよね。

だから、吹き出しの外に表を置くスタイル、

全然OKだと思う！むしろ自然だったならナイス判断！

もし「どうしても吹き出し内に表入れたい！！」ってなると、

・カスタムHTMLブロックを使って無理やりねじ込む

・フレックスボックス使ってスタイル崩さないようにする

みたいなちょっとマニアックな技がいるから、無理にやらないほうが平和だよw

逆に、

「表の後に、吹き出しコメントでちょっと補足する」

とかでも、かなり自然で読みやすい記事になるよ！

いい感じにまとまったっぽいね？

ほかにも困ったとこあったら気軽に教えてー！

なるほどなるほど！

たしかにここ（チャット）で出てくる表って、ちょっと特殊な表示になっちゃうから、

「そのままコピペしてWordPressに貼る」ってのはうまくいかないんだよね。

（HTMLに直すか、手作業で作り直す必要がある）

でも、「目安になってるならOK」って言ってくれて嬉しい！

これからもざっくり見やすい表をポンと出す感じでいくね。

ちなみに、

「この表、WordPressに貼り付けやすい形でもらえる？」

みたいに言ってもらえたら、HTML版で出すとか、やり方工夫できるから、

遠慮なくリクエストしてね！

よし、とりあえず一段落だね！

今どんな記事書いてるのか、ちょっと気になるな〜？

うわぁー！ツッコミ天才かw

完全に「今どの会話コピペしてるのか気になる」って、自分が言った風になってたね！

さすがすぎる。読み合い楽しすぎるなw

3人のAIの役割分担の話だったんだね！

なるほど、そりゃ表とか必要になるわけだ〜。

絶対、ちゃんとまとめたら未来の自分が助かるやつ！

はい、とりあえずひと段落おめでとう！

また吹き出しに入れたいときとか、表を綺麗にしたいときとか、

なんでも遠慮なく呼んでね！

こちらこそ、ありがとうっ

また一緒に楽しく進めよー！