ただいまリニューアル中

ワードプレスに表
テーブルをレスポンシブルに

ワードプレスに表<br>テーブルをレスポンシブルに</br>

スマホの性能比較記事などを書くときに「表」って欠かせないですよね。

表はやっぱりテーブルで作りますよね?画像で載せることも出来るけど、表を作って画像に変換して載せるぐらいなら作った表をそのまま掲載したほうが楽です。でも画像ならレイアウトが崩れたりしないので悩むところですよね。



コピペで表を挿入

ワードプレスではプラグインでテーブルを作ったりもできますが僕がやっている方法は「googleのスプレッドシートで表を作りコピペ」

googleアカウントは多くの人が持っていると思います。アカウントがあれば「スプレッドシート」というアプリが利用できます。ほとんどExcelと同じようなモノです。まずスプレッドシートで普通に表を作ります。

スプレッドシート01

作ったらワードプレスに持って行きたい部分だけを選択してコピー。ワードプレスのビジュアルエディタにペースト。

すると勝手に一行おきにグレーが入ってくれます。

マス目だけ正確に作っておけば修正もできるしセル内の改行などはワードプレス側でやったほうが楽ちん。

サンプル表

貼り付けた表をワードプレスのテキストエディタで見るとタグはこんな感じになっています。

無駄な部分がかなりありそうな気もしますが僕はあまり詳しくないのでとりあえずはそのままにしています。

詳しい方で「この表記いらないよ!」ってわかるかたいたら教えて貰えると嬉しいですw

<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--></style>
<table dir="ltr" border="1" cellspacing="0" cellpadding="0"><colgroup> <col width="100" /> <col width="176" /> <col width="176" /> <col width="176" /></colgroup>
<tbody>
<tr>
<td></td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;R15 Neo&quot;}"><strong>R15 Neo</strong></td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;R15 Pro&quot;}"><strong>R15 Pro</strong></td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;zenfone3&quot;}"><strong>zenfone3</strong></td>
</tr>

〜中略〜
<tr>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;特徴&quot;}"><strong>特徴</strong></td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;トリプルスロット&quot;}">トリプルスロット</td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;防水・FeliCa対応&quot;}">DSDV・防水・FeliCa対応</td>
<td data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;DSDS&quot;}">DSDS</td>
</tr>
</tbody>
</table>

レスポンシブル化する

さて表組みをワードプレスに挿入することはできたのですが、横に長い表だとおかしなことになりませんか?

スマホ表組み

表組みをワードプレスでレスポンシブル化するパターンはいくつかあると思いますが、僕は横にスクロールさせるのが一番スマートかつ見た目も崩れず項目の比較もしやすいのでベストだと思っています。

スプレッドシートをペーストしただけではスマホで表示した際に表組み部分だけ横幅が大きくなり、サイト全体が横スクロールするようになってしまうのでタグを少しだけ追加して表組み部分だけをスクロールするようにします。

<div style="overflow-x:auto;">
<table> 〜 </table> 
</div>

※太字部分を追加




変更がよくある場合

スプレッドシートの一部分だけをワードプレスに埋め込むことが出来ます。表示スピードは落ちますがスプレッドシートに変更を加えるとワードプレスに埋め込まれた表組みにも変更が反映されます。詳細は省きますが手順は下記のような感じ。

スプレッドシートメニュー → ファイル → ウェブに公開 → 設定をしてタグをワードプレスに貼り付け

表のサイズによってはスマホで見づらくなるので貼り付けタグに下記を追加しています。参考になれば幸いです。

width="600" height="950"




ブログカテゴリの最新記事