WordPress の投稿で標準の表・テーブルを使うのはスマホ表示に良くない?

WordPressのビジュアルエディタ、凄く便利ですよね。

皆さんはビジュアルエディタの「テーブル機能」使っていますか?

↓これです。

table_example_li

ビジュアルエディタのテーブルも視覚的に操作できるから便利だし、結構きれいに表示されますよね。

 

でも、

 

そのテーブルちゃんとスマホで確認しました?

 

もしかしたら右端の大事な部分切れてないですか?

せっかくのレスポンシブテーマ使ってスマホ対応してるのに、テーブルがちゃんと表示されてないことに気づいて慌ててる人いないですか?

 

それ僕です・・・(´・ω・`)

 

僕の経験をもとにWordPressでのテーブルの使い方を見てみましょう。

WordPress標準のテーブル使ってPCプレビューだけで満足してた

それは前回書いた記事のこと。

自衛隊 は厳しい?元 航空自衛隊員が過去を振り返ってみた

2016.11.17

↑でテーブルを使いました。

途中のテーブルはプラグインのTablePressを使ったんですけど、標準機能のテーブルも使ってみたくなり後半のテーブルを通常通り利用したんですよ。

こんな感じで

before_table_pc

ふむ。結構きれいに見えるものですね♪

記事が書けたことに満足。”公開ボタン” ポチー

レスポンシブテーマを使っている僕に何の不安もない。

 

スマホで見てみよう

公開して数時間後ふと書いた記事が気になりだす。

れいじー
あれ、そういやスマホってテーブルはどんな表示されるんだろ?

 

スマホスイー・・・

 

before_table_mobile

 

れいじー
右側見切れとるがな!!!

 

そして慌てて表示を修正することに。

解析編:標準搭載のテーブルを使うと裏(HTML)ではどうなっているのか

SEな僕としてはこうなってしまうと、中身(HTML)がどうなっているのか気になってしょうがなくなってしまいます。

HTMLを表示

僕が普段使っているブラウザはfirefoxです。これでソースを確認してみましょう。

“Clrl + Shift + I(アイ)”で「Web 開発ツール」を立ち上げます。これでHTMLの解析ができるようになります。(閉じる時も同じコマンドで♪)

テーブルにカーソルを合わせてHTMLを見てみると・・・

before_table_sauce
<table style="height: 163px; width: 697.533px;"

注目すべきは

 width: 697.533px

の部分ですね。

れいじー
うわぁ・・・px(ピクセル)で直指定されとるぅ・・・
“width”とは対象物の”長さ”を表しています。

他の部分も見てみると・・・

<tr style="height: 27px;">
  <td style="width: 72px; height: 27px;"> 6:00</td>
  <td style="width: 623.533px; height: 27px;"> 起床して点呼。結構緩めな点呼。</td>
</tr>

テーブル内のすべての箇所で長さを直指定されていることがわかりました。

まぁよくよく考えてみれば、自分でテーブルをドラッグして長さ調整してますからね 当然っちゃ当然です。

いろいろいじって分かりましたが、テーブルを挿入した時点ではレスポンシブが効いていまが、表の見た目を変えようと枠をドラッグした瞬間からpx指定になるようです。

解決編:テーブルをスマホ対応させるいくつかの方法

まず、レスポンシブ化していない表示領域いっぱいのテーブル(表1)を下記に用意しました。

ブラウザのウィンドウを縮ませるとテーブルが見切れてることが分かります。

表1
列1 列2 列3
Data1 Data2 これはレスポンシブ化してないテーブルです。おそらく途中の文章が見切れて何が書いてあるのか分からなくなっていると思いますよ?

 

では、このテーブルをレスポンシブ化させましょう。

方法1:横幅をpxから%指定に変更する

まずテーブルの枠の外側にカーソルを置き、テーブル全体が指定されるようにドラッグしましょう。

[1]テーブルを選択してプロパティを表示

↓のように青線で囲われる状態(選択状態)になります。

table_sentaku

この選択状態でビジュアルエディタメニューから

テーブル > 表のプロパティ

を選択します。 すると、テーブルの表示方法を詳細に指定できるウィンドウが立ち上がります。

[2]テーブル幅を%で指定

プロパティ画面の「幅」にはpxで数値が指定されていると思います。

table_property_01

この部分をで指定します。有効数値は1%~100%です。

ここでは画面いっぱいにテーブルを表示したいので100%で指定しています。

table_property_02

[3]レスポンシブ化できているかチェック

では画面で確認してみましょう。
下記の表2のようにレスポンシブ化できていれば成功です。

表2
列1 列2 列3
Data1 Data2 これはレスポンシブ化対応したテーブルです。ウィンドウを縮ませてもちゃんとここの文章が見えるはずですよ??

 

いかがでしたでしょうか。

テーブルを範囲選択してプロパティで幅を%指定に変えるだけです。

めっちゃ簡単♪

各行の長さ間隔をしっかり指定する方法もありますがテキストエディタを使うので今回は割愛します。
おそらくテキストエディタが使える人はおのずとやり方がわかると思うので(笑)

方法2:標準テーブルを使わずプラグインを使う

いくつかテーブル用プラグインはあるのですが、僕が使っているプラグインを1つ紹介します。

TablePress

tablepress

言わずと知れたテーブルプラグイン。

WordPress管理画面から

プラグイン > 新規追加

”プラグインの検索”フォームに「TablePress」と打ち込むとすぐに出てきます。インストール&有効化して完了。

使い方は・・・もうほかのサイトで散々書かれているので割愛しておきます(笑)

下記が作成したテーブルです。

列1列2列3
Data1Data2これはプラグインで作ったテーブルです。表を作るだけで何もしなくても勝手にレスポンシブ化されたテーブルになります♪

これは別画面であらかじめテーブルを作っておいて

[table id=3 /]

上記のようなショートコードという機能を使って呼び出しているだけです。

これだけでレスポンシブ化されたテーブルが出来上がります。

他にも、交互に行の色を変えたりマウスオーバーでハイライト表示させたり見やすく表示できる機能がデフォルトで搭載されています。

表の見た目は”sytle.css”で変えられるので自由度も高いです。

まとめ

今回は2つの方法でテーブルをレスポンシブ化してみました。

使い分けとしては

単純な見た目のテーブル
→WordPress標準搭載のテーブル

結合やデザインにこだわったテーブル
→TablePressプラグイン

でいいかなと思っています。あとはお好みでって感じですね。

レスポンシブ化されたテーマを使っているのであれば、スマホユーザーの為にもテーブルを見やすくしてはいかがでしょうか♪

シェアとかやってみる?