![[オリジナル]タブブロックの機能](https://digipress.info/_wp/wp-content/uploads/2026/04/tabs-block.png)
ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。
「DigiPress Ex – Blocks / Blocks Free」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「タブ」ブロックが追加されます。
このブロックでは、商品やサービスなど、特定の対象に対する内容をタブで並列的にカテゴライズし、表示を切り替えることができるタブ型コンテンツを表示します。
ブロックコンテンツ表示サンプル
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
- 動画・音声
- 検知・通知
- その他詳細
最大解像度 5MP（2880×1620）、ライブビューは 15〜30fps から選択可能。
暗所では スターライト相当のカラー夜間撮影 と 赤外線モード を切り替えられ、イベント検知時にフルカラーへ自動切替するスマートナイトモードに対応。
映像は H.264 で圧縮。12倍デジタルズーム、WDR により逆光下でも輪郭を残しやすい画質を想定。
音声は 双方向通話（ノイズ抑制）と、最大約93dB相当のサイレン（※製品により異なります）をアプリから操作可能。
これはダミーの商品情報です。
ブロックの構成
タブブロック（親）は、内部にタブアイテムブロック（子）を持ち、タブの数だけタブアイテムブロックが存在します。
タブアイテムブロックは内部に任意のブロックを追加することができ、タブごとに分けて表示したいコンテンツを自由に作成します。
ブロックの追加
「タブ」ブロックは、ブロック追加ボタンで一覧を開き、検索フォームに「タブ」や「tab」、「digipress」などと入力して検索し、追加します。
ブロック追加直後の初期状態は以下のように表示されます。
タブブロック(親)のカスタマイズ
ブロックの詳細なカスタマイズを行うには、ブロックを選択して右側のサイドバーの「ブロック」タブから操作します。
一部のオプションは無料版では利用できません。
プリセットスタイルの選択
右側サイドバーの「プリセット」パネルでは、デフォルトの状態を含め、予めカスタマイズされたタブデザインのパターンからベースとするものを選んでから、要件に合わせてさらに細かいカスタマイズを行うことができます。
無料版ではデフォルト以外のプリセットは適用できません。
タブラベルのベースデザイン
右側サイドバーの「タブラベル」パネルでは、アクティブ・非アクティブに共通するタブラベル（タイトル）のタイポグラフィや配置、その他ベースのデザインについて調整します。
アクティブ時のタブラベルのデザイン
右側サイドバーの「タブラベル (アクティブ時)」パネルでは、タブがアクティブの場合のタブラベルのデザインについて調整します。
非アクティブ時のタブラベルのデザイン
右側サイドバーの「タブラベル (非アクティブ時)」パネルでは、タブが非アクティブの場合のタブラベルのデザインについて調整します。
タブコンテンツエリアのデザイン
右側サイドバーの「タブコンテンツエリア」パネルでは、実際のタブコンテンツ（タブアイテムブロック）が表示されるエリアのデザインについて調整します。
タブアイテムブロック(子)のカスタマイズ
タブアイテムのタイトルテキスト、テキストに隣接するアイコン表示に関する設定を行うには、タブアイテムブロックを選択後に表示される右側サイドバーの操作パネルから操作します。
タブラベルのテキスト・アイコン
右側サイドバーの「タブアイテム」メニューでは、選択中のタブアイテムに対応するタブラベルのテキストの指定、テキストの左または上に表示されるアイコンとそのカラーについてカスタマイズが行なえます。
タブラベルは、ブロックエディタ上でテキストを直接入力・変更することも可能です。
タブアイテムの削除
不要となったタブアイテムを削除する場合は、以下のいずれかの方法で操作します。
タブラベルをホバーしたときに表示される赤色のタブ削除ボタンから、タブラベルと共に対象のタブアイテムブロック(子)をタブブロック(親)から削除します。
タブアイテムブロックを選択すると右側に表示される削除ボタンから、対象のタブアイテムブロックを削除します。
タブアイテムの入れ替え
タブの順番を入れ替える場合は、タブアイテムブロックを選択すると右側に表示されるブロック移動ボタンから操作します。
ブロック共通オプション
ブロック背景
ブロック共通オプションの一つである「ブロック背景」オプションを有効にすると、該当ブロックコンテンツの背景に背景色や、背景画像または動画を表示させることができます。
このオプションは、一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して共通のカスタマイズ機能として組み込まれます。
ブロックによっては、「ブロック背景」ではなく別の項目名になっています。
また、ブロックによっては背景メディアの一部または全てが指定できないブロックがあります。
無料版では、ブロックによってこのオプションの利用が制限されています。
「ブロック背景」オプションの概要については以下の動画をご覧ください。
「ブロック背景」共通オプションのさらに詳細については以下をご覧ください。
枠線 / 角丸
一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「枠線 / 角丸」オプションを利用すると、対象ブロックコンテンツに指定した太さと色のボーダーを表示したり、一括または頂点(左上、右上、右下、左下)ごとで指定したサイズの角丸を表現できます。
無料版では、ブロックによって利用できない場合があります。
「枠線 / 角丸」オプションの概要については以下の動画をご覧ください。
「枠線／角丸」オプションの詳細については以下をご覧ください。
ボックスシャドウ
一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「ボックスシャドウ」オプションを有効にすると、対象ブロックコンテンツに指定したサイズ、方向、色で影を表示できます。
無料版では、ブロックによって利用できない場合があります。
「ボックスシャドウ」オプションの概要については以下の動画をご覧ください。
「ボックスシャドウ」オプションの詳細については以下をご覧ください。
間隔調整
一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「間隔調整」オプションでは、このブロックの前後(上下)、左右に設けるマージン(外余白)、およびパディング(内余白)のサイズを調整できます。
「間隔調整」オプションの詳細については以下をご覧ください。
スクロールフェードイン
ブロック共通オプションの一つである「スクロールフェードイン」オプションを使用すると、スクロールしてブロックが可視エリアに到達した時点で、指定したアニメーション方向や時間に従ってフェードインで表示させることができます。
本機能はサブスクリプション版で利用できます。
設定したアニメーションは、「プレビュー」ボタンをクリックしてエディター上で事前にチェックが行なえます。
「スクロールフェードイン」オプションの概要は、以下の動画をご覧ください。
「スクロールフェードイン」オプションの詳細については以下をご覧ください。
ブロック境界シェイプ
一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「ブロック境界シェイプ」オプションを有効にすると、対象ブロックコンテンツの上下の端の形状を用意されている形の中から選んで表現することができます。
無料版では、ブロックによって一部のシェイプのみ利用可能、または本オプション自体が利用できないブロックがあります。
「ブロック境界シェイプ」オプションの概要は、以下の動画をご覧ください。
「ブロック境界シェイプ」オプションの詳細については以下をご覧ください。
その他のTips
ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法
DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。
詳しくは以下をご覧ください。
注意事項・仕様
無料版での機能制限
無料版(DigiPress Ex – Blocks Free)では、以下のカスタマイズオプションの利用が制限されています。
- デフォルト以外のプリセットの選択
- タブラベルエリアのグラデーション背景
- タブラベルの左寄せ以外の配置指定
- タブラベル間の余白指定
- タブラベル下部のアニメーションラインスライダーの表示
- タブラベルの角丸調整(左上: 3px, 右上: 3px 固定)
- タブラベルのアイコン位置の指定(左側固定)
- タブラベルのアイコンサイズの指定(18px 固定)
- 非アクティブ時のタブラベルのテキストカラー(#888 固定)
- 非アクティブ時のタブラベルエリアの背景カラー (#f0f0f0 固定)
- 非アクティブ時のタブラベルエリアのボーダーカラー
- タブコンテンツエリア(タブアイテムブロック)の背景カラー
- タブコンテンツエリア(タブアイテムブロック)のボーダー
- タブコンテンツエリア(タブアイテムブロック)の角丸調整
- 「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示された場合
-
ブロックの復旧(リカバリー)を実行 本プラグインのアップデート後、エディター上のブロックで「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示された場合、旧バージョンから仕様が変更された可能性があります。
この場合は、HTML やクラシックブロックに変換せずに、必ず「復旧を試みる」を実行してアップデート後のバージョン仕様として更新してください。
リカバリーを実行しない限り、既存のブロックは従来のバージョンの状態のままで表示されます。