年金を当てにしない生き方

ワードプレスLuxeritasテーマで見やすく綺麗なテーブル(表)の作り方 

    
ワードプレス表を綺麗に表示させる方法
\ この記事を共有 /
ワードプレスLuxeritasテーマで見やすく綺麗なテーブル(表)の作り...

ワードプレス記事作成においては、訪れたユーザーにわかりやすく、視認性の良い記事を書く必要があります。

文字を羅列せずにわかりやすい箇条書きであったり、一目見てわかりやすい図やグラフや、多量なデータなどをまとめるのに便利な機能としてテーブル(表)があります。

このテーブル5列くらいなら良いのですが、10列位横に長くなるとPC画面ならまだしもスマホ表示だと見づらくなってしまいます。

画面が狭いスマホだと表が崩れる!!
キレイに表示させる方法は?

このようなお悩みのLuxeritasテーマ使用者のために解決策を解説いたします。

又、Luxeritasテーマではこのテーブルを更に効果的に見せることも出来ますので最後まで是非ご覧ください。

【結論】Luxeritas固有機能スクロールブロックで解決

AFC 東地区勝率得点失点ホームアウェイ連勝連敗
ビルズ13300.8135013757-1-06-2-06W
ドルフィンズ10600.6254043385-3-05-3-01L
ペイトリオッツ7900.4383263535-3-02-6-01W
ジェッツ21400.1252434571-7-01-7-01L
2020年 NFL レギュラーシーズン成績表 AFC東地区

このテーブル(表)はLuxeritas固有機能のスクロールブロックを使ってテーブルを作ったものです。

私が大好きなNFLの2020年シーズン東地区成績表を一例にしてみます。

プレビュー画面左下クリック

PC画面からスマホ表示

現在この記事をPCでご覧なっている方は、画面左下にボタンがありますので、クリックするとタブレット画面かスマホ画面に切り替える事ができますのでスマホ画面にしてください。

スマホ画面にする

スマホ表示で問題無

PC表示はもちろんなんの問題なく表示されており、肝心なスマホ表示でも手アイコンが出ますので横ドラッグすると表示崩れなくキレイに表示されています。

スクロールブロックを使わなかった場合の表示

AFC 東地区勝率得点失点ホームアウェイ連勝連敗
ビルズ13300.8135013757-1-06-2-06W
ドルフィンズ10600.6254043385-3-05-3-01L
ペイトリオッツ7900.4383263535-3-02-6-01W
ジェッツ21400.1252434571-7-01-7-01L

PC表示だと問題ないように見えますが、スマホ画面に切り替えると下のようになります。

普通のテーブルを使った場合

スマホだと表示崩れ

とても見にくい! 

読みづらい!! 

なんか嫌だ!!!

文字が横だったり縦になったり、長いチーム名の場合、知らない人は縦読みしてしまうかもしれません。

こんな表を見せられたらユーザーさんは即離脱の可能性もあります。

このような訳でテーブル作成時にはスクロールブロックをきちんと設定し使用するべきです。

スクロールブロック設定方法

ブロック追加→Luxeritas Block内スクロールブロッククリック

ルクセリタス固有機能スクロールブロック
ブロック追加→テーブル

スクロールブロック内にテーブル設置

結局テーブルを使うのですが、その周りをスクロールブロックが効いているイメージです。

行・列入力

テーブル内容指定
テーブル設定

ヘッダーラベル

表のどこかクリックするとテーブル設定画面になります。

ヘッダーセクションONにするとヘッダーラベルが出ます。

次はテーブル画面の少し外をクリックするとスクロールブロック設定画面になります。

スクロールブロック設定

スクロールブロック設定にするにはドラッグスクロールにチェック

このスクロールブロック設定では必ずドラッグスクロールにチェックを入れてください。

これで横に長いデータであってもキレイなテーブルを設定できます。

テーブル背面に画像を入れることも出来る

AFC 東地区勝率得点失点ホームアウェイ連勝連敗
ビルズ13300.8135013757-1-06-2-06W
ドルフィンズ10600.6254043385-3-05-3-01L
ペイトリオッツ7900.4383263535-3-02-6-01W
ジェッツ21400.1252434571-7-01-7-01L
2020年 NFL レギュラーシーズン成績表 AFC東地区
スクロールブロック→画像選択

テーブルに画像埋め込むことが出来る

自分の好きな画像を背景に設定することが出来ますが、淡い色合いでないと文字が見えなくなってしまいますので注意してください。

Fixed Backgroundボタンで画像を固定することが出来ます。

そして繰り返しやサイズも設定することが出来ます。

ワードプレスLuxeritasテーマで見やすく綺麗なテーブル(表)の作り方のまとめ

Luxeritasテーマユーザーはテーブル(表)を作る場合は必ずスクロールブロックを使用するべきです。

昔はスクロールブロックなんてすばらしい機能はありませんでしたので、横長のテーブルを作るときは苦労しました。

それが無料テーマLuxeritasの標準機能として使えるのですから助かりますよね。

アクセシビリティの面からもきちんと当たり前に綺麗に表示させることが重要です。

Cocoonでは設定で「横幅の広いテーブルは横スクロール指定する」ことで全てのテーブルを横スクロールさせる事が出来ますがテーブルに画像埋め込みは出来ないようです。

ではこの記事を参考にして見やすく綺麗なテーブルを作っていただければと思います。

最後までご覧いただきありがとうございます。

この記事ではLuxeritas Theme 3.12.0 WordPress 5.6 の条件となっています。

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Copyright©S字フック的ココロ,2022All Rights Reserved.