DigiPress

Highly Flexible WordPress Theme

メニュー

[WP標準]テーブルブロックの拡張機能

[WP標準]テーブルブロックの拡張機能

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のエディターにおける標準ブロックである「テーブル」ブロックに対して様々な拡張機能を利用できるようになります。

実際に拡張される機能の概要とその操作方法については、まずは以下のムービーをご覧ください。

その他のエディター機能については以下をご覧ください。


テーブルブロックを追加するには、ブロック追加ボタンをクリックし【フォーマット】セクションの「テーブル」を選択します。

「フォーマット」→「テーブル」から追加

スタイル(デザイン)の変更

「テーブル」ブロックのスタイル(デザイン)を変更します。
エディター画面 右側の設定サイドバーの「スタイル」から用途に応じて様々なデザインを適用できます。

本プラグインを利用することで、「テーブル」ブロックのスタイルに以下のデザインが利用可能になります。

表示例(デフォルトスタイル)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
表示例(ストライプ背景)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
表示例(破線)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
表示例(外枠のみ)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
表示例(白線)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

白線は、テーブル自体に色をつけている場合や、サイト(ページ)の背景がブラック系などホワイト以外のカラーで表示している場合に、テーブルの枠線をホワイトで表現する際に利用します。

表示例(黒線)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
表示例(枠線なし 色付き)
テーマ名 カラム数 対応アーカイブ形式 AMP キャッシュ機能 pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

セル内の一括配置変更方法

すべてのテーブルセル内のコンテンツの水平方向および垂直方向の配置を一括で変更できます。
変更するには、右側の設定サイドバーにある「その他の設定」から指定します。

水平方向に中央に寄せるには、“全てのセルを横方向に中央揃え” をオンにします。
垂直方向に中央に寄せるには、“全てのセルを縦方向に中央揃え” をオンにします。

規定の表示例
テーマ名 カラム数 対応
アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
水平方向に中央揃えにした表示例
テーマ名 カラム数 対応
アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
垂直方向に中央揃えにした表示例
テーマ名 カラム数 対応
アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類
水平、垂直方向共に中央揃えにした表示例
テーマ名 カラム数 対応
アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

テーブルの表示幅と横スクロールについて

規定の状態では、テーブルセルの幅はセル内のコンテンツの幅に依存し、テーブル全体の幅は各列の幅の合計となります。
このため、列数が少ないテーブルや、セル内のコンテンツ幅が狭いテーブルの場合は、以下のように表示エリアの幅いっぱいにぴったり付けて表示はされません

表示幅を固定しない場合の表示例PCでの場合
テーマ名 カラム数 対応アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

このようなテーブルの場合に、表示エリアの幅いっぱいに(100%の幅で)表示させるには、右側の設定サイドバーの【テーブル設定】→「固定幅のテーブルセル」をオンにします。

このオプションでは、表示エリアの幅を100%として各セルの幅を均等にします。

表示幅いっぱいに表示した例PCでの場合
テーマ名 カラム数 対応アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

逆に、列数が多いテーブルやセル内のコンテンツの幅が広いテーブルの場合、テーブルセルを「固定幅」(均等幅)にすることで、テーブル全体の幅よりも狭い表示エリアの幅を100%としてテーブルを表示するため、セルごとの幅が狭くなり見辛くなります。

列数の多いテーブルを固定幅セルで表示した例PCでの場合
テーマ名 カラム数 対応アーカイブ
形式
AMP キャッシュ
機能
pjax Google Fonts パララックス
ウィジェット
インテリジェント
検索機能
WooCommerce
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

このようなテーブルでは、逆に規定のままセルを固定幅にしない(テーブル幅を固定しない)ようにしておくことで、表示エリアの幅を超える部分については、自動的に横スクロールすることでテーブル全体を表示できるようになります。

列数の多いテーブルは固定幅セルにしないPCでの場合
テーマ名 カラム数 対応アーカイブ
形式
AMP キャッシュ
機能
pjax Google Fonts パララックス
ウィジェット
インテリジェント
検索機能
WooCommerce
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類

セル内にアイコンを表示する

「テーブル」ブロックによるテーブル内のセルは、標準の「段落」ブロックと同等の扱いになり、通常、テキストの入力以外にアイコンを挿入することはできません。

本プラグインでは、セル内の選択されたテキストの先頭にアイコン(4種類)を表示することができるようになります。
この機能を利用して、セル内にアイコンのみを表示することができます。

セルのツールバーから「テーブル用アイコン」を挿入

セル内にアイコンのみを表示するには以下の要領で行います。

セル内へのアイコン表示手順
  1. セル内にカーソルを合わせ、半角スペースを入力します。
  2. 入力した半角スペースを選択状態にします。
  3. アイコンをカラーで表示したい場合は、先にツールバーからフォントカラーを選択しておきます。
  4. セルのツールバーのドロップダウンから「テーブル用」から始まる目的のアイコンを選択します。

現行でサポートされるアイコンは、クロス、チェック、ライン、三角の4種類のみです。

アイコン表示例
テーマ名 カラム数 対応アーカイブ
形式
AMP キャッシュ
機能
pjax
INFINITII 1〜2 5種類
MAGJAM 1〜3 7種類
※対応予定
GRAPHIE 1〜2 4種類