DigiPress

Highly Flexible WordPress Theme

メニュー

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

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

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

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

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

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


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

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

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

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

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

表示例(デフォルトスタイル)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
表示例(ストライプ背景)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
表示例(破線)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
表示例(外枠のみ)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
表示例(白線)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

表示例(黒線)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
表示例(枠線なし 色付き)
テーマ名カラム数対応アーカイブ形式AMPキャッシュ機能pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

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

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

規定の表示例
テーマ名カラム数対応
アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
水平方向に中央揃えにした表示例
テーマ名カラム数対応
アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
垂直方向に中央揃えにした表示例
テーマ名カラム数対応
アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類
水平、垂直方向共に中央揃えにした表示例
テーマ名カラム数対応
アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

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

表示幅を固定しない場合の表示例PCでの場合
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

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

表示幅いっぱいに表示した例PCでの場合
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

列数の多いテーブルを固定幅セルで表示した例PCでの場合
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjaxGoogle Fontsパララックス
ウィジェット
インテリジェント
検索機能
WooCommerce
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

列数の多いテーブルは固定幅セルにしないPCでの場合
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjaxGoogle Fontsパララックス
ウィジェット
インテリジェント
検索機能
WooCommerce
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

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

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

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

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

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

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

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

アイコン表示例
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

オリジナルのカラーでテーブルを表示する

WordPress 標準のテーブルブロックでは、サイドバーの「色設定」にある予め用意されたカラーしか適用できませんが、本プラグインを利用することで、任意のカラー(テキストカラー、背景カラー、ボーダーカラー)で配色したテーブルを表示できます。

変更するには、サイドバーの「色設定(拡張)」オプションを開き、各カラーを指定します。

デフォルトスタイルの表示例
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

ストライプスタイルの表示例
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

ストライプスタイルの場合は、背景カラーが適用される部分のみに反映される文字色を個別に指定できます。


破線スタイルの表示例
テーマ名カラム数対応アーカイブ
形式
AMPキャッシュ
機能
pjax
INFINITII1〜25種類
MAGJAM1〜37種類
※対応予定
GRAPHIE1〜24種類

セルのフォントサイズを一括変更する

テーブル内のセルのフォントサイズは、本プラグインの拡張によってテーマにプリセットのフォントサイズ用のCSS(セレクタ)をセル全体に適用することで、作業上も実際に生成されるソース上も非常に効率的に変更できます。

セルのフォントサイズを一括変更するには、サイドバーの「その他の設定」にある “文字サイズ” のプルダウンフォームから任意のサイズを選択します。

「その他の設定」→「文字サイズ」

その他Tips

ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法

DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。

詳しくは以下をご覧ください。

仕様・注意事項

変換せずに必ず最新仕様にリカバリー(復元)

本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。

この場合は、HTML やクラシックブロックに変換せずに、必ず「ブロックのリカバリーを試行」を選択してアップデート後のバージョン仕様としてリカバリーしてください。

「ブロックのリカバリーを試行」を実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。