[ SWELL ]表(テーブル)がスマホで横スクロールしない時の解決方法

WordPressの神テーマ「SWELL」では、右メニューでポチポチ選択するだけで簡単に表も横スクロールできちゃいます。が、とある条件下でスクロールしてくれないことがあるのですね。

以前も、それ体験した。体験して解決したのに忘れてまたやった。ので覚え書き。

SWELL で横スクロールする表を作る手順

まずは簡単に表の作り方をご説明。

左ブロックメニューから「テーブル」を選択します

2行2列など選択して「表」を作ります

ここまで、どのテーマにも共通するWordpressの普通の表の作り方です。

右メニューで「横スクロール設定」をする

「SWELL」では右メニューから簡単に表のデザインを作ることができます。

表の見た目、ヘッダーセクション、余白、そして、横スクロール設定。

ここでパソコンとスマホそれぞれのスクロールを設定できます。設定する場所としてはここだけです。たったこれだけで横スクロールする表が出来上がります。

……が、以前から度々、スマホで横スクロールしない事態に遭遇していました。そのたびに解決するのに、遭遇するとまた忘れる記憶よ……。

SWELL で表が横スクロールしなかったらチェックする所

本題です。

今回、これの前記事「ドメイン移管」の記事を作って、公開し終わって、スマホで確認してスクロールしていないことに気づきました。

あわせて読みたい

[ドメイン移管手順]さくらインターネットからエックスサーバードメインへ移管する ドメイン移管の方法「さくらのドメイン」編です。この記事では「.JPドメインの移管」についても少し触れさせていただきます。 「さくら⇒エックスサーバー」移管の主な手…

「スクロールできます」という文は出ているのですが、見切れてるんですよね……恥ずかしい……。

正解は中央揃えの解除

これは、テーブルブロックが「中央揃え」に設定されていると起きる現象です。

解除すれば、はい……スクロールします。良かった。

↓↓

ドメイン管理企業	新規取得料金	ドメイン移管料金	ドメイン更新料金
さくらのドメイン .com .net 英語.jp	2614円 2484円 3982円	2614円 2484円 3982円	2614円 2484円 3982円
エックスサーバー .com .net 英語.jp	770円 770円 1980円	1298円 1518円 3102円	1298円 1518円 3102円

おまけ : CSSで表をスクロールさせる方法

SWELLではこんなことする必要がないわけですが。

普通のWordpressテーマでは表はスクロールしないので、特定の表だけスクロールさせたい場合はCSSで何とかします。

表を作ってCSSクラスを付ける

「高度な設定」→「追加CSS」に記入します。ここでは scrollable-table にしておきますね。

追加CSSを開いて以下をコピペ

@media (max-width: 767px){
.scrollable-table {
overflow-x: scroll;
white-space:nowrap;
display: block;
}
}

表の下に横スクロールバーが表示されます。

SWELL では何でも簡単

「SWELL」は神テーマだ神テーマだと常々言っている当方が書いた「デメリットなんかないです」という記事。

あわせて読みたい

「SWELL」の評判デメリットレビューを斬る 評判が良いSWELLというWordpressテーマは本当に使いやすいのか。 SWELLという有料テーマはアフィリエイトに向いているのか。 SWELLは他のワードプレステーマと比べて使…

「使いこなす」と言うほど何も難しくないのがまた神なわけですが、どんなことでも機能のみに頼っているとワケが分からないことは起こりがちです。

不思議なことが起きた時は、自分で調べる力は付けておきたいものですね。

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

WordPressのカスタマイズに困ったら

上手く行かなかったらご依頼ください。