ブログで稼ぐ

【表の作り方】スマホで見ると表が崩れる問題を解決(wordpress編)

【表の作り方】スマホで見ると表が崩れる問題を解決(wordpress編)
  • wordpressで作った表がスマホ表示で崩れて困っています。
  • スマホで左右にスクロールできる表の作り方が知りたいです。
  • エクセルで作った表のスクショを張り付けてもOK?
ブログを書いている時に表を入れたけど、スマホ表示すると横幅が圧縮されて表が崩れてしまった…っていう経験ありませんか?

本記事では、スマホで見た時に横幅が圧縮されず「表のみを左右にスクロールする方法」を教えます。

今回ご紹介する方法は、プラグインを使わずにWordpressのエディタで表を作るシンプルな方法です。

実際に作る表はこんな感じ↓

※PC表示だと変化がないので、スマホで本ページをチェックしてみてください。

※自己アフィリASP案件とセフルバック報酬額。
※上記表は【ブログ初心者が1万円稼ぐ方法】より抜粋しています。

スマホ表示だと表の下にスクロールバーが出てきて、左右に動かせることが確認できます。

では、作り方をチェックしてみましょう。

【表の作り方】スマホで左右にスワイプさせる方法

初回のみ追加CSSにコードをコピペする必要がありますが、画像付きで解説しますのでご安心ください。

📝表を作る手順

  1. いつも通り表を作る。
  2. 表プロパティで幅を100%→700pxに変更。
  3. テキストエディタで
    <div class=”scroll”></div>を追加。
  4. 追加CSSにコードをコピペ。
    ※設定は初回のみ

これだけ!いつものように表を作ってしまえば、1分で完了します。

画像付きで解説しますので、一緒に作ってみましょう。

手順① 表を作る

いつも通り、wordpressで表をつくります。

とりあえず、5行×3列の表を用意しました。

こんな感じ↓

test
test

 

手順② 表プロパティをカスタム

表を全選択した状態でプロパティをクリックしてください。

表プロパティの詳細が出てくるので「一般」の「幅」を100%→700pxに変更します。

スマホ表示が崩れる原因は自動調整!?

100%のままでは、デバイス毎に表示できる幅に表幅が自動調整されるため、スマホで見た時に横幅が圧縮されて崩れてしまう原因になります。

ちなみに、700pxはパソコン表示の時の最大横幅です。700px以下であれば適当に数値を調整してもOKです。

手順③ <div class=”scroll”></div>を追加

いつもは「ビジュアル」でブログ記事を書いていると思いますが、表を作った後に「テキスト」に切り替えてください。

切替はWordpress記事投稿画面の上部(メニューパーの右上)にあります。

先ほどの挿入した5行×3列の表の部分を「テキスト」でみると、以下の文字列で書かれていることが確認できます。

最上部と最下部が<table>…</table>で囲われています。

これを、
<div class=”scroll”><table>…</table></div>
という形にします。

こんな感じ↓

<div class=”scroll”>
<table style=”width: 700px; border-collapse: collapse;”>
<tbody>
<tr>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
</tr>
<tr>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
</tr>
<tr>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
<td style=”width: 20%;”></td>
</tr>
</tbody>
</table>
</div>

上記をコピーして自分のブログのテキストに張り付けてもOKです。5行×3列の表ができますので、必要に応じて行数と列数を変更してみてください。

手順④ 追加CSSにコードをコピペ

最後に、以下のコードを追加CSSにコピペすれば完成です。

/*表の左右スクロールここから*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
/*表の左右スクロールここまで*/

記事を投稿してスマホでチェックすれば、左右スクロールできる表の完成です。

追加CSSにコピペってどうすればいいんですか!? 具体的に教えてください!

追加CSSへの貼り付け方は以下の通り。

どのページでもOKなので、ブログの公開画面を開きましょう。

WordPressにロインにんしている状態だと、ブログの上部にメニューバーが表示されます。メニューにある「カスタム」をクリック。

 

左側にメニューバーが表示されるので、一番下にある「追加CSS」をクリック。

 

ここに、先ほどのコードを張り付けて「公開」をクリックすればOKです。

 

以上。

これでスマホで見たときに左右スクロールできる表がつくれているはずです。

表の1行1列は背景色を付けた方がいい

例えば、以下の2つの表のどちらが見やすいとおもいますか?
test
test

※背景無地の表

test
test

※背景色ありの表

背景無地だと、そのままスクロールしちゃって読み飛ばしちゃいそうになるかも。

ブログ記事の1文1文をすべて読んでくれる読者はいません。みんなスクロールしながら流し読みします。

そのため、せっかく要点を表でまとめても、無地の表だと読者はスルーして読み飛ばしてしまうかもしれません。

表や吹き出しは読者の目に留まる!

読者は文字を読みたくないので、表や吹き出し、箇条書きされた部分は目に留まりやすく読まれやすいポイントになります。

表を使うことで、伝えたいことを分かりやすく伝えることができます。例えば、比較表などが一番分かりやすい例ですよね。

とはいっても、ゴチャゴチャと装飾された表は読みにくくなるので要注意。

📝表を作るときのポイント

  1. シンプルかつ分かりやすくする。
  2. 表のマス中に箇条書きを利用する。
  3. 1行1列目に背景色を入れてる。

特に③は効果的であり、どんな表にも適応することができますよね。

ブログのテーマカラーや雰囲気に合わせて「1行1列にのみ背景色を入れる」ことで、読者の目に留まりやすく、記事中の文章を読み飛ばしても内容が理解しやすいブログ記事になります。

補足:表は画像で貼り付けしない方がいい

表だとスマホ表示で崩れてしまうので、エクセルで作った表のスクショをブログに画像として張り付けていませんか?

表の画像挿入はSEO的にやってはいけません。画像挿入してしまうと、Googleに表の中身を読み取ってもらえなくなります。

つまり、記事中の要点をまとめた重要なポイントをGoogleに評価してもらえず、SEO的に損をすることになります。

Googleは表の有無もチェックしている!?

記事中でGoogleに評価されるべき&評価して欲しい部分を隠してしまうことになります。SEOで集客するなら表を画像で張り付けてしまうのはNGです。

情報量が多い表を作ろうとすると、Wordpressの表よりも、エクセルの方が使いやすいのは理解できます。

ただし、SEO対策のひとつと割り切り、表はWordpressで作りましょう。

とはいえ、表はできるばけ簡潔に書くことを心掛け、ちょっと文章が長くなりそうなら、表ではなく箇条書きでまとめる等の工夫をしてみてください。

ブログ記事は見た目も重要です。

 

あわせて読みたい!
【読みやすいブログの特徴】ブログ初心者は記事内容より見た目を重視すべき理由
【読みやすいブログの特徴】ブログ初心者は記事内容より「見た目」を重視すべき理由ブログ初心者は記事内容よりも記事のデザイン・見た目を重視したほうがいいです。その理由は、ブログ初心者が高品質な記事を書くことは難しいけど、記事の見た目を改良して読みやすいブログ記事にすることは簡単にできるから。現代のスマホユーザーは"文章を読む"ということに慣れていないため、読者を疲れさせない&飽きさせないための工夫をすることが大切です。デザインを重視することで記事が読みやすくなり、離脱率を低くし、ページ滞在時間を伸ばす効果が期待できます。つまり、SEO的にも効果があると期待できます。...

 

以上。

スマホ表示でも崩れない表の作り方でした。

もし「参考になった!」と思ったらシェアしてもらえると嬉しいです