PR

【TablePress】で作った表をスマホで横にスクロールさせる方法ついて解説!

ブログ運営
この記事は約7分で読めます。
記事内に広告が含まれています。

こんにちは、かかしです。

TablePressで作った表がスマホだと横に圧縮されて、見にくいのをどうにかしたい!

TablePressで作った表をスマホで綺麗に表示させたい!

今回は、このようにTablePressで作った表をスマホやパソコンで横にスクロールさせて、綺麗に表示させたい!そんな方に向けて記事を書いていきたいと思います。

ブログを初めて1年未満の僕でも、理解できたやり方を紹介します。

初心者の方でも、分かるように写真付きで解説していきたいと思います!

この記事を読めば、

  • TablePressで作った表をスマホでスクロールする方法が分かる!
  • 表が横に圧縮せずに表示することが出来る!

TablePressで表の表示に困っている人でもすぐに解決できるようになります。

前提条件として、プラグインの【TablePress】をインストールしている必要があります。

\「TablePress」のインストールの仕方についてはこちらの記事で説明しています!/

TablePressで作った表を綺麗に表示する方法

では、早速「TablePress」を作った表をスマホやパソコンで横にスクロールさせて、綺麗に表示する方法について解説していきます。

前提条件として、私は、

  • 無料テーマの「Cocoon」を使用しています。
  • プラグインの【TablePress】をインストールしている必要があります。

ちなみに、私もコレをやる前は、下のように表が横に圧縮されていました。(改行されて見にくい)

ABCD
この記事では、
TablePressで作成した
表を綺麗にスマホで表示するスマホでスクロールするこの記事は、初心者でも分かるように書いていきますCSSやHTMLなどの言葉が出てきますが、
方法を解説してきますなんとかなります!
一緒に頑張りましょう!

これでは、読む人からすると見にくくて最悪ですよね。

そこで今回紹介するやり方をやれば、誰でも以下のように表を綺麗なまま表示できるようになります!

この方法を使えば、下のようにスクロールできるようになります。(下にスクロールバーがあるのでそこでずらせます!)

ABCD
この記事では、
TablePressで作成した
表を綺麗にスマホで表示するスマホでスクロールするこの記事は、初心者でも分かるように書いていきますCSSやHTMLなどの言葉が出てきますが、
方法を解説してきますなんとかなります!
一緒に頑張りましょう!

それでは、先に大まかな流れについて説明します!

今回は、手順がかなり多いので、2つに分けて紹介していきたいと思います!

\記事制作はAIに任せて、高速化しよう!/

手順その1 「TablePress」での設定

まず先に、「TablePress」での設定の手順についておおまかな流れについて解説していきます。

  1. 「TablePress」「プラグインのオプション」をクリック!
  2. 「プラグインのオプション」のCustom StylingのカスタムCSSにコードを入力する(後で紹介)
  3. 入力したら下の「変更を保存」をクリックする

いったんここで「TablePress」での設定完了!

次からは、写真付きで解説してきます!

「TablePress」での設定
  • STEP1
    ワードプレスの左のツールバーの「TablePress」の全てのテーブルをクリック!
  • STEP2
    「TablePress」「プラグインのオプション」をクリック!
  • STEP3
    「プラグインのオプション」のCustom StylingのカスタムCSSにコードを入力する

    コードは、(コピペして使ってください!)青色のマーカーをコピーしてください

    .tablepress{ width: ●●●px; }

    ※黒丸は、720か700がオススメ!

    div.myScrollBox { overflow: scroll; white-space: nowrap; }

    この2つを入力してください!

  • STEP4
    入力できたら、下の「変更を保存」をクリックする

    コレでとりあえずの下準備は、完了です!

注意点

TablePressで表を作るときに下にある(下の画像)

この画像の一番上の空白のチェックは、外すようにしてください!

次に投稿ページでの設定を行います。

\記事制作はAIに任せて、高速化しよう!/

手順その2 投稿編集の画面でやること

さっきのところで紹介した「TablePress」での設定が完了したら、次は投稿編集画面(いつも記事を書いているところ)で行うことを解説していきます。

ちなみに私は、コレを使って編集しています。

先に大まかな流れについて解説すると、

  1. いつも通り「TablePress」から作成した表を呼び出す
  2. 表を呼び出したら、表をショートコードに変換する
  3. ショートコードの前後にコードを入れる(後で紹介)
  4. 完成 プレビューで見てみるとできているはず!!

コレで、「TablePress」で作成した表をスマホで綺麗に横にスクロールして見ることができます。

次からは、写真付きで解説してきます!

記事制作画面でやること
  • STEP1
    いつも通り「TablePress」から作成した表を呼び出す

    私の場合は、

    赤丸から呼び出しています。

  • STEP2
    表を呼び出したら、表をショートコードに変換する

    表をショートコードに変換するためには、表をクリックして以下の写真の赤丸をクリックしてください

    そしたら、表がコードに変わると思います。

    表がコードに変わって、心配になるかも知れませんがプレビューでは、しっかりと表示されています。

  • STEP3
    ショートコードに変換したら、ショートコードの前後にコードを入れる

    ショートコードの前後には、(コピペして使ってください)

    <div class=”myScrollBox”>[tab1e “” not /]</div>

    赤マーカで引いたところを使ってください

    実際は、こんな感じです。

  • STEP4
    完成 プレビューで見てみるとできているはず!!

一通りやるとこんな感じです。

コレで、スマホで綺麗に表を表示できるようになると思います。

\記事制作はAIに任せて、高速化しよう!/

まとめ

今回は、表を読者の方に見やすくしてもらえるように、横にスクロールするやり方について紹介しました!

参考なればにうれしいです。

今回、参考にさせていただいた記事は、こちらです。

TablePressで作成したテーブルをスマホで横スクロールする方法 (thunderblog.org)

最後までご覧いただきありがとうございます。

このほかにも「TablePress」について解説しています。

ホーム » 【TablePress】で作った表をスマホで横にスクロールさせる方法ついて解説!
スポンサーリンク

コメント

タイトルとURLをコピーしました