WordPressの表がレスポンシブ対応ではかえって読みにくい時の対応

 

WordPressで表を作る時、レスポンシブ対応にするには表のプロパティで横幅を「空欄」か100%に設定しました。

 

決してpx表示(600のように数字を入れると600pxという意味)にしないでねと伝えました。詳細は次の関連記事を読んで下さい。

 

 

 

でもですね。

これも時と場合によって違う。そう思うことがあるんですね。横長の表にしたほうが良いのでは?なんて思う時です。

 

下のように5列の表に単純な画像が入っているような場合、レスポンシブで良いでしょう。(画像が小さいのはご容赦を)

 

レスポンシブ対応 レスポンシブ対応 レスポンシブ対応

 

 

でももし、これに文章が入ってくると事情は変わってきます。

 

 

下にある表の中の文章を読んでみて。パソコンでは何とか読めるものの読みづらいでしょう。

 

詩のもつ味わいは台無しましてやスマホでは改行が多くて「何のことやらさっぱり分からない」

 

詩なんて横方向に読まないだろう!というツッコミは無しでお願いしますネ(汗)

 

はい、お一人様、離脱・直帰です。

 

 

靜かな村の街道を 筧が横に越えてゐる
それに一羽の鴉がとまつて 木洩れ陽の中に
空を仰ぎ 地を眺め 私がその下を通るとき
ある微妙な均衡の上に 翼を※(「楫のつくり+戈」、第3水準1-84-66)をさめて 秤はかりのやうに搖れてゐた

レスポンシブ対応

湯沸し

たぎり初めた湯沸し…… それはお晝休みの 小學校の校庭だ
藤棚がある 池がある 僕らはそこでじやんけんする
僕は走る 僕は走る…… かうして肱をついたまま
夜の中に たぎり初めた湯沸し……

レスポンシブ対応

靜夜

柱時計のチクタク ああ時間の燕らが
山を越える 海を越える 何といふ靜けさだらう
森の中で 梟が鼓をうつ やつとこの日頃
私は夜に對し得た 壁を眺め 手を眺め

レスポンシブ対応

蟋蟀

新聞紙に音をたてて 葡萄のやうな腹の 蟋蟀が一匹とびだした
明日はクリスマス この獨りの夜を 「愕かすぢやないか
魔法使ひぢやあるまいね そんなに向う見ずに 私の膝にとび乘つて」
「ごめんなさい 何しろ寒くつて……」

 

 

スマホ表示ではせっかくの詩が台無し。

読みづらいことこの上ありません。

 

 

スマホで文章の入った表をレスポンシブにすると読みづらい

 

 

横長に読ませるためにスクロールバーを表示する

 

詩の持つ情緒や視覚的な効果をなるべく損なわず、4列の表に入れ込む方法はないものか?

 

その方法が、全画面をスマホ画面に収めず、あえて長く横幅を取りスクロールバーで横に移動するという方法です。

 

今回はわざわざ詩など入れたので、適当な使い方では無かったかもですが、どんな文章を入れ込む場合でも同じことです。

 

 

靜かな村の街道を 筧が横に越えてゐる
それに一羽の鴉がとまつて 木洩れ陽の中に
空を仰ぎ 地を眺め 私がその下を通るとき
ある微妙な均衡の上に 翼を※(「楫のつくり+戈」、第3水準1-84-66)をさめて 秤はかりのやうに搖れてゐた

レスポンシブ対応

湯沸し

たぎり初めた湯沸し…… それはお晝休みの 小學校の校庭だ
藤棚がある 池がある 僕らはそこでじやんけんする
僕は走る 僕は走る…… かうして肱をついたまま
夜の中に たぎり初めた湯沸し……

レスポンシブ対応

靜夜

柱時計のチクタク ああ時間の燕らが
山を越える 海を越える 何といふ靜けさだらう
森の中で 梟が鼓をうつ やつとこの日頃
私は夜に對し得た 壁を眺め 手を眺め

レスポンシブ対応

蟋蟀

新聞紙に音をたてて 葡萄のやうな腹の 蟋蟀が一匹とびだした
明日はクリスマス この獨りの夜を 「愕かすぢやないか
魔法使ひぢやあるまいね そんなに向う見ずに 私の膝にとび乘つて」
「ごめんなさい 何しろ寒くつて……」

 

表を囲むスクロールタグとして

 

テキスト編集モードで

<div class=”scroll-box”>

</div>

というふうに表を囲みます。テキストモードでやってくださいね。

 

 

 
 
 

AddQuicktagに登録しておくと簡単に使えます。

 

タグをadquicktagに登録する

 

 

divタグに対して次のCSSを設定します。

.scroll-box { overflow-x: auto; } .scroll-box::-webkit-scrollbar { height: 5px; } .scroll-box::-webkit-scrollbar-track { border-radius: 5px; background: #eee; } .scroll-box::-webkit-scrollbar-thumb { border-radius: 5px; background: #666; }

カスタムCSSに貼り付けてください。

 

カスタムCSSは、プラグインの「Simple Custom CSS」をインストールすると「外観」の中に作られます。

 

simple custom cssプラグイン

 

 

カスタムcss

 

 

下の39 40 41等は行なので、表示されなくても問題ありません。

 

カスタムcss

 

 

 

 

コメントは受け付けていません。