お問い合わせ

SWELL不具合|Tableブロックのキャプション追加で縦スクロールバーが出現

  • URLをコピーしました!

SWELLで、テーブルブロックを挿入し、キャプションを追加しました。

すると、テーブルの右横に縦スクロールバーが出現するようになりました。

テーブルの高さは決してはみ出ている訳ではありません。

なぜかスクロールバーが出現します。

見た目も悪いですし、何より困るのがスマホ画面で下にスクロールする時に引っかかることです。

この現象が、SWELLのバージョン(2.7.1)の問題なのか、Wordpress6.1.1の問題なのか確認はしてません。

将来的に解消するかもしれませんが、一時的な対策としては、CSSを少しいじることで対応します。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富で、テーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。

目次

テーブルブロックの縦スクロールバーを消すカスタマイズ

テーブルブロックのHTML構造とCSS

<figure class="wp-block-table">
  <table></table>
  <figcaption class="wp-element-caption"></figcaption>
</figure>

直接的な要因として、スクロールバーが出現するのは以下のCSSが当たっているためです。

overflow-x: auto;を解除すれば、スクロールバーは消えます。

ただし、現象と対策があっていないので、この方法は避けるべきです。

.wp-block-table {
    overflow-x: auto;
}

対応①:tableブロックのラッパーのCSSを変更

overflow-x: auto;が設定されています。

.wp-block-table {
    overflow-x: auto;
}

今回のケースでは、縦方向にはみ出しているので、overflow-yに「scroll」が設定されている可能性が高くなります。

overflow-yは明示的に設定されていませんが、上位ブロックから継承しているoverflow-y:autoになっていますので、「ブラウザに依存します。一般的にスクロールして表示する。」なので、「scroll」なのでしょう。

下方向にはみ出した要素があって、overflow-y:autoでスクロールバーが出現しているので、そこを変更してあげれば解決するでしょう。

.wp-block-table {
    overflow-y: hidden;
}

overflow-y:visibleだと相変わらず、縦方向のscrollバーが出現します。

この理由は、他のサイトに書かれていましたので引用します。

overflow-yに「visible」を設定しているのに、はみ出して表示されません。overflow-yに「visible」を設定していて、overflow-xに「hidden」または「scroll」している状態で下方向にはみ出した要素があると、縦方向にスクロールされて表示されるようになっています。縦方向の表示が、横方向の設定であるoverflow-xの値によって表示が変わってきます。

https://www.prj-alpha.biz/entry/2018/03/13/224708

overflow-x:autoになっているので、overflow-xは「scroll」と同じです。

かつ、overflow-yが「auto」または「scroll」または「visible」の場合はスクロールバーが出現する仕様です。

つまり、overflow-x:autoの場合はoverflow-yは「hidden」じゃないといけません。

今回の問題は、何らかの理由で縦方向がはみ出ているということだと思います。

対応②:figcaptionの高さをCSSで調整

テーブルブロックにキャプションを追加すると縦スクロールバーが出現するため、<figcaption>のサイズが悪さしている可能性があります。

margin-bottomの数値が0になっているので、少し数値を追加します。

<figcaption>のサイズが大きくなると、なぜか縦スクロールバーが消えます。

.p-articleThumb__caption, .wp-block-embed>figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption {
    margin-bottom: 0.1em;
}

こちらの方法は、見た目が少し変わるだけで、本質的には変わってないので将来的にも安全な修正方法のように思います。

まとめ

ブロックエディタになってから、この手のデザイン崩れが常に発生するリスクがありますね。

WordPressもテーマもアップデートしなければいいのですが、変更をため込んでからアップデートしてしまうと差分が大きくなりすぎてキャッチアップするのが難しくなるジレンマがあります。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次