Bloggerにスプレッドシートの表を貼り付ける＆横幅・高さを調節する

2021-05-03

どういう分野であれ、記事の中で表を使いたいことがあると思います。HTMLやMarkdown形式で表を描こうとすると、それなりに面倒ですし、慣れてない人にはハードルが高めです。

でも、Bloggerなら表を作るのも簡単です。Googleスプレッドシートで表を作成して、それをBloggerに貼り付ければいいだけです。なにせ、どちらもGoogleのサービスですから。

以下、備忘録としてやり方をまとめておきます。

まずはスプレッドシートで表を作成しましょう。

表ができたら、その表の範囲を選択して右クリック→「コピー」を選択します。

表のコピーができたら、Bloggerの投稿作成画面に戻り、コピーした表を貼り付けます。

これで貼り付け自体は完了です。ただのコピー＆ペーストです。

ただ、よく見てみると、表の横幅が大きすぎてはみ出ていますね。このままでは表の全体が表示されないので、調整が必要になります。

表のサイズを調整するために、Bloggerの投稿作成画面を「作成ビュー」から「HTMLビュー」に切り替えます。

切り替えたら、「table-layout: fixed; width: 0px;」という部分を見つけてください。

見つかったら、その部分を「table-layout: auto; width: 100%;」に書き換えます。

「table-layout」を「auto」に設定することで、デバイスの画面サイズに対応したサイズで表示され、「width」を「100%」に設定することで、表の横幅が画面の横幅いっぱいに表示されます。50％にすれば表の横幅は画面の横幅の半分になります。

この書き換えをすませて、「作成ビュー」に戻ると、表がきちんと作成画面の横幅に収まっています。

そして、実際のサイトの表示でも、表の横幅が画面の横幅にフィットしています。

これで、表の貼り付けが完了です。

大したことではありませんが、知っておくとかなり便利かと思います。

最近、『汎兮堂Health』で「2022年禁止表国際基準の変更まとめ」という記事を書いた際に、表のレイアウト調節が必要になったので、本記事にHTML編集の実例として追記しておきます。

スプレッドシートで表を作成し、それをコピーしてBloggerのエディタに貼り付けるのは上で述べた通りです。

すると、スマホで閲覧した場合に、表が画面からはみ出してしまいました。

これを修正する方法は、上で述べたとおり、HTMLを編集して、「table-layout: fixed; width: 0px;」という部分を「table-layout: auto; width: 100%;」に書き換えることです。

↓

このHTML編集の結果、表示は以下のように改善されます。

横幅が自動的に調節され、無事に表全体が画面内に収まりました。ところが、横幅縮小のあおりを受けて、「投与経路」の列の「経口（口腔粘膜を含む）」「局所（関節周囲・関節内・腱周囲・腱内）」という言葉が各セル内に収まらなくなってしまいました。

これは、これらのセルの高さの上限が設定されているせいで、言葉全体を表示するために必要な高さに調節されないためのようです。そこで、これもHTMLを編集し、それぞれの言葉の前にある「max-height: 42px」という部分の「42」を「84」に変更して、セルの高さの上限を拡大しました。

このHTML編集によって、表示は下のように改善されました。

表全体が画面に収まり、各セル内の言葉もすべてセル内に収まって表示されています。これでレイアウト調整完了です。

以上のとおり、「表全体の横幅」と「各セルの高さ」の調節ができれば、必要最小限のレイアウト調整はできるのではないかと思います。HTMLを編集すると言っても、実際にいじるのはほんの数文字だけなので、それほどハードルは高くはないのではないでしょうか。