ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks Free」または「DigiPress Ex – Blocks」が必要です。
なお、「DigiPress Ex – Blocks Free」の場合は一部機能制限があります。

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

このブロックは、WordPress標準のカバーブロックの機能を大幅に拡張したようなブロックで、背景メディア(画像またはビデオ)上にタイトル、説明文、ボタン(2つまで)、インナーメディア(挿絵画像またはビデオ)を配置したカバーコンテンツを表示します。

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

---

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

---

ブロックの追加

オリジナルブロックは、ブロック追加ボタンから「DigiPress ブロック」グループを開いて追加します。

ブロックを追加すると、エディター上で以下の初期状態のコンテンツが表示されます。

編集中のエディターでは、以下のように実際のブロックコンテンツの表示と同じ状態でカスタマイズができます。

ブロックオプション(右側サイドバー)

全般設定

右側の設定サイドバーにある「全般設定」では、このブロックコンテンツに関する共通の全体的な設定を行います。

ブロックの高さの最小値

このカバーコンテンツの高さの最小値をピクセル値(px)、ビューポートの幅に対する割合(vw)、ビューポートの高さに対する割合(vh)から単位を選んで指定できます。

フルスクリーンサイズにするには、単位を「VH」にして値を「100」にします。

コンテナ幅の最大値

このカバーコンテンツ内に表示されるインナーテキストおよび並列する画像を含めたメインコンテンツ部分の最大表示幅を、ピクセル値(px)、ビューポートの幅に対する割合(vw)、ビューポートの高さに対する割合(vh)から単位を選んで指定できます。

既定値(1440px)に戻すには、値をクリアしてください。

インナーメディア(画像)をフィットさせる場合はこのオプションは無効になります。

テキストの縦書き

このカバーコンテンツに表示されるタイトル、キャプション、説明文を縦書きにすることができます。

背景メディア設定

右側の設定サイドバーにある「背景メディア設定」では、このブロックコンテンツの背景として表示するメディア(画像、ビデオ)や背景カラーなどに関する設定を行います。

オーバーレイカラー／背景メディア

オーバーレイカラーは、カバーコンテンツ全体の背景カラーをカスタマイズでき、2色のグラデーションにすることもできます。

背景メディアは、画像の場合は固定表示にすることができます。
また、CSSフィルターによるメディアのぼかし表示にも対応しています。

ブロック境界シェイプ

右側の設定サイドバーにある「ブロック境界シェイプ」では、ブロックコンテンツの上下の境界の形状を任意の形に変形することができます。

無料版では一部のシェイプのみ指定できます。

カバータイトル

右側の設定サイドバーにある「カバータイトル」は、カバーコンテンツ上にタイトルを表示する場合にトグルをオンにしてタイトル部分のフォントカラーやサイズ、配置などについてカスタマイズします。

透かしキャプション

右側の設定サイドバーにある「透かしキャプション」は、カバーコンテンツ上のタイトルと説明文とは別に、透かし要素としてのキャプションテキストをバックに表示する場合に有効にします。

カバー説明文

右側の設定サイドバーにある「カバー説明文」は、カバーコンテンツ上のタイトル下に表示される一定量の文章を表示する場合にトグルをオンにして、文章全体のフォントカラーやサイズ、配置などについてカスタマイズします。

ボタン ＃1, #2

右側の設定サイドバーにある「ボタン」は、カバーコンテンツ上の説明文下に表示されるボタンリンクを表示する場合にトグルをオンにして、ボタンのリンク先、配色、サイズ、余白、配置、アイコンなどについてカスタマイズします。
ボタンリンクは横並びで2つまで表示できます。

無料版では「ボタン#1」のみ利用できます。

インナーメディア

右側の設定サイドバーにある「インナーメディア」は、カバーコンテンツ上のテキストコンテンツの隣に挿絵画像またはビデオを表示する場合にトグルをオンにして、メディアを選択し、表示位置や表示幅の割合を変更できます。

メディアをフィットさせる

「メディアをフィットさせる」にチェックをすると、インナーメディアの対象が画像の場合、ブロックコンテンツとインナーメディアの上下の余白をなくしてぴったり表示させることができます。

インナーメディアオプションはサブスクリプション版にて利用可能です。

スクロールアニメーション設定

右側の設定サイドバーにある「スクロールアニメーション設定」では、カバーコンテンツ上のテキスト、ボタン、インナーメディアをそれぞれスクロールして可視エリアに入った際にアニメーションを伴うフェードインで表示させる場合に調整します。

スクロールアニメーションは、「プレビュー」ボタンで現在のアニメーションの設定条件で実際にモーションを確認することができます。

スクロールアニメーション設定はサブスクリプション版にて利用可能です。

---

注意事項・仕様

無料版での機能制限

無料版(DigiPress Ex – Blocks Free)では、以下のカスタマイズオプションの利用が制限されています。