どうも。いけすびです。
TablePressというきれいな表を作成できるWordPressのプラグインがありますよね。
とても便利なのですが、先日かんたんな比較表を作ってみたところ、スマートフォンで見てみると右側が見切れてしまっていたんです。
どうやらレスポンシブにはなっていないようだったのでTablePressを拡張してレスポンシブ対応しました。
そのままだと見切れてしまう
問題の表はPCで見てみると横長でこんな感じに見えるんです。
これはスクリーンショットなのでPCでもスマートフォンでも同じように見えていると思います。
スマートフォンだとこんな感じで一番右側の列が見切れてしまっています。
今の時代、訪問者の半分はスマートフォンからのアクセスです。
このままだと訪問者の半分の方たちに見切れた表を見せてしまうことになるので、レスポンシブ対応は必須です。
Responsive Tablesを導入しよう
TablePressの表をレスポンシブ対応するにはResponsive TablesというTablePressの拡張機能を導入します。
まずこちらのResponsive Tablesのページにアクセスし、右側のダウンロードリンクから拡張ファイルをダウンロードします。
次にダウンロードしたファイルを解凍し、すべてのファイルをTablePressフォルダにアップロードします。
アップロードにはFTPソフトを使いましょう。いけすびはFileZillaを使っています。
アップロードした後にWordPressの管理画面からインストールしたプラグインの一覧を見てみると「TablePress Extension: Responsive Tables」が追加されます。
有効化させましょう。これで設定は完了です。
ショートコードでレスポンシブ指定
Responsive Tablesを有効化しただけでは表はレスポンシブにはなりません。
表をレスポンシブ対応にするためには、投稿画面にて指定しているショートコードにResponsiveのオプションを追加して上げる必要があります。
もともとこんな感じでテーブルIDを指定するだけのショートコードですよね。
このショートコードの中に、上のように「responsive=scroll」というオプション指定を付け加えます。これでOKです。
responsiveのオプション指定は”scroll”の他にも、”flip”や”collapse”といった指定もあります。
また、今回は指定しませんでしたが、レスポンシブにする対象のデバイスを限定するオプション（responsive_breakpoint）もあります。
説明は英語ですが、先ほどの拡張ファイルをダウンロードしたサイトに詳しく載っています。
表のレスポンシブ対応は必須
Responsive Tablesでレスポンシブ対応した結果、スクロールバーが表示されて右にスクロールして全ての情報を表示できるようになりました。
スマホからアクセスしてきた訪問者をガッカリさせないためにもしっかりとレスポンシブ対応しましょう。
まとめ
TablePressで作成した表をレスポンシブデザインにする拡張機能を導入しました。
「パソコンを使ったことがない新入社員」も最近いるくらいですし、今後はPCよりもスマートフォンやタブレットからのアクセスの方が増えそうです。
スマートフォンからアクセスしてきた人も満足できるように、レスポンシブ対応は必ず行いましょう。
最後までお読みいただきありがとうございます。
