DigiPress

Highly Flexible WordPress Theme

[オリジナル]チームメンバーブロックの機能

エディター機能
[オリジナル]チームメンバーブロックの機能

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

DigiPress Ex – Blocks / Blocks Free」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「チームメンバー」ブロックが追加されます。

このブロックは、既存のカスタムブロック(「カラム」、「メディア」、「高度な見出し」、「ボタン」等)を組み合わせて簡易プロフィールをリストとしてまとめたチームメンバー用のコンテンツを表現するボックス型ブロックです。


ブロックコンテンツ表示サンプル

以下に掲載のブロックサンプルは、「カスタムブロックパターン」にて公開しています。カスタムパターン機能を利用してご利用のエディタ内にそのまま復元することができます。

表示例スタンダートスタイル
Member image

田中 春樹

営業マネージャー

趣味: カメラ散歩、焙煎珈琲、週末ハイキング

Member image

中村 浩史

デザイナー

得意分野: データ可視化、プレゼン設計

Member image

小林 陽菜

総務

好きな言葉: 「日日是好日」

Member image

田中 春樹

営業マネージャー
Member image

山本 拓巳

エンジニア
Member image

中村 浩史

デザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
表示例全幅、5カラム、背景色
Member image

田中 春樹

営業マネージャー
Member image

中村 浩史

デザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務
表示例全幅、5カラム、背景スクロールテキスト、境界シェイプ
Member image

田中 春樹

営業マネージャー
Member image

中村 浩史

デザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務
表示例ボックススタイル
Member image

山本 拓巳

エンジニア

得意分野: AI データ設計

Member image

佐藤 由紀

マーケティングスペシャリスト

オフの過ごし方: 家族とキャンプ

Member image

小林 陽菜

総務

好きな言葉: 「日日是好日」

Member image

田中 春樹

営業マネージャー
Member image

中村 浩史

デザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

小林 陽菜

総務
表示例ボックススタイル、ホバーアニメーション
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務
Member image

田中 春樹

営業マネージャー
Member image

山本 拓巳

エンジニア
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務
表示例スライダースタイル
Member image

田中 春樹

営業マネージャー

趣味: カメラ散歩、焙煎珈琲、週末ハイキング

Member image

山本 拓巳

エンジニア

得意分野: データ可視化、プレゼン設計

Member image

中村 浩史

デザイナー

マイブーム: クレーンゲーム

Member image

佐藤 由紀

マーケティングスペシャリスト

好きな言葉: 「日日是好日」

表示例スライダースタイル(2カラム)
Member image

田中 春樹

営業マネージャー

趣味: カメラ散歩、焙煎珈琲、週末ハイキング

Member image

山本 拓巳

エンジニア

得意分野: データ可視化、プレゼン設計

Member image

中村 浩史

デザイナー

マイブーム: クレーンゲーム

Member image

佐藤 由紀

マーケティングスペシャリスト

休日の過ごし方: 家族とキャンプ

Member image

鈴木 葵

サポートスタッフ

好きな冒険家: オーギュストピカール

Member image

小林 陽菜

総務・アシスタント

学生時代の自慢: 陸上インターハイ出場

表示例スライダースタイル(2カラム、ボックス)
Member image

田中 春樹

営業マネージャー
Member image

山本 拓巳

セールスエンジニア
Member image

中村 浩史

プロダクトデザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務・アシスタント
表示例スライダースタイル(3カラム、全幅、背景色)
Member image

田中 春樹

営業マネージャー
Member image

山本 拓巳

プロダクトマネージャー
Member image

中村 浩史

プロダクトデザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務
表示例スライダースタイル(オーバーフロー許可)
Member image

田中 春樹

営業マネージャー
Member image

山本 拓巳

エンジニア
Member image

中村 浩史

デザイナー
Member image

佐藤 由紀

マーケティングスペシャリスト
Member image

鈴木 葵

サポートスタッフ
Member image

小林 陽菜

総務

ブロックの基本構造

