WordPressで表がはみ出す時の解決方法【SANGO+スクロールヒント】

 WordPress(SANGO)で表を使うとき、PCでは表示がうまくいったけどスマホで表が画面からはみ出す、という時の解説策を説明しています。



スマホで表が画面からはみ出す

下のような表を別の記事で載せています。

下の表はPC画面での表示です。

PCでの表示

この表をスマホで見てみると、

スマホでの表示

表が画面からはみ出してしまっています。

ちなみにエディタはGutenbergを使用しており、表の設定は、「モバイルで横スクロール」を選択していました。

解決方法

WordPressの管理画面で設定を変更すると、解決しました

WordPressの管理画面から「外観 → カスタマイズ」を選択します。

メニューから、「詳細設定」を選択します。

下の方にスクロールして、「テーブルのスクロールを促すためにJSを読み込む」にチェックを入れて「公開」をクリックします。

これで、画面からはみ出していた表をスマホで見ると、はみ出さずにスクロールできるようになっていました。

さらに、表のタイプを「スクロールヒントを利用する」にすれば、スクロールできることがさらにわかりやすくなります。

下の画像がスクロールヒントを使用した結果です。スクロールができることがとてもわかりやすいです。

【補足】ストライプデザイン+スクロールヒント

  Gutenbergのエディタで、「ストライプデザイン+スクロールヒント」という組み合わせは簡単にできます。

 「ストライプ」を選択して、一番下の「高度な設定」の追加CSSクラスをコピーします。

スクロールヒントを利用する」を選択して、「高度な設定」の追加CSSクラスに、既に書いてあるコードから半角スペースを空けて、先ほどコピーしたコードを貼り付けます

これで、以下のようにストライプデザインでスクロールヒントを利用できています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

1989生まれ、機械機器メーカーで研究開発をしている機械系エンジニアです。 業務効率化や日々の生活を効率化できるプログラミングネタを発信しています。PythonとNotionとSANGO(WordPress)が特に好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。

WP-Searchにサイト事例として掲載されています。