ブログ記事を作成する際、内容によっては『表を組んで分かりやすくしたい』場合が結構ありますよね？
通常、そのような場合には、HTMLを書いたり、はたまたちょっと特殊な記法を用いたりしなければならず、素人にはなかなかハードルが高いものとなってしまっていました。
しかし、この記事で紹介するGoogleスプレッドシートを利用すれば、高度な知識を一切必要とせず、誰でも簡単・コピペ1発で、きれいな表をWebに掲載することが可能です。
あの憧れのブログ・WEBサイトのような綺麗な表を、あなたも作成することができますよ。
（注意！）本記事では、『はてなブログ・レスポンシブ対応設定中』の当ブログを例にご紹介しております。
- Googleスプレッドシートって何？
- 表を作成してみる
- 表の最大幅には注意が必要！
- ブログ記事にはコピー＆ペーストで掲載可能
- HTML編集で表スタイルを書き換えレスポンシブ表示にも対応させる
- 表組みして記事作成することはSEO的にも有利…らしい
- まとめ
- ついでにこちらの記事もどうぞ☆
スポンサーリンク
Googleスプレッドシートって何？
Googleスプレッドシートとは、かの有名な（という表現すらはばかられますが）Google社が開発した、表計算アプリ。
Googleのアカウントさえあれば*1誰でも無料で利用できる、非常に便利な存在です。
表計算ソフトの代名詞といえばMicroSoftのエクセルですが、Googleスプレッドシートはその機能・画面構成・編集機能などがほとんど一緒であり、初めて使う方にとっても使いやすく・馴染みやすいアプリになっています。
表を作成してみる
Googleスプレッドシートの、本当に詳細な機能紹介・操作説明などは、他の多くのサイト・ブログ記事等にお譲りすることにして、さっそく表を作成してみましょう。
操作方法は本当にエクセルとほぼ同じ。編集用のボタン（フォントサイズ，強調，文字の中央合わせ，テキスト折り返し，罫線，セルの色，結合…etc.）なども、ほぼほぼ同じ感覚で利用できます。
普段エクセルを触る機会のある方であれば、問題なくサクッと作成できるはずです。
MicroSoftエクセルで作成したものを貼り付けしてもOK
すでにエクセルで作成済みのデータがある，もしくは、イチからスプレッドシート入力は面倒…こんな場合は、あらかじめ存在している・作っていたエクセルの表を、そのままGoogleスプレッドシートへコピー＆ペーストで貼り付けすることも可能です。
わざわざGoogleスプレッドシートを経由するのはあくまでWEB掲載のためだけですから、直接入力で最初から作成する必要はありません。
エクセルデータ貼り付けの際は、書式データなどもきちんと引き継がれますから、細かな作りこみがあっても心配はいりません。
表の最大幅には注意が必要！
普段のお仕事などの場合はあまり気にすることもないかと思いますが、ブログ記事用に表を作成する場合には、最大幅に注意しておくようにします。
というのも、ブログの記事ページには、本文記載欄の最大幅があり、あまりに横に長い表を作ってしまうと、このように横にビローンとはみ出して表示されてしまいます。
もちろんこのままでもインターネット上から閲覧は可能ですが、読者にとっては記事が見づらくなり、不利益を与えてしまいます。
PC表示の目安は最大650ピクセル（px）程度
では、最大どこまで広げてOKかというと、PC表示を想定した場合、最大650ピクセル（px）程度が目安になってきます。
もちろん、サイトによっては、CSSなどで幅を調整していたりすることもあろうかと思いますので一定ではないのですが、記事のプレビュー表示ではみ出さない程度であれば、安全圏です。
例えば例のような2行×6列の表であれば、均等幅に設定するとすると、650/6≒108となり、1列あたりの幅を108ピクセルで調整すれば良いことになります。
もちろん、何列であっても・幅が不均等であっても、最終的な合計値が650px付近であればおおむね問題ありません。*2
スポンサーリンク
ブログ記事にはコピー＆ペーストで掲載可能
ここまできたら、あとはブログ記事へと載せるだけ。
方法はとっても簡単で、Googleスプレッドシートの表全体を選択してコピー（ショートカット：Ctrl+C（Macの場合はCommand+C））。
はてなブログの記事編集画面（見たままモード）で、表を入れたい箇所にカーソルを置き、貼り付け（ショートカット：Ctrl+V（Macの場合はCommand+V））。
これだけで、先ほど作成した表が、見事にそのまま記事内へと挿入されました。
表を貼ったあとは、たとえば表中のテキストを変更したり、色を変えたり、大きさを変えたりと、自由にそのまま編集することも可能です。
HTML編集で表スタイルを書き換えレスポンシブ表示にも対応させる
このままでも十分に綺麗な表を作成することができましたが、もうひと手間加えてさらに見やすい表へと変えていきましょう。
最近ではブログをスマートフォンなどのより画面の小さなデバイスで見る方も非常に多いですよね…というか、ほとんどがそうです。
さきほど作成した記事を、ためしにスマートフォンのプレビューで確認してみると、最大幅650pxで調整したのに、画面から大きくはみ出してしまっています。
これでは読者の可読性も低下しますし、見た目にも綺麗ではありませんよね。
HTML編集：table-layout: fixedをautoに置換
この状態を解消するには、画面の表示幅に合わせて、表の最大幅も伸び縮みさせるよう設定してやることが必要です。
さきほど表を貼りつけたテスト記事で、HTML編集の画面を表示させると、表のHTMLが見えるようになります。
そのHTMLの冒頭部分に、style="table-layout: というコードがあり、デフォルト（貼り付け直後）の状態だと【fixed】が表示されていますが、これを【auto】と書き換えてあげます。
▽書き換え前【fixed】：表幅は固定
<style type="text/css"><!-- td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;} --></style> <table dir="ltr" style="table-layout: fixed; font-size: 10pt; font-family: arial,sans,sans-serif; width: 0px; border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0"><colgroup><col width="95" /><col width="95" /><col width="95" /><col width="95" /><col width="95" /><col width="95" /></colgroup> <tbody>
▽書き換え後【auto】：表幅は可変
<style type="text/css"><!-- td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;} --></style> <table dir="ltr" style="table-layout: auto; font-size: 10pt; font-family: arial,sans,sans-serif; width: 0px; border-collapse: collapse; border: none;" border="1" cellspacing="0" cellpadding="0"><colgroup><col width="95" /><col width="95" /><col width="95" /><col width="95" /><col width="95" /><col width="95" /></colgroup> <tbody>
こうすることで、記事が表示される画面の最大幅に応じたレイアウトに自動調整が行われ、はみ出しが解消します。
＊なお縮小後の体裁や見栄えによっては、もう少し表自体の調整が必要になる場合があります。
スポンサーリンク
表組みして記事作成することはSEO的にも有利…らしい
ブログ記事で表組みを行うことはちょっと面倒な気もしますが、SEO*3的な観点からも、良いとされています。
もちろん、スッキリとした表であらわすことによる見やすさ向上ということも去ることながら、表中の文章（テキスト）も『文字』としてカウントされることで、検索結果や記事評価に多少なりとも影響する部分もあると考えられます。
これまで、表組みは面倒だから、エクセルなどで作成してスクリーンショット→画像で記事掲載という方もいらしたかと思いますが、ぜひ表スタイルでの掲載に切り替えていっていただければと思います。
まとめ
ブログ記事への表貼り付けは一見難易度が高そうですが、Googleスプレッドシートを利用することで非常に簡単に実現可能です。
SEO的な観点からも望ましい施策ですので、この機会に是非試してみてください。