WordPress(ワードプレス)の見づらい表からおさらば！レスポンシブ対応の方法を徹底解説！

「WordPressで作ったサイトをパソコンとスマートフォン両方で見られるようにしたい」と考えていませんか。こうしたレスポンシブ対応は、機種を問わずにサイトを見てもらえるので、アクセスアップに役立ちます。

今回はレスポンシブ対応が分からないと悩んでいる人のために、WordPressへの適用方法をまとめました。記事を参考に、パソコンだけでなくスマートフォンからでも気持ちよく見られる方法を実践できます。

WordPress(ワードプレス)レスポンシブ対応の表とは

パソコンだけでなくスマートフォン、タブレットなどの機械に合わせて、サイトの画面を自動で調整してくれるしくみをレスポンシブと呼びます。

記事の大切なポイントやデータをまとめた表はスマートフォン画面では大きくなりがちですが、レスポンシブ設定で大きさが変われば、スマホ用のちょうどのサイズで見られるようになります。

スマートフォンはパソコンよりも画面が小さく、レスポンシブ対応がないと表が入りきらないため、横移動を繰り返さないと見られません。読者が余分な手作業をしないで表を見られるために、レスポンシブという工夫が重要です。

記事にテーブルを挿入するメリット

記事内に表を入れれば、スマートフォンやタブレットからも見やすくなります。数字による統計や、ポイントの箇条書き、会社概要や商品の特徴などをまとめた表は、レスポンシブ対応によりひとつの画面だけで理解できます。

文字を並べただけの記事では、読者も疲れてしまうでしょう。しかし表を設ければ大切なポイントがすぐに分かるうえ、記事全体の見栄えもよくなります。

以上からスマートフォンやタブレットの読者も想定しつつ、レスポンシブ対応の表を作っていきましょう。

WordPress(ワードプレス) 標準テーブルはレスポンシブでない

WordPressでは表を「テーブル」と呼んでいますが、標準のものは横幅が変わらないのでレスポンシブではありません。パソコンではひとつの画面に収まりますが、スマートフォンでは一部がはみ出した状態になりがちです。

WordPressで作ったサイトは、スマートフォンからだと画面の横移動ができないので、表全体を見られないことに読者が不快感を覚えるでしょう。

記事投稿画面において「表のプロパティ」に向かい、幅の欄を「100％」に変えれば、表がはみ出さなくなります。デフォルトでは「700px」などとピクセル指定になっているので、見落とさないように注意しましょう。

テーブルのレイアウトが乱れる原因

WordPressの表のレイアウトが乱れるのは、幅指定のコードが勝手に入るからです。新規作成時に幅指定コードを取り除かなければ、表示が乱れたままで修正が難しくなることもあるので注意しましょう。

前述の「100％」によるセル幅指定に加えて、テーブル全体枠を100%、幅指定を1行目だけにするなどの準備が大切です。記事投稿前に、忘れることなく確かめましょう。

WordPress (ワードプレス)でテーブル作成時の注意点

テーブルを作るなら、横の項目が多すぎるなど無理なものは作らない方がよいでしょう。スマートフォンでも見やすいように、横軸の項目は3つ程度までにとどめることが重要です。

表形式でまとめていても、セルごとの文字数が多いと読者は見づらいでしょう。項目を分けながら表自体を2つに分けたり、縦軸の項目を細かく分けたりなど、アクセスした人が見やすい構成を常に心がけてください。

WordPress(ワードプレス)のレスポンシブテーブルの種類

縦に積む場合

一般的なレスポンシブテーブルは、見出しや内容を縦に積む場合です。PCでは項目別に見出しと中身が横に並んでいますが、スマートフォンでは縦に並ぶことが多いでしょう。

上から順番に並んだ見出しや内容をblock要素に選び、横幅100％などに変えればスマートフォンでもキレイに表示可能です。

2列のみなら会社概要や、商品のサイズ、機能などの特徴をまとめるのに使う人が多いでしょう。内容が見づらくならないなら横幅を縮めるだけでも対応できます。

HTML

CSS

p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 60px auto 40px;
}
table {
margin: 20px auto;
}
.tbl-r02 th {
background: #e9727e;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
.tbl-r02 td {
border: solid 1px #ccc;
padding: 10px;
}

@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tbl-r02 {
width: 80%;
}
.tbl-r02 th,
.tbl-r02 td {
border-bottom: none;
display: block;
width: 100%;
}
}

横並びを縦並びにする場合

統計や料金表などのデータは、横に長く並びがちですが、テーブルの構成によっては縦並びで解決できるかもしれません。ただし高さ指定などが必要な関係から、テキスト量が多いと対応に時間がかかるでしょう。

theadとtbody以下にtrを収めてから、floatで横並びに変えられます。中身はblock指定で縦に並べられるので実践してみましょう。

