SEO・サイトの質問掲示板 >

WordPressテーマ「SWELL」で表スクロールデザインが崩れる時の対処法

Wordpress(ワードプレス)

本カスタマイズの
ポイント

WordPressテーマのSWELL(スウェル)では表組みをスクロールできる機能がありますが、横のセル数が多くなると表組みが崩れてしまうことがあります。これをCSSで調整します。

本カスタマイズの
効果・メリット

表組みスクロールが綺麗に見えるようになります。

本カスタマイズの
評価

難易度Lv2
やることCSSの追加
所要時間5分
ツール名なし(CSS調整)
費用0円
注意点特になし

SWELLの表スクロールを一段にする方法
改善前

以下のように表組が崩れた状態です。セル数が多い場合に起きています(セル数が少ない場合は起こりませんでした)。

SWELLの表スクロールを一段にする方法
改善後

表組みが一段になり、綺麗にスクロールできます。実際のデモサイトはこちらです。スマホ状態にしてご覧ください。

SWELLの表スクロールを一段にする方法
設定方法

  • ステップ1
    CSSに以下を追記します。これで表組みが段ずれすることなく綺麗にスクロールするようになります。
    .wp-block-table.sp_scroll_ {
        white-space: nowrap;
    }

ユウコ
ユウコ

これでおしまいだよ!表組みスクロールはきれいになったかな?もし、役に立ったらツイート、はてなブックマークしてくれると嬉しいな。

0

タイトルとURLをコピーしました