sakulabwebスマホで表(テーブル)の表示がはみ出る・見切れる場合の横スクロール対処法ポストシェアはてブ送るPocket当サイトのコンテンツにはプロモーション(広告)が含まれていますスポンサーリンク今回は、特に横長の表(テーブル)の場合で多くあるスマホで見た時の見切れやはみ出し等でレイアウトが崩れている場合の対処法です。今回は超初心者の方でも対応可能ですが、少し知識が必要な内容となっております。慎重に行えば問題ありませんが、バックアップなどを取り、いつでも元に戻せられる状態で作業を行いましょう。パソコンでは問題なく表示されている表(テーブル)ですが、スマホで見た時の表示が見切れてしまっていたり、はみ出してレイアウトが崩れている等の対処法として、横にスクロールさせる方法をご紹介します。この問題はよく価格表などで表が横長になってしまう場合におこる問題です。WordPressでは表のレスポンシブが対応されていない場合があります。(※テーマや設置状況により異なりますので確認してみましょう)※実はパソコンでしか確認したことが無く、スマホで見て気づいたなんてことは良くあります。画面幅いっぱいですが、問題なく表示されてます。(当ブログ内の記事を参考に表示)スマホで表(テーブル)を見た場合スマホで見ると画面の右側途中で見切れて表示されてます。右に動くのでずらしてみると、表がはみ出してしまっております。見れないわけでありませんがレイアウトが崩れてしまってますの印象は良くないです。今回はCSSのコードを追加して対応します。CSSと聞くと難しそうですが、コピペで対応できますので安心してください。左側メニューの「外観」から操作を行います。以下のどちらかの方法でスタイルシートCSSにコードを追加入力します。※WPのテーマや、WPの設置状況により異なります。上記以外では「外観」→「カスタマイズ」→「追加CSS」または、FTPで操作が可能な場合、FTPより対象のCSSファイルを開きます。どちらの方法でも問題ありません。作業を行いやすい、わかりやすい方法でスタイルシート(CSS)へ入力しましょう。以下のコードをCSS内に(コピペ)で貼り付けます。#bbb;}「表(テーブル)の横スクロールCSS」用コードを貼り付けた後は保存、更新を行ってください。表(テーブル)を表示している記事ページでコードを追加しますCSSでの作業が完了しましたら、次に表(テーブル)を表示しているページを編集します。WordPress(ワードプレス)の場合、記事ページまたは、固定ページを編集します。ポイント編集時のポイント!WordPressの場合、コードなどのタグを追加する場合は表示タブを「ビジュアル」から「テキスト」に変更してください。ページ内の表(テーブル)が表示されている部分を探します。表示部分を探しましたら、<table>~</table>を囲むように下記のコードを追加します。class="scroll"><table>~省略~ここには表(テーブル)の内容が表示されるように~省略~</table></div>コードを貼り付けたイメージはこちら↓。貼り付けた後は保存、更新を行ってください。記事ページ(固定ページ)ではこれだけで終了です。確認してみましょうパソコンでも表(テーブル)の表示で問題がないか確認します。次に、スマホの表示で見切れやはみ出し等の表示崩れがないか、また横スクロールの対応が反映されているかを確認しましょう。横スクロールを右にスライドしてみました。枠内に表示され崩れやはみ出しはありません!確認時はブラウザのキヤッシュが残っている場合がありますので、スーパーリロードなどを行い確認しましょう。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。無料で画像を拡大できるサービスの紹介web関連ワードプレスWordPressテーブルワードプレス【超初心者必見】まずはこれだけを押さえよう!ブログ集客で重要な4つの方法をわかりやすく解説WordPress(ワードプレス)でパーマリンクの設定(変更)方法と形式についてRECOMMENDこちらの記事も人気です。