https://poyaran.com/entry/how-to-make-table

はてなブログに表を入れる方法
ブログ記事で「表」を使いたいと思ったことはありませんか？文章よりも、表のほうが一目で伝わることってありますよね。比較や一覧をまとめるとき、表はとても便利です。

でも表ってどうやって作るの？
なんだか難しそう…。

安心してください。難しいHTMLや記法は必要ありません。

この記事では、初心者でも迷わずできる
一番かんたんな表の作り方を解説しますね。

一番簡単な方法：スプレッドシートからコピー＆ペースト

はてなブログの「見たままモード」には、表を作る専用ボタンはありません。

でも、ExcelやGoogleスプレッドシートからコピーするだけで、簡単に表を表示できます。

えっ、それだけでいいの？

はい。本当にそれだけです。

ExcelやGoogleスプレッドシートで、いつも通りに表を作ります。

特別な設定は不要です。文字を入力するだけでOKです。

表示したい範囲を選択します。

Windows：Ctrl + C
Mac：Command + C

はてなブログの記事編集画面を開き、「見たままモード」のまま、表を入れたい位置にカーソルを置きます。

Windows：Ctrl + V
Mac：Command + V

自動的に表として貼り付けられます。

💡 うまくいかないときのチェックポイント

色はつけずにコピーする
背景色や文字色を設定していると、そのまま貼り付いてしまいます。白黒の状態でコピーするのがおすすめです。
枠線が薄く見えても大丈夫
編集画面では線が目立たないことがありますが、「プレビュー」で確認するときちんと表示されます。
表にならない場合はコピーし直す
まれに文字として貼り付くことがあります。その場合はもう一度コピーするか、Google Chromeで試してみてください。

HTMLタグを書く必要はありませんよ。

列が多い表は、スマホで横にはみ出すことがあります。

その場合は、次のコードをデザインCSSに追加してください。


/* 表を横スクロール対応 */
.entry-content table {
  display: block;
  overflow-x: auto;
}

これで、画面幅より広い場合だけ横スクロールできるようになります。
※文章は自動で折り返されるため、読みやすさが保たれます。

※見たままモードの表は、あとから列を増やすのが少し手間です。あらかじめ構成を決めておくとスムーズです。

はてなブログで表を作るのは、とても簡単です。

これだけでOKです。

難しいことは考えず、まずは一度やってみよう。

初心者向けに、収益化までの手順をまとめています。