HTML

CSS

p {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 60px auto 40px;
}
th {
background: #e9727e;
border: solid 1px #ccc;
color: #fff;
padding: 10px;
}
td {
border: solid 1px #ccc;
padding: 10px;
}
@media screen and (max-width: 640px) {
.tbl-r03 {
width: 90%;
}
.tbl-r03 tr {
display: block;
float: left;
}
.tbl-r03 tr td,
.tbl-r03 tr th {
border-left: none;
display: block;
height: 50px;
}
.tbl-r03 thead {
display: block;
float: left;
width: 30%;
}
.tbl-r03 thead tr {
width: 100%;
}
.tbl-r03 tbody {
display: block;
float: left;
width: 70%;
}
.tbl-r03 tbody tr {
width: 50%;
}
.tbl-r03 tr td + td {
border-left: none;
}
.tbl-r03 tbody td:last-child {
border-bottom: solid 1px #ccc;
}
}

疑似要素で見出しを用意する場合

同じ種類のものを、複数の項目で比較するテーブルです。PCでは横長になっているのを、スマホ向けに縦積みにしたいときに使えます。

スマートフォン向けの場合にthをすべて非表示にし、それぞれのtrにおける最初のtdに「:before疑似要素」でth偽装を行いましょう。ただしborderが横幅100％にはまりきらないなど、規模によっては無理が生じるかもしれません。

borderを使わないデザインならスムーズに実装しやすいといえます。

HTML

CSS

※PCのデフォルトスタイルは省略
@media screen and (max-width: 640px) {
.tbl-r04 {
width: 80%;
}
.tbl-r04 .thead {
display: none;
}
.tbl-r04 tr,
.tbl-r04 td{
display: block;
width: 100%;
position: relative;
}
.tbl-r04 td:first-child:before {
content: “見出し:before”;
background: #e9727e;
box-sizing: border-box;
color: #fff;
font-weight: bold;
height: 40px;
padding: 10px;
position: absolute;
top: -41px;
left: -0.2%;
display: block;
width: 100.5%;
}
.tbl-r04 tr {
margin-bottom: 40px;
}
}

content:attr() で見出しを表現する場合

横軸に見出しを並べるだけでなく、縦軸にも別の見出しを示したテーブルです。PCにあった見出しをスマホでは非表示にして、縦積みの見出しを一番上に置き、非表示部分はtd内のdata-labelをcontentプロパティで引き出して画面に映しましょう。

ただし表の規模が大きすぎると、意味合いを完全に守りながらレイアウトを変えられない可能性もあるので注意です。

HTML

CSS

※PCのデフォルトスタイルは省略
.tbl-r05 td:first-child {
background: #fbf5f5;
}
@media screen and (max-width: 640px) {
.tbl-r05 {
width: 80%;
}
.tbl-r05 .thead {
display: none;
}
.tbl-r05 tr {
width: 100%;
}
.tbl-r05 td {
display: block;
text-align: right;
width: 100%;
}
.tbl-r05 td:first-child {
background: #e9727e;
color: #fff;
font-weight: bold;
text-align: center;
}
.tbl-r05 td:before {
content: attr(data-label);
float: left;
font-weight: bold;
margin-right: 10px;
}
}

spanで見出しを表現する場合

PCでは横軸に並べた各項目に、複数の要素を比べる形です。スマートフォンではひとつずつの要素を各項目に対する答えをまとめる形で紹介しています。

たとえば天気に関するデータで日付、天気、最高気温などの順で項目を並べ、それぞれの日の気象条件をまとめるケースが当てはまります。

Cで示した見出しを表示しないようにしてから、SP時にspanタグに入った見出しをtdに出せば、表の内容を守りながらレスポンシブ対応できるでしょう。

HTML

CSS

※PCのデフォルトスタイルは省略
.tbl-r06 tr:nth-child(even) {
background: #fbf5f5;
}
.tbl-r06 td {
border: none;
}
.tbl-r06 .last {
border-bottom: solid 1px #ccc;
}
@media screen and (max-width: 640px) {
.tbl-r06 {
width: 80%;
}
.tbl-r06 .thead {
display: none;
}
.tbl-r06 td {
display: inline-block;
}
.tbl-r06 span {
font-weight: bold;
}
.tbl-r06 .last {
border-bottom: none;
}
}

スクロールで表示させる場合

表の性質上、作り変えるよりも、スクロールする手間が生じてでも横長にしたままの方が見やすいケースもあるでしょう。

縦長になりすぎたり、レスポンシブにこだわりすぎたりすると、かえって表が見づらくなると判断したら、以下のコードでスクロール表示を取り入れてもよいといえます。

HTML

CSS

