表のレスポンシブがうまくいきません（ワードプレス6.0に対応していますか？）

  • ラ

    ワードプレスで表の中に画像を貼り付けてあるのですが、スマホで見ると、右側が少し切れます。

    何度かスマホ内に収まるように、PCで調整したのですが、「テーブル表示をレスポンシブ対応にすればスマホの幅に収まるようになるはずだよ」と聞きました。

    JINのフォーラムで検索したのですが、約三年前　私と同じような方がいらっしゃり、追加CSSで調整してみたのですが、対応できませんでした。

    調べてみると、5月にワードプレス6.0に変わっているとのことでした。

    ワードプレス6.0対応にレスポンシブは対応になっていますか？

    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    0
  • ラ

    ①3年前のフォーラムの件とは下記の内容です。

    Ryota ADMINISTRATORS 約 3 年前
    @ルミ さん

    こんにちは！
    詳細をお書きいただきありがとうございます。
    頂いたURLを元に修正のCSSを書きましたので、以下CSSをWordPressより「外観」→「カスタマイズ」→「追加CSS」に追記し、
    問題が解決するかご確認いただけますでしょうか？

    .dataTables_wrapper table tr th{
    font-size: 100%;
    }
    .tablepress tbody tr:first-child td{
    border-top: 1px solid #ccc;
    }
    ただ、このコードはプラグインの現状の設定を元に作成しているものになりますので
    ルミさんの方でプラグイン側を変更した場合、崩れてしまう可能性がございます。

    また、上記のコードはデベロッパーツールを使って作成したコードですので
    デバイスのチェックは済んでおりません。

    ルミさんの方でスマホ時のスクロールがうまく行くか
    上記と合わせてご確認いただけますと幸いです。

    お手数お掛け致しますが、
    宜しくお願い致します。

    ②私のワードプレスでの記事を載せておきます。

    https://fuse-anime.com/anne-young/

    スマホで撮ったスクショ
    0_1655814238564_Screenshot_20220621-211232.png

    以上　ご対応お願いします。

    0 1 件の返信

  • @ラック さん

    こんにちは！
    詳細のご共有ありがとうございます。

    ワードプレスで表の中に画像を貼り付けてあるのですが、スマホで見ると、右側が少し切れます。

    基本的には画像のキャプションが影響しているはずなので、
    こちらの環境では、以下の追加 CSS で対応できました！

    .wp-caption {
	width: 100%!important; 
}

    Classic Editor をお使いだと思うのですが、テーブル幅を手動で変更している場合は、
    調整し直す必要が出てくるかもしれません。。
    （おそらくかなり細くしていると思いますので...）
    ⠀
    ⠀

    JINのフォーラムで検索したのですが、約三年前　私と同じような方がいらっしゃり、追加CSSで調整してみたのですが、対応できませんでした。

    こちらは、プラグインを使っている表のようですし、
    条件がかなり違うので CSS は効かないと思います。。。

    お手数おかけしますが、ご確認よろしくお願いいたします！

    0