表のカスタマイズ

アフィンガー5

「アフィンガー5」のテーブル(横スクロール機能)の表示方法を改善してみた / AFFINGER5 カスタマイズ

投稿日:2019/02/06 更新日:

このブログのWordPressテーマは「アフィンガー5」を使っています。色々機能があるうえ、今風のブログのデザインが簡単にできるのは感無量…!

表の横スクロール機能について

幅の広い表を横スクロールで表示させる方法

過去、HTMLサイトを作成中に表のレスポンシブ化でつまづき、もの凄く悩んだ経験があります。が、アフィンガー5では、簡単に横スクロール対応の表ができちゃうんですね。スゴイですよ!

その方法は、下のコードで表(tableタグ)を囲むだけ。

<div class="scroll-box"></div>

ビジュアルエディタの操作手順

スタイルテーブル横スクロール

テキストエディタで、次のようなカタチになっていればOK!

アフィンガー5の初期値の表示と気になる点

標準では、下のような表ができあがります。ブラウザの幅を狭くすれば、横にスクロールすることを確認できますね。

項目1項目2項目3項目4
テキスト テキストテキスト テキストテキスト テキストテキスト テキスト
テキスト テキストテキスト テキストテキスト テキストテキスト テキスト
クマ
超簡単!
ぽん
あれ?でも長い文章を入れると、その列だけやたら横長になっちゃうよ~!

表の内容によっては、スマホで表示すると、セルがビヨーンと横長になってしまい、見づらくなってしまいます。こんな感じ。PCでも横長になっていますが、ブラウザの幅を狭くしてスマホ表示にしてみると、更に横長になります。

項目No.1No.2No.3
食べたいもの「さわやか」のげんこつハンバーグランチ & 炭焼きチーズバーガー「治一郎」のバームクーヘン「魚がし鮨」の炙り3種
静岡の好きな特産品紅ほっぺ桜海老(かき揚げ)うなぎパイ

スマホ表示では、文章が自動改行されないように設定されているため、一箇所でも長い文章があると、その列はものすごく横長になってしまうんですね。(PCやタブレットでは自動改行されます。)

原因

テーブルのセル(table td)に white-space:nowrap が設定されているため

単語程度の文字数で作られている表であれば、改行しない仕様は大変見やすいかと思いますが、一長一短があるように思います。なので、これを解決してみました。

スポンサードリンク

CSSへの追記 & 表のセルの幅指定で改善

修正前と修正後の違いは下記の通り。

Before

項目No.1No.2No.3
食べたいもの「さわやか」のげんこつハンバーグランチ & 炭焼きチーズバーガー「治一郎」のバームクーヘン「魚がし鮨」の炙り3種
静岡の特産品紅ほっぺ桜海老

After

項目No.1No.2No.3
食べたいもの「さわやか」のげんこつハンバーグランチ & 炭焼きチーズバーガー「治一郎」のバームクーヘン「魚がし鮨」の炙り3種
静岡の特産品紅ほっぺ桜海老

さっそく修正をしていきましょう!

step
1
下の内容をコピペして、アフィンガー5のCSSに反映させる

手順

WordPress管理画面外観カスタマイズ「追加CSS」にペーストして保存

セル内の文章を自動改行させる

white-space:nowrapwhite-space:normal; に変更することにより、文章が自動改行されるようになります。

テーブルを固定レイアウトへ

テーブル(table)に table-layout: fixed; を設定することで、セル幅の指定が効くようになります。これがないと、指定しても無視されてしまいます。

step
2
表のセル(td)に幅を "px" で指定する

上記のCSS(table-layout: fixed;)を使う場合、セルの幅を指定しないと横スクロールしません。少し面倒ですが、これにより細かい幅の調整が可能になります。

セルの幅は、表の一番上の行を表す tdタグ全てに設定すればOKです。(← 一番上の行じゃなくても大丈夫だけど、パッと見で一番上が分かりやすいかと。)なお、ブラウザの幅が広い場合は、セルは指定した以上の幅になりますが、狭くなっても指定した幅以下にはなりません。

実際のセルの幅の設定の仕方は下記をご参考に。tdstyle="width: ●●px;" を追記して設定します。

クマ
以上です!

表(テーブル)の挙動は、自分も未だにしっかりと分かっていません。幅を指定しても、めちゃ無視されるし!でも、今回調べてみた事で少しだけ理解できたかも。

-アフィンガー5
-, ,

Copyright© ラボだもんで , 2019 All Rights Reserved.