このブロックは直下に「カラム」ブロックがあり、カラムブロック内の「カラム単体」ブロックに一人分のプロフィールを表現するための各種ブロックを配置し、必要な人数分のカラム単体をコピーしてブロック全体を構成しています。
プロフィール用の「カラム(単体)」ブロック内には、「メディア」(プロフィール画像)、「高度な見出し」(名前・肩書等)、「テキスト」(メッセージ等)、「ボタン」(SNSリンク用)などのブロックを追加して構成しています。

また、スライダースタイルの場合は、このブロック直下に「スライダー」ブロックがあり、子ブロックである「スライド」ブロック内に1カラム(一人分)の「カラム」ブロックを入れ子にしています。

スライダースタイルの場合

これはブロック追加時に表示されるバリエーションピッカーから選べるテンプレートの基本構造であり、ブロックの入れ替えや削除、任意の位置への他のブロックを挿入するなど、内部のブロック構造やスタイルのカスタマイズは自由に行えます。

ブロックの追加

ブロックを追加するには、ブロックインサーターボタンで一覧を開き、検索フォームに「チーム」、「メンバー」、「team」、「member」、「digipress」などと入力して検索し、追加します。

ブロックインサーターから追加

バリエーションから初期状態を選択

ブロック追加直後は、以下のようにバリエーションピッカーが表示され、予め用意されているブロックの構成のパターンから任意のものを選び、チームメンバーブロックの初期状態を表示してから各ブロックをカスタマイズします。

バリエーションピッカーから初期状態を選択

バリエーションの再選択

適用したバリエーションをキャンセルし、別のバリエーションを選び直す場合は、「チームメンバー」ブロックを選択(アクティブ)にした状態で表示される、ツールバーのバリエーション再選択ボタンをクリックすることで再びバリエーションピッカーを表示できます。

バリエーションピッカーを再表示

カスタムパターンからの挿入

バリエーションピッカー以外のコンテンツカードブロックのテンプレートは、「DigiPress カスタムパターン」に随時追加されます。
ツールバーボタンから「DigiPress カスタムパターン」のポップアップを表示し、様々なブロックを組み合わせたカスタムパターンを探し、すぐにブロックエディタ内に復元することができます。

カスタムパターン

「DigiPress カスタムパターン」を参照することで、より多くのバリエーションから初期状態とするテンプレートを利用できます。

ブロックのカスタマイズ

チームメンバーブロック自体は、複数のブロックを持つだけのボックス型のブロック(ラッパー)であるため、内部に配置された各ブロックは、それぞれ独立したブロックとしてカスタマイズを行ってください。

チームメンバーブロックの直下はカラムブロックがあり、カラム単体が1人分のプロフィールの単位として存在しています。
テンプレートでは、カラム単体ブロックの内部にプロフィール画像用の「メディア」ブロック、名前と肩書用の「高度な見出し」ブロック、SNSリンク用の「ボタン」ブロックがあります。

カラムブロックの詳細は以下を参照してください。

チームメンバーブロックを利用した細かい要件に合わせたカスタマイズや実用レベルでのサンプルブロック(コード)の提供をご希望の場合は、別途有償サポートにて承ります。
具体的な要件やご希望と併せて 有償サポートのお申込み専用フォーム よりお問い合わせください。

ブロック構造の確認方法

本ブロックは複数ブロックで構成されるボックス型ブロックであるため、エディタで編集したいテキストやメディアなどのコンテン(ブロック)の階層や位置関係を表示中のブロックのみで把握するには困難な場合があります。

ブロック構造の詳細を確認し、位置関係を理解した上で編集作業を行いたい場合は、ツールバーの「ドキュメント概観」ボタンからリストビューパネルを開いて対象ブロックの特定および選択をしてください。

リストビューから特定 (画像はセクションヘッダーブロックの場合)

ブロック共通オプション

ブロック背景

ブロック共通オプションの一つである「ブロック背景」オプションを有効にすると、該当ブロックコンテンツの背景に背景色や、背景画像または動画を表示させることができます。
このオプションは、一部のコアブロックおよび「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)では、以下のカスタマイズオプションの利用が制限されています。

  • 「デフォルト」、「4カラム」、「5カラム」以外のバリエーションの適用
  • 本ブロック内にある各ブロックごとの無料版での機能制限
ブロックの復旧(リカバリー)を実行

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

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

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