Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

ブログ記事に画像付きテーブルを設定すると、設定によってはスマホ表示時にレイアウトが崩れてしまうことがある。

PC表示のみならばTableタグだけでなんとかなるが、レスポンシブデザインにするにはCSSを設定しなければならない。

そこで、スマホ表示時にテーブルを縦並びにする方法をここに書き残しておこうと思う。

※Vaster2の場合は自動的にサイズが変更される


問題点


画像付きのテーブルをスマホで見るとレイアウトが崩れてしまう


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法
PC表示
Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法
スマホ表示

画像付きテーブルを組み込んだ記事をスマホで見ると、上の画像のようにレイアウトが崩れることがある。

横長のテーブルの場合は大抵このような状態になってしまうので、スマホ表示時に縦並びになるように設定したい。

よって、縦並びにするにはテーブルにCSSを設定して、レスポンシブデザインにする必要がある。

改善方法


01.記事のテーブルのレイアウトを決める


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

とりあえず、左に見出し、次に画像、最後に説明といった形のテーブルを設定してみる。

この設定については自由だが、上のようなテーブルを設定するには以下のようなソースになる。

<table class="table01">
<tbody>
<tr>
<th>見出し1</th>
<td class="table01-img">画像1</td>
<td>文章1</td>
</tr>
<tr>
<th>見出し2</th>
<td class="table01-img">画像2</td>
<td>文章2</td>
</tr>
<tr>
<th>見出し3</th>
<td class="table01-img">画像3</td>
<td>文章3</td>
</tr>
<tr>
<th>見出し4</th>
<td class="table01-img">画像4</td>
<td>文章4</td>
</tr>
</tbody>
</table>

※テーブルのクラス名は「table01」としている
※画像のセルには画像（コード）を挿入する

02.画像を挿入して、不要な部分を削除する


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

まずはテーブルの「画像1」の右にカーソルを置いて画像を挿入する。

次に「HTMLモード」にして、画像のコードから赤字の部分を削除する。

<td>画像1<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="画像URL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="600" height="131" src="画像URL" width="200" /></a></div>
</td>

※複数行ある場合は、他の行も同様の手順を行う

03.画像テーブル用のCSSを設定する


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

「テンプレートデザイナー」から、以下のCSSを追加する（もしくは「HTMLの編集」）。

CSSの設定については説明を付けておいたので、それを参考にカスタマイズして欲しい。

/* 画像付きテーブル
-------------------------------------*/

 table.table01 {
 width:100%;　/* テーブルの横幅 */
 border:#000 solid 2px;　/* テーブル全体の罫線 */
}
table.table01 tbody th {
 background:#000;　/* 見出しの背景色 */
 color:#fff;　/* 見出しの文字色 */
 padding:10px 10px;　/* 見出しの上下・左右の余白 */
 border:#000 solid 1px;　/* 見出しの罫線 */
 vertical-align:center;　/* 見出しの縦位置（中央寄せ） */
}
table.table01 tbody td.table01-img img{
 width:100%;　/* 画像の横幅値 */
 height:100%;　/* 画像の縦幅値 */
 display:block;
}
table.table01 tbody td.table01-img{
 padding:0px;　/* 画像自体の余白（なし） */
}
table.table01 tbody td {
 background:#fff;　/* 文章セルの背景色 */
 border:#000 solid 1px;　/* 文章セルの罫線 */
 padding:10px 15px;　/* 文章セルの上下・左右の余白 */
 vertical-align:top;　/* 文章セルの縦位置（中央寄せ） */
}

 /* テーブルのレスポンシブデザイン */

 @media screen and (max-width: 780px) {
table.table01 tbody th {
 display:block;　/* ブロック要素にしてセルの幅を100％にする */
 padding:5px;
}
table.table01 tbody td.table01-img{
 padding:0px;
}
table.table01 tbody td {
 display:block;
}
}

※画像の設定をする理由は、そのまま設定すると無駄な余白が生まれるため（画像サイズによっては画像表示が崩れる）
※文章の量によって画像サイズが変わる

参考サイト：8bit モノづくりブログ（上記は こちらのサイト様のソースをベースに設定しています）

実施例


PC表示


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

PC表示の場合は、上のような形で表示される。

ただし、上のコードでは画像の縦横比を合わせたことを前提にして、画像周辺の余白を無くす設定にしている。

テーブルに入れる画像の縦横比が異なる場合や、画像周辺の余白が気にならない場合は下記のCSSを削除して欲しい。

table.table01 tbody td.table01-img img{
 width:100%;　/* 画像の横幅値 */
 height:100%;　/* 画像の縦幅値 */
 display:block;
}
table.table01 tbody td.table01-img{
 padding:0px;　/* 画像自体の余白（なし） */
}
table.table01 img{
 display: block;　/* 画像とセルの余白をなくす */
}

スマホ表示


Blogger Labo：【Blogger】画像付きテーブルのレスポンシブデザインの設定方法

スマホ表示の場合は、上のような形で表示される。

PCでこれを確認するには、Chromeのデベロッパーツールを使用すると良い。

【ブログ制作】PCでスマホの表示を確認する方法

Bloggerのお役立ち情報をまとめていくブログです（今はVaster2のカスタマイズ情報が中心）。