ワードプレスの表をスクロール表示｜スマホ版レスポンシブする方法

こんにちは。あいりです。

wordpressの表は画面のサイズが小さいと見切れてしまうことがあります。スマホ対応版にレスポンシブする必要があります。

ワードプレスに表を作成して公開したら、スマホでブログの記事を見たとき、表が見切れてしまった経験はありませんか。

PC上で表を作成したときは全体的に表示されているように見えるので、ついついスマホで確認したときのことを見落としがちです。

PCからのブログの見え方とスマホで見たときの見え方に気を配りましょう。

作成した表をスマホでも見やすいようにスマホのような小さい画面に対応できるようにレスポンシブ化する方法をご紹介します。

また、表の項目の内容が多くなる場合、ただレスポンシブしただけでは読者にとって読みづらい表となってしましますので、「スクロール機能」をつけるといいでしょう。

表にスクロール機能を追加する方法をご紹介します。

表の下にスクロールを追加する方法

上記の表にスマホの画面でみたときに、スクロール機能を付ける方法をご紹介します。

１．ワードプレスの管理画面で「外観」→「テーマの編集」を選択し、テーマの「子テーマ」を選択します。

※「親テーマ」でコードを追加することも可能ですが、「親テーマ」がアップデートしたときに、今まで作成した内容が消えてしまう可能性がありますので、「子テーマ」で日々のカスタマイズ編集を行うようにしましょう。

２．「stye.css」を選択し、以下のコードを貼り付けます。

/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}

継続は力なりのサイトから引用しました。

３．投稿画面に移り、「テキスト」タブを選択し、表のHTMLコードが書かれている＜table　>と</table>タグを囲うようにして＜div class ="scroll"＞と＜/div＞タグを入れる

<div class="scroll">
<table style="width: 676px; height: 100px;">
<tbody>
<tr style="height: 25px;">
<td style="width: 37.22px; height: 25px; text-align: center;">項番</td>
<td style="width: 46.26px; height: 25px; text-align: center;">商品名</td>
<td style="width: 66.34px; height: 25px; text-align: center;">金額</td>
<td style="width: 59.31px; height: 25px; text-align: center;">性能</td>
<td style="width: 122.59px; height: 25px; text-align: center;">機能</td>
<td style="width: 45.25px; height: 25px; text-align: center;">重量</td>
<td style="width: 77.39px; height: 25px; text-align: center;">発売日</td>
<td style="width: 132.64px; text-align: center;">オプション</td>
</tr>
<tr style="height: 25px;">
<td style="width: 37.22px; height: 25px; text-align: center;">１</td>
<td style="width: 46.26px; height: 25px; text-align: center;">A商品</td>
<td style="width: 66.34px; height: 25px; text-align: center;">1000</td>
<td style="width: 59.31px; height: 25px; text-align: center;">４ｋ</td>
<td style="width: 122.59px; height: 25px; text-align: center;">カメラ、防水</td>
<td style="width: 45.25px; height: 25px; text-align: center;">500</td>
<td style="width: 77.39px; height: 25px; text-align: center;">3/5</td>
<td style="width: 132.64px; text-align: center;">無</td>
</tr>
<tr style="height: 25px;">
<td style="width: 37.22px; height: 25px; text-align: center;">２</td>
<td style="width: 46.26px; height: 25px; text-align: center;">B商品</td>
<td style="width: 66.34px; height: 25px; text-align: center;">2000</td>
<td style="width: 59.31px; height: 25px; text-align: center;">３ｋ</td>
<td style="width: 122.59px; height: 25px; text-align: center;">防水</td>
<td style="width: 45.25px; height: 25px; text-align: center;">200</td>
<td style="width: 77.39px; height: 25px; text-align: center;">4/9</td>
<td style="width: 132.64px; text-align: center;">有</td>
</tr>
以下省略
</tbody>
</table>
</div>

５.記事を公開し、スマホ画面で見たときに、スクロール表示がされます。

ワードプレスの表をレスポンシブ化する方法

表をレスポンシブ化する方法をご紹介します。

１．対象の表をクリックして選択し、ビジュアルエディターが選択されている状態で、「テーブル」を選択

２．「表のプロパティ」を選択し、表のプロパティのダイアログが表示される。一般タブにある「幅」の項目を「auto」で入力する

「auto」に設定することで表の縦横比を維持した状態で、画面のサイズに合わせて自動設定されます。

※よく他のブログでは「100％」で設定するようにお伝えしているところが多いですが、「100％」に設定すると縦横比が崩れてしまいます。

画面のサイズに合わせて縦または横伸びしてしまいますので、注意してください。

ワードプレスはデフォルトでレスポンシブ対応している！？

ワードプレスのバージョン4.4からデフォルトでデバイスに合わせて画像をレスポンシブ対応しています。

さらにワードプレスのバージョン4.5から編集中にコンテンツの内容をスマホ画面で見たときの見え方を確認することができるようになりました。

ワードプレスの管理画面の「外観」→「カスタマイズ」を選択し、右下にあるアイコンの

「ライブレスポンシブプレビュー」で確認できます。

今後さらにレスポンシブ対応が強化していくと思われます。

最後に

スマホ版の画面に合わせてレスポンシブ化する方法は理解できましたでしょうか。

少々難しい内容のものもありますが、ぜひユーザビリティを意識して表作成をしてみてください。