インブロ

このブログのテンプレートは「ELEPHANT3」

【WordPress】表・テーブルをスマホ表示で見やすく!見切れるための対策方法!

WRITER
 







この記事を書いている人 - WRITER -
リヨです。#ファッション #体験談 #趣味 などの皆に「伝えたいことを・意味あるものを」コンセプトに活動中! ブログ作りに役立つ情報を発信しています。
詳しいプロフィールはこちら

 

WordPress(ワードプレス)のビジュアルエディターの表・テーブルを使用したけど、スマホで表示すると「表が見切れちゃう」現象に合ったことはありませんか?

ちなみにぼくは「表・テーブルが見切れる」経験あります笑

リヨ

こんな感じで見切れちゃった方に解決方法をご紹介します!

 

表・テーブルをスマホでもきれいに見せるためにも「レスポンシブ化」をしなくてはいけません。

ここでは、「表・テーブルが見切れる」といった問題をお持ちの方に解決方法をお知らせします!

 

WordPress(ワードプレス)のビジュアルエディターの表・テーブルとは

 

ワードプレスの「表・テーブル」を使う機会が、記事を書く上で必ずと言えるほど使う人が多いと思います。赤いカッコで囲んだ部分がワードプレスのビジュアルエディターの「表・テーブル」機能です。

使うのにも理由があって

  • シンプルで見やすい
  • データーの細かな詳細などが記載しやすい
  • 使い勝手がいい「便利」

本当に使い勝手がいいですよね。

リヨ

それでも、「表・テーブル」機能を使用して、完成したサイトをいざスマホで確認したら見切れちゃっているといった問題が出てくることがあると思います。

その為の対処法を以下で紹介していきますね!

 

WordPressの表・テーブルがスマホで見切れちゃう時の対処法

 

まずは、「表・テーブル」使用した記事をスマホで確認しましたか?

するとすると、こんな状態で表示されていたりしませんか?

完全に見切れちゃってる…

リヨ

こうなってしまうと見栄えが悪くなってしまって、消えってしまった文章のところに何が書いてあるかわからなくなってしまいますよね。

 

そうなってしまったときの対象法がこちら!

 

①まずは「表・テーブル」マウスカーソルで選択します。

 

 

②表のプロパティを選択します。

 

 

③幅の736を半角で100%に書き換えます。

 

 

④100%に書き換えてOKを押すだけ!

 

 

するとすると、こんな感じで綺麗にスマホに合ったサイズで表示されます。めちゃくちゃ簡単な作業じゃなかったですか?笑

 

スマホサイズに対応できましたね!

リヨ

 

もう一度手順をおさらいしておきますね。

 

表・テーブルをスマホ対応にする手順

 

  1. 「表・テーブル」マウスカーソルで選択
  2. 表のプロパティを選択
  3. 「幅」の所に記載された数字を半角で100%に書き換えます。
  4. 100%に書き換えてOKを押すだけ!

これらの手順で進めることで、簡単にスマホサイズに合った表示をすることができます。

 

横幅をpxから%指定することを忘れずに!

 

px表示から%表示にしないと「表・テーブル」のレスポンシブ化はできません。

ぼくにもよく合ったケースが、「表・テーブル」を使用した記事を完成させ、スマホで確認せずに投稿しそのまま状態で一か月ほど過ぎたこともありました。

記事を見返している内に「スマホ対応できていない」と気づき、1ヵ月が経った時にやっと訂正したりと長い期間そのまま放置してしまっていました。

 

レスポンシブ化していないとSEO的にも評価されにくい?

 

今や、スマホが主流の中でスマホに対応していないページはSEO的に評価されにくいという声も聞こえてきます。

ぼくはSEOの専門家ではないので詳しくは分かりませんが、それでも「スマホに対応している記事か対応していない記事かであれば絶対に対応している記事の方がいい」ですよね!

文章が見切れてしまってたら伝えたいことも伝えることができないよね

リヨ

なので、「表・テーブル」機能を使用した際には上記で説明した手順で試してみてください。

 

表・テーブルのスマホ対応できましたか?

 

上記で説明した手順で試してもらえれば「表・テーブル」機能をスマホサイズに合わせることができるはずです。

これで1つ問題を解決できましたね!

リヨ

実際、ぼくもこの問題に遭遇していろいろ試して、今ではスマホ表示できて「表・テーブル」を使う楽しさがいっぱいに…笑

これも見やすさを重視するのであれば必要な手段ですし、また違うWordPress(ワードプレス)のプラグインを使用して、ここが分かりにくいと感じる部分がありましたら、解決策を記事に紹介していきたいと思います!

最後までご閲覧ありがとうございます!

 

この記事を書いている人 - WRITER -
リヨです。#ファッション #体験談 #趣味 などの皆に「伝えたいことを・意味あるものを」コンセプトに活動中! ブログ作りに役立つ情報を発信しています。
詳しいプロフィールはこちら







Copyright© リヨオフィシャルブログ , 2018 All Rights Reserved.