@media screen and (max-width: 640px) {
.scroll {
overflow-x: auto;
}
.tbl-r07 {
min-width: 640px;
margin: 0 10px 50px;
}
.tbl-r07 td {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
}

WordPress (ワードプレス)でレスポンシブテーブル作成する方法

ビジュアルモード

直したい表を決めたら、メニューバーのテーブルより「セル」を選び、プロパティに入りましょう。

幅を空欄にしておきます。ちなみにテーブルメニューにある「表のプロパティ」でも幅には何も書いていない状態にしましょう。

以上により、表がレスポンシブ対応していないと気づいても、ビジュアルモードよりすぐに対処できます。

注意するポイント

ビジュアルモードで表を作るときは、最初に列や項目の数を決めておきましょう。列の幅はピクセルではなく％で示すことを忘れないでください。％は表全体の割合として列の幅を示します。

テーブルの枠線や線に触ってしまうと、表をきれいにレスポンシブ対応で表示できなくなるので注意しましょう。触れたときはツールバーの取り消しボタンや「Ctrl」とZキーの同時押しでなかったことにできます。

テキストモード

テキストモードで表部分は、＜table style=”width: ○○○px ;“＞　＜td style=”width: ○○○px ；“＞と出ています。このうち「width: ○○○px ;」という部分を消せば、レスポンシブが有効になるので覚えておきましょう。

WordPress (ワードプレス)のレスポンシブテーブルを調整する方法

幅を調整する場合

テーブル幅を調整するなら、1行目のセルプロパティでチェンジできます。1行目のみを調整するだけで常にユーザーの思いどおりに幅を変えられるのがWordPressの利点です。

デフォルトではピクセルで表示しているので、幅が固まった状態なので、スマートフォンでもサイズが変わらず表の一部が画面からはみ出た状態になります。幅調整の意思がなくても事前に％表示に変えるなどの配慮が大切です。

装飾する場合

テーブルを装飾して目立たせたい人もいるでしょう。列を縦に選べば、背景色や文字色をチェンジできるなど、一括での装飾ができます。

ただし文字装飾やセンタリング時も枠線に触れないように注意が必要です。焦って間違ったところをクリックし、テーブルなどを乱さないためにも、慎重なマウスコントロールがカギになるでしょう。

WordPress(ワードプレス)のプラグインでレスポンシブテーブル作成する方法

TablePress

TablePressは、専用メニューから入れる設定画面が分かりやすく、複雑なイメージである表作りをスムーズに進められるでしょう。

通常の記事同様、編集したテーブル限定の一覧も見られます。テーブル内の項目や内容の並べ替え、装飾などもシンプルに進められるので、初めてブログやサイトを作る人はインストールしておくと便利です。

【TablePressを取得】

TinyMCE Advanced

TinyMCE Advancedは、編集画面のビジュアルモードに専用ツールバーが現れ、テーブルボタンから表を作れるプラグインです。

TinyMCEで作ったテーブルは最初からレスポンシブ対応になっているので、プラグインなしで作ったときの幅表示の変更など、気を使うポイントを少なくできます。効率的にテーブルを作りたいと思ったら、インストールしてはいかがでしょうか。

【TinyMCE Advancedを取得】

Elementor

Elementorは、項目を示す見出しの下に2列体制で情報を並べられるなど、柔軟に表を設定できるのが特徴です。行や列などのイメージ図を選ぶだけで、テーブルの骨組みを決められるなど、単純な作業で設定できます。

飲食店のメニューや統計データなど、本格的な表を示したい人におすすめのプラグインです。

【Elementor を取得】

WordPress(ワードプレス)でテーブルを頻繁に使用する場合

定型文に登録

テーブルを使う機会が多いと感じたら、定型文としてのコードを用意しましょう。たとえば以下のようなコードを登録すれば、状況に合わせて列や行の数の変更や、幅修正だけでクリアできることがあります。

CSSを定義

CSSで装飾を示しておけば、カスタマイズも簡単です。以下のコードは見出しに背景色をつけたいときに使います。

.table1 {
width: 100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border: 1px solid #ccc;
font-size: 13px;
}
.table1 th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #8fd2ed;
}

装飾つきテーブルとして簡単に入れたいなら、定義したクラス名も添えておきましょう。

WordPress(ワードプレス)レスポンシブ対応の表まとめ

WordPressでサイトやブログを作るなら、スマートフォンからアクセスする人でも見やすいように、レスポンシブ対応にする必要があります。

レスポンシブとはパソコンだけでなく、スマートフォンで見たときでも画面サイズに合わせて記事のレイアウトが自動で作り替わる機能です。

アクセスアップにはスマートフォンからの参加も大切なので、今回の記事で必要な作業の手順を覚えながら、表作りに慣れていきましょう。