Google
AdSenseとの親和性も高く無料でブログ作成するのに便利なBloggerですが、投稿編集画面（エディタ）に表を作成する機能がありません。
不便ですよね。一からHTMLで表を作成するのはとてもとても面倒です。やってられません😤。
|
■Bloggerで簡単に表を作成する
●使用するアプリ・サービス
使うサービスはコレです。
|
| Googleスプレッドシート |
Google版オフィススイートの表計算アプリ（サービス）ですね。
Bloggerと同じGoogleが提供しているだけあって、Bloggerとの親和性が高いです。
●使い方・設定方法
・使い方（表の挿入方法）
やり方は実に簡単です。Googleスプレッドシートで作成した表をBloggerの投稿編集画面（エディタ）でコピペするだけです。
以下、実例を交えて説明します。
- Googleスプレッドシートでの表の作成・コピー
まず、ブログ（Blogger）に載せたい表をGoogleスプレッドシートで作成します。
|
| 表の作成（Googleスプレッドシート画面） |
|
| 作成した表のコピー（Googleスプレッドシート画面） |
- Blogger投稿編集画面（エディタ）での表の挿入（ペースト）
表をGoogleスプレッドシートでコピーしたらBloggerの投稿編集画面で表を貼り付けたいところにペーストします。
|
| Blogger投稿編集画面での表のペースト |
実際にPCでこのブログを確認するとこんな感じです。
|
| 実際のブログ上での表の表示（プレビュー画面） |
なのですが、この方法には多少の問題点があります。
・問題点1：スマホ（モバイルサイト）で適切に表示されない（表が画面からはみ出てしまう）
この状態でスマホでこの記事を確認すると表が画面からはみ出ています。
|
| 表がスマホ画面からはみ出ています（絵文字😁を使ったセルが見えません） |
この画面を右へスライドするこはできず、閲覧者が表の全体を見ることはできません。困りましたね😫。
・問題点2：BloggerのHTMLビュー投稿編集画面で適切に表示されない
BloggerのHTMLビュー投稿編集画面には『HTMLの書式を設定』というボタンがあり、コレを押すとページのソースコードを構造化（？）された状態で表示してくれます。
|
| HTMLビュー投稿編集画面で『HTMLの書式を設定』ボタンを押したところの例（Blogger画面） |
ところが、今回のようにGoogleスプレッドシートの表を貼り付けた投稿はこの機能が働きません。
|
| Googleスプレッドシートの表を貼り付けた投稿はソースコードが構造化（？）された状態で表示されない（Blogger画面） |
これではHTMLを編集したい場合にとても不便です😫。
この事象はソースコードに文法上の誤りがある場合に出るのですが、今回のケースが一体何が悪いんでしょうか🤔？
●問題点の対策
・問題点1の対策：スマホ（モバイルサイト）で適切に表示されない
- 原因：表のサイズが固定されている
色々調べてみたら、貼り付けた表のサイズを変更すれば良いことが分かりました。
表全体を定義しているこの部分です。
『<table border="1" cellpadding="0" cellspacing="0" data-sheets-root="1"
dir="ltr" style="border-collapse: collapse; border: none; font-family:
Arial; font-size: 10pt;
table-layout: fixed; width: 0px;" xmlns="http://www.w3.org/1999/xhtml"』
- 対策：表のサイズを変更する
変更前HTMLソースコード
先ず、HTMLビュー投稿編集画面で表のサイズを指定している『table-layout: fixed; width: 0px;』という部分を見つけます（Ctrl+F キーで検索することが出来ます）。
|
| Blogger画面 |
↓↓これを変更します↓↓
変更後HTMLソースコード
ここを『table-layout: auto; width:
100%;』に書き換えます。
|
| 表のサイズを『table-layout: auto; width: 100%;』に変更（Blogger画面） |
この変更の意味ですが、
「table-layout」を「auto」に設定することで、デバイスの画面サイズに対応したサイズで表示され、「width」を「100%」に設定することで、表の横幅が画面の横幅いっぱいに表示されます。50％にすれば表の横幅は画面の横幅の半分になります。（参照サイト：『Bloggerにスプレッドシートの表を貼り付ける ＆ 横幅・高さを調節する』 - 電脳電網総研 より）
です。
この変更を行うとスマホ（モバイルサイト）でも表全体を確認することが出来るようになります。
|
| スマホ画面 |
・問題点2の対策：HtMLビュー投稿編集画面で適切に表示されない
- 原因の推定：『</col>』タグが正しく認識されない
HTMLビュー投稿編集画面をよく見てみると、表の列属性を定義ししている<colgroup>の『</col>』タグが明るい赤字で表示されています。
|
| Blogger投稿編集画面（HTMLビュー） |
この『明るい赤字』はHTMLビュー投稿編集画面で『このタグは余計ですよ』という判断をされている時に表示される色です。どうやらこれが原因のようです。
（ちなみに本件はBloggerのバグのようです。）
- 対策：正しく認識されない『</col>』タグを変更する
試しに『<col ***></col>』を『<col *** />』に変更してみました。
変更前HTMLソースコード
『<colgroup><col width="34"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col></colgroup>』
|
| Blogger投稿編集画面（HTMLビュー） |
↓↓これを変更します↓↓
変更後HTMLソースコード
『<colgroup><col width="34" /><col width="100" /><col width="100" /><col width="100" /><col width="100" /><col width="100" /></colgroup>』
|
| Blogger投稿編集画面（HTMLビュー） |
この状態で『HTMLの書式を設定』ボタンを押すと、構造化（？）されたHTML画面が現れました！＼(^o^)／
|
| Blogger投稿編集画面（HTMLビュー） |
- さらなる問題点
これで一件落着と思ったら、投稿編集画面で一度『作成ビュー』戻って再び『HTMLビュー』にすると『</
col>』タグが復活してしまっています。
|
| Blogger投稿編集画面（HTMLビュー） |
また『HTMLの書式を設定』ボタンが効かなくなってしまっています😥。
こればかりは都度手作業で修正するしかなさそうです。
自分で認識できないタグを生成してしまうBloggerって…😅。
●改善要望点
- とにかくBloggerのHTMLビュー投稿編集画面で</ col>タグを正しく認識して欲しいですね。イチイチ手作業でアレコレやるのはとてもとても面倒です
- せめて<col *** />タグはそのままの状態でセーブして欲しいです
●まとめ
いろいろとありましたが、Googleスプレッドシートを使うことによりなんとかBloggerの投稿で（比較的簡単に）表を作成することができました。
Bloggerのバグは早く改善してくれないかなぁ。
