PCで表を、スマホでリストを

WordPressで表を作るとき、PCでは整って見えますが、スマホだと細長い表になってかえってわかりづらくなることもありますよね。そのあたりをテーマが補ってくれているものもありますがそうではない場合、CSSを駆使して。。。ということは初心者にはハードルが高い💦なので、補ってくれるプラグインをご紹介します。

ブロックエディタの「テーブル」を使う

ブロックエディタには「テーブル」というブロックがあり、簡単に表を作ることができます。

カラム数→横、行数→縦　それぞれの数字を入力して「表を作成」をクリックするとその通りの表が作成されます。

薄くてわかりづらいですが表が書かれています。中に文字を書くとこのようになりますが、無駄に空白が多くてバランスが悪いときは、横幅を自動調節に変更できます。以下の表は幅を固定しています。
PCで見るとまだ整理ができているように見えますが、スマホで見ている方、みずらくないでしょうか？

このページをPCで見ている方のために、スマホの画面をスクショしました。

今はこのような情報をほぼスマホで見ている人が多いので、スマホに合わせてのレイアウトがとても重要になりますよね。ということで、スマホでもPCでも見やすくすることにポイントを置いてご案内してみます。

プラグインを活用

お勧めのプラグインはこちらです。「TablePress」
標準のブロックエディタでは修正が難しいエクセルに似た処理がWordpress上で行うことができます。

インストール手順

左のメニューから＜プラグイン＞→＜プラグインを追加＞をクリックし、左側の検索バーに「TablePress」と入力します。

＜今すぐインストール＞のボタンをクリック、続いて＜有効化＞をクリックすると左のメニューにこちらが追加されます。

早速使ってみましょう。テーブルの作成

＜新しいテーブルを追加＞をクリックしテーブルを作ります。

テーブルに名前またはテーブルのタイトルを付けます。
行数、列数を記入します。行数、列数にはタイトル行を含めたほうがわかりやすいと思います。
あとで追加もできますのでここはざっくりした数字でOKです
記入後は＜テーブルを追加＞ボタンをクリックします。

テーブル内容に、表の部分を書き込んでいきます。
扱いはエクセルと同様に文字を入力してエンターキーで確定します。

エクセルやGoogleスプレッドシートで作成した表を貼り付けることもできます。

テーブルの操作の部分は、以下簡単にまとめてます。

出来ること

• 行または列単位での複製、挿入、削除
• 行の上下の移動
• 列の左右の移動
• 行または列の表示・非表示
• 行または列（カラム）の追加

テーブルのオプションとして、1行目をヘッダー（見出し行）にすることもできます。

作成・修正の後は上下にある＜プレビュー＞または＜変更を保存＞のボタンをクリックして確認します。

詳細な設定についてはこちらにまとめています。

テーブルのオプション

• 表のヘッダー、表のフッター
  数字を0にすると「しない」になります
• 行の色を交互にする
  チェックを付けると連続する背景色を別々の色に変更してくれますが色の指定はできません。
• カーソルのある行をハイライト表示
  チェックを付けると、マウスカーソルを行に合わせていると、その行の背景色を変更してわかりやすくします。
• テーブル名を表示
  チェックを付けると最初につけたテーブル名を表示します。テーブルの上か下かを選べます
• テーブルの説明を表示
  チェックを付けると最初ににテーブルと一緒に作成した説明を表示できます。テーブル名と同じく掲載場所を上下で選べます
• 追加CSSクラス
  テーブルにCSSでの設定を加えたいときにここにcssの名前を記載します。CSSのコードは＜外観＞＜カスタマイズ＞＜追加CSS＞のところに書きます。

Table Features for Site Visitores　ページ閲覧者の操作

ビジター機能を有効化すると、このサイトを閲覧している人が自分に便利に表をカスタマイズすることができます。以下、機能をまとめておきます。

• 並べ替え
  テーブルの並べ替えを選択できるようになります。
• 検索/フィルター
  検索やフィルターを付けることができます。これは該当するテーブルに限定です。
• ページ送り
  大きな表の場合は、1頁に表示する行数を指定することができるようになります。
• ページ分割の行数を変更
  ページの分割を閲覧者が変更できるようにします。
• 情報
  テーブル情報を表示します。
• 水平スクロール
  列数が多い場合は、チェックを付け、画面を横方向にスクロールできるようにできます。これはちょっと便利な機能ですね。

固定ページにはりつけます

方法１）テーブル機能の中のショートコードをコピーし貼り付けます。

この画面を閉じて、固定ページまたは投稿ページの貼り付けたい場所に＜カスタムHTML＞のブロックを配置して、その中にコピーしたショートコードを貼り付けます。

方法２）ブロックを活用する

テーブルを掲載したい固定ページまたは投稿ページを開き、ブロックを挿入して表示する方法です

ブロックをすべて表示にすると、画面の左側に多くのブロックが表示されますが、その中の「メディア」のグループの中に「Table Press table」というブロックがあります

このブロックをクリックするとこのような画面が表示されます。

ここでショートコードをコピーすると、上記１）の方法と同じ流れになります。このブロックを使うともっと簡単ですよ。画面右側の設定の部分を見てください。

ここでテーブルを選ぶボックスが表示されていますので枠内をクリックすると、作成したテーブルが選択できるようになっています。クリックして選択すると、作成中のブロックの部分にテーブルが表示されます。

表示の確認

ＰＣで見た場合はこちら

スマホで見た場合はこちら

まとめ

テーブルを利用すると情報をまとめて表示するのに使いやすいですね。ただし情報量が増えていくと見やすさを調整する必要性と、編集する情報の操作性も大切な要素だと思います。
簡単に設定できるプラグインですので、是非情報整理にご活用ください