おはようございます、なべやすです。
ブログを継続していると、記事を読みやすくする為に様々な工夫やカスタマイズをするようになります。
方法も「画像、囲み枠（ボックスデザイン）、表、吹き出し、アイコンなど」があり、これらを使うことによって記事の読みやすさだけでなく、記事全体の印象も変えることができます。
上記の中でも表は、数値を表すときや何かを比較したりすることに使うと、見やすく、わかりやすくなるのでとても便利です。
ブログ記事内に表を入れる方法はいくつかあり、当記事ではその中でも簡単に表を入れられる方法を紹介しておりますので、ぜひ参考にしていただければと思います。
主な方法は下記の3つです。
どの方法も表計算ソフトのエクセルやスプレッドシートで作った表をブログ記事に貼り付けます。
- 表を画像（JPEGなど）に加工して貼り付ける
- 表をそのまま貼り付ける（コピペ）
- HTMLテーブルに変換しちゃう君 (ββ)を使う
いずれの方法もおなじみの表計算ソフトのエクセルやスプレッドシートを使い簡単にできますが、それぞれメリットとデメリットがありますので要チェックです。
では、ブログ記事を見やすく、わかりやすくするために表を入れてみましょう！
※当ブログは「はてなブログ」を使って編集しております。
※当記事ではGoogleのスプレッドシートを使って説明しております。
- エクセルやスプレッドシートで作った表を画像にして貼り付ける
- エクセルやスプレッドシートで作った表をそのまま貼り付ける
- エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
- ブログに表を載せると文字だけの記事よりも見やすくてわかりやすい
- 最後に
エクセルやスプレッドシートで作った表を画像にして貼り付ける
この方法はエクセルやスプレッドシートで作成した表を画像（スクリーンショット機能を使用）で保存して、そのまま記事内に貼り付けるという至ってシンプルな方法です。
エクセルやスプレッドシートで作成した表の印刷プレビュー画面をPCのPrintScreen（プリントスクリーンキー）でWindowsのペイントなど使い画像を保存（JPEGなど）します。
画像はトリミングして表の部分だけにして使います。
メリット（良い点）
- 表のデザインが崩れない
この方法のメリットは、表のイメージをそのまま使うことができるので、画面に合わせる為に表の中の文字が縦になったり、変なところで改行されたりといったデザインの崩れがありません。
デメリット（悪い点）
- 大きい表には不向き
- トリミング加工が必要
- 後から文字の追加や削除ができない
デメリットとしては表の大きさによっては画像が小さくなり見づらくなってしまうことがあります。
また、画像をトリミングするといった一手間がかかります。
他にも表の内容を編集したい場合、文字などの追加や削除ができないので、新たに画像を作り直す必要があります。
エクセルやスプレッドシートで作った表をそのまま貼り付ける
次の方法はエクセルやスプレッドシートで作成した表を、そのままダイレクトに記事内に貼り付ける方法です。
メリット（良い点）
- 簡単（範囲指定をしてコピペ）
- 加工などが不要
- 後から文字などの追加ができる
この方法のメリットは、何と言っても簡単なこと。
エクセルやスプレッドシートで作成した表をコピーしてそのまま記事内に貼り付けるだけ（範囲指定をしてコピペ）なので、加工や修正といった手間が一切かかりません。
コピペするだけで下のようになります。
表に文字などを追加や削除したりすることもできるので、編集が簡単にできます。
表のリサイズもマウスをドラッグするだけで可能です。
デメリット（悪い点）
- 大きい表には不向き
- スマホ表示に合わせて表を作る必要がある
デメリットとして、表の大きさによっては画面内に収まりきらず、画面からはみ出てしまうことです。
特にスマホ画面では、表が収まりきらなくなることが多いので要注意です。
表のサイズは、基本的にスマホ画面で表示されるように作る必要があります。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
そして最後に紹介するのは、エクセルやスプレッドシートで作成した表をHTMLコードに変換して記事内に貼り付ける方法です。
HTMLへの変換は、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)というサイトを使います。
こちらのサイトは無料で使うことができ、機能的にもよくできているにで、とても重宝しております。
エクセルだけでなく、Googleのスプレッドシートでも可能なので、とても使い勝手がいいです。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)の使い方
表をブログに貼り付けるまでの流れ
- STEP1：エクセルやスプレッドシートで作成した表をHTMLに変換
- STEP2：表のイメージを確認
- STEP3：作成されたHTMLコードをコピー
- STEP4：ブログに貼り付ける表の完成
- STEP5：表をブログに貼り付ける作業完了
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)のサイトにある赤枠の箇所にエクセルやスプレッドシートで作成した表をコピペし、変換ボタンをクリックします。
すると下のような確認画面が出てきて、表のイメージを確認できます。
表のイメージを確認して問題がなければ画面最下部にHTMLコードが作成されておりますので、これを全てコピーします。
コピーしたHTMLコードをブログのHTMLコードを入力できる画面（HTML編集画面など）にペーストします。
すると下のような表が完成いたします。
| ブログA | ブログB | |
|---|---|---|
| テスト１ | 10 | 10 |
| テスト２ | 20 | 20 |
| テスト3 | 30 | 30 |
| 合計 | 60 | 60 |
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使い、エクセルやスプレッドシートで作成した表をブログに貼り付ける作業はこれで完了です。
最近は、もっぱらこのサイトを利用して、ブログ記事内に表を貼り付けております。
メリット（良い点）
- 表が画面に合わせて表示される（リサイズが不要）
- 後から文字などの追加ができる
この方法のメリットは、作成した表がPCやスマホの画面に合わせて表示されることです。
先に紹介した2つの方法とは違って、PCやスマホの画面に合わせた表の加工（リサイズなど）が必要ありません。
作成した表は、何も手を加えなくてもきちんと画面内に収まります。
ブログをスマホで見る人が多いことを考えると、この方法がベストではないでしょうか。
表が小さい場合は、マウスをドラッグするだけでリサイズが可能です。
文字などを追加や削除したりすることもできるので、表を作成した後も編集が簡単にできます。
デメリット（悪い点）
- 文字が縦になり見づらくなる
- HTMLコードを使う（要知識）
デメリットとしては、表示される画面に合わせて表のサイズが最適化されてしまうので、セル内の文字や数字が縦になり見づらくなってしまうことがあります。
特にスマホ画面では、そのようになる場合があります。
また、 表を記事内に入れる際にHTMLコードを使うので、多少の知識が必要となります。
ブログに表を載せると文字だけの記事よりも見やすくてわかりやすい
ブログ記事内に表を入れる方法別のメリット・デメリットを当記事のテーマに合わせて表にしてみました。※HTMLテーブルに変換しちゃう君 (ββ)を使用
※スマホ画面は横にスクロールできます。
| メリット | デメリット | |
|---|---|---|
| 表を画像（JPEGなど）にして貼り付け | 表のイメージをそのまま使うことができる | 表が大きいと画像が小さくなる。画像をトリミングする手間がかかる。文字などの追加や削除ができない。 |
| 表をそのまま貼り付け（コピペ） | 表をコピーして貼り付けるだけ（コピペ）なので簡単。文字などの追加や削除も簡単にできる。 | 表のが大きいと画面に収まりきらず、はみ出てしまう。 |
| HTMLテーブルに変換しちゃう君 (ββ)を使う | 表がPCやスマホの画面に合わせて表示される。文字などの追加や削除も簡単にできる。 | 画面に合わせて表のサイズが変わるので、セル内の文字や数字が縦になることがある。HTMLコードを使うので、多少の知識が必要。 |
冒頭にも書きましたが、ブログ記事内に表を使うと見やすさだけでなく、わかりやすさも向上します。
少なくとも、文字だけの記事より見やすくてわかりやすくなることは間違いありません。
他にも記事の仕上がり感がワンランクアップした感じがするので、 作成している側としても満足度が高くなります。
最後に
紹介した表の貼り付け方は、どれもおなじみの表計算ソフトのエクセルやスプレッドシートを使い簡単にできるものなので、ブログに表を使ったことがない人にはオススメです。
今回は、はてなブログを例に表の貼り付け方を説明させていただきましたが、他のブログサービスを使っている人にも活用できたら何よりです。
最後まで読んでいただき、ありがとうございました。
