wordpress

【WordPress初心者向け】表・テーブルが見切れてしまう時の対処法!

Wordrpressでテーブルをご使用の皆さんこんにちわ!

@yamachanです。

テーブルを使用したのに、テーブルが見切れてしまう。

こんな経験したことはありませんか?

PCは基本的には大丈夫何ですが、スマホ表示した時にテーブル/表が見切れているなんてことになります。僕も普段はクライアントさんのWebページ納品する時に、テーブル使う時%指定しているのですがすっかり自分のブログとなるとこういうところ見落としがちで痛恨のミスでした。
今ではモバイルファーストと言われるくらいスマホでブログを見ている方が多いです。

「表が見切れてしまう」と折角その記事を読んでくれた人に、情報を伝えるということができなくなってしまいます。
なので、WordPressでのテーブル・表のレスポンシブ化する簡単な方法を紹介します。

そもそもWordpress標準搭載のテーブルはレスポンシブ対応ではない。

レスポンシブ対応とは何か?

レスポンシブ対応とは、PC・スマホ両方に対応したデザインのサイトのことを表します。
なので、1つ更新すれば両方に対応するという優れた対応方法がこのレスポンシブ対応ということなのです。

レスポンシブ対応ではないってどういうこと?

はい、話を戻しますが、Wordpressに標準搭載している表やテーブルはレスポンシブ対応ではないのです。

レスポンシブ対応でないと、先ほども書いたのですがスマホで表示した時に表が見切れてしまいます。

PCで見た時の表

 

スマホで見た時の表

こんな感じで、PCでのプレビュー画面では大丈夫なのにスマホで表示すると2枚目の写真のように表が見切れてしまって困っている方向けにいくつか解決方法を紹介します。

テーブルをレスポンシブ対応させるいくつかの解決方法

まあスタンダードなやり方からオススメのWordpressのプラグインまであるので、そちらも紹介していこうと思います。

The 王道解決策1:表をレスポンシブ対応させるなら「%」指定を

Wordpessの記事投稿画面のあなたの直したい表から表のプロパティをまずは見て見ましょう。

そこから「Px」ピクセル指定→「%」パーセント指定にしましょう。「100%」表示にしましょう。

PCで見た時
スマホで見た時

ピクセす指定になっていることで、ピクセル数をしっかり表示しなさいという指示を行なっています。なので、どんなに画面が小さな端末に対しても「900px」表示しなさいと言ったら、「900px」無理やり表示しているのです。

しかし、テーブルを「%」パーセント指定にするとその人が使っている画面に合わせたパーセンテージで表示しなさいという指令をするので、レスポンシブ対応になります。

これでいい感じに見切れていたテーブル達がレスポンシブ化しましたね。

解決策2:簡単にプラグインでレスポンシブ対応の綺麗な表を作れる「TablePress」

TablePressとは?


テーブルを簡単に作れるプラグインです。また一度作成したテーブルはショートコードですぐに引っ張ってこれるので、他の記事にもそのテーブルを掲載した場合、もう一度テーブルを作る必要がないなどといったメリットがあります。
それだけではなく、読者に見えやすいように「A→Z」や「速度」など並び替えなどの機能などもついたテーブルを作成することができるスグレものプラグインです。

TablePressは簡単に表が作る方法

1. TablePressをインストール後、新しいテーブルを作成。

 

TablePressダウンロードページ

2. わかりやすいように名前付けや行数などを選択しよう
3. テーブルの内容を入力し、変更保存をクリックしよう
4. テーブル情報より、ショートコードを取得しよう
5. ショートコードを記事に貼り付けて「完成」
見栄えはこんな感じです。

レスポンシブ化させたかったり、並び替えが必要なテーブルを作成したいという方にはぜひこのTablePressはオススメです。

でもプラグインを入れるということはホームページを重くする原因にもなるのでそこは気をつけてください。

最後に:Tableの用途は基本的に「%」指定で問題なし

テーブルが見切れてしまうといった問題に対してですが、基本的にWordpress標準搭載の表を「%」指定することで問題はないでしょう。
モバイルファーストと言われるくらい、モバイルでの対応は今はかなり重要になってきています。
折角あなたの書いた記事をモバイルで見れないと、読者もやはりモバイル層が今では多いのでモバイルファーストを意識したページ作りを心かけて見てください。

ABOUT ME
山田 裕太(やまちゃん)
現在、東京とセブを行き来する大学4年生のwebデザイナー。高校時代に情報科に所属していたことから、困っている人をwebの力で助けたいと思いながら、大学2年次セブ島へ留学したり、大学4年時ではスタディツアーを大学生向けに運営したり、かき氷店の出店を見据えたかき氷販売などをセブ島にてする。20代の若者達に新しい生き方に挑戦できるロールモデルとして「Yamalog.online」を運営。
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus