サポート » 使い方全般 » グーテンベルグのテーブルのレスポンシブ

  • 解決済 chatm

    (@chatm)


    グーテンベルグのテーブルを作っています。
    ダッシュボードのスタイルでテーブルのスタイルを設定し、cssでカタチを整えています。
    function.phpにスタイルを追加

    function my_enqueue_block_editor_assets() {
    	$script = <<<SCRIPT
    
    wp.blocks.registerBlockStyle('core/table', {
      name: 'Line',
      label: '下線'
    });
    SCRIPT;
    	wp_add_inline_script( 'wp-blocks', $script );
    }
    add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

    PCサイズのテーブルはうまく表示されるのですが、
    w480以下ではthを100%で縦並びにしたいのですが、それができません。
    wp-block-table以外で作ったtableを編集画面から移植しただけなら、レスポンシブされます。
    しかし、移植した場合、編集画面の「ブロックのリカバリーを試行」が出てしまい、ダッシュボードでの編集が簡単ではないので、ダッシュボードから作ったテーブルで運用していきたいです。
    何か良い方法はございますでしょうか。
    css————

    @media(max-width: 480px){
    .wp-block-table.is-style-Line th, .wp-block-table.is-style-Line td{ width: 100%; display: block;}
    }
    • このトピックはが3ヶ月、 1週前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • @chatm さん

    はじめまして。
    CSSの書き方はあっていると思いますが、以下の点をチェックしてみて下さい。

    1. そもそも、記述したCSSがページに読み込まれているか
    2. 画面幅480px以下の時に、ちゃんとth/tdタグに記述したCSSが当たっているか
    3. テーマのスタイル等、別のCSSで上書きされていないか

    2と3については、Google Chromeの開発者ツールなどを使い、ブラウザの幅を狭めてチェックしていただくと分かりやすいかと思います。

    参考:ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB
    https://nandemo-nobiru.com/2944/

    スレッド開始 chatm

    (@chatm)

    ご対応頂き、検証方法やChromeデベロッパーツールを教えていただきましてありがとうございます。
    再検証しましたところ、ダッシュボードで付けられるテーブルスタイルを4つくらい設定していたのですが、設定のcssを打ち消すようなcssがあり、ぶつかっていました。
    修正して、レスポンシブ表示がうまくできました。
    教えていただきましてありがとうございました。お手数お掛けしました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。