DigiPress

Highly Flexible WordPress Theme

メニュー

[オリジナル]メディアカバーブロックの機能

[オリジナル]メディアカバーブロックの機能

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

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

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

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


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

表示デモタイトルのみ、全幅無効

DigiPress

表示デモ説明文、ボタンリンク、固定背景、全幅

DigiPress

Highly Flexible WordPress Theme

スマートフォンなどのタッチデバイスでは、ブラウザの仕様上、固定背景が効かないため無効になります。

表示デモぼかし背景、ボタン2つ

デジプレス

自由度と拡張性の高いハイセンスなワードプレステーマ

表示デモ背景ビデオ、インナーメディア入り
Inner Image

インナーメディア

カバー内に任意の画像または動画を表示できます。
インナーメディアは位置(左右)と表示割合を指定できます。

表示デモビデオインナーメディア、テキスト右寄せ

Delicious Time

カバー内に任意の画像または動画を表示できます。
インナーメディアは位置(左右)と表示割合を指定できます。

表示デモスクロールフェードインアニメーション
Inner Image

Delicious Food

カバー内に任意の画像または動画を表示できます。
インナーメディアは位置(左右)と表示割合を指定できます。


ブロックの追加

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

「DigiPressブロック」から「メディアカバー」を追加

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

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

ブロック追加直後の状態
編集中のエディターの状態
実際の表示と同じ状態で編集が可能

右側サイドバー : 背景メディア設定

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

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

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

オーバーレイカラー

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

背景画像/ビデオ

ブロックの最小の高さ

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

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

右側サイドバー : カバータイトル

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

右側サイドバー : カバー説明文

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

右側サイドバー : ボタン #1, #2

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

ボタン設定続き

ボタンオプションはサブスクリプション版にて利用可能です。

右側サイドバー : インナーメディア

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

画像を選択した場合
ビデオを選択した場合

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

右側サイドバー : スクロールアニメーション設定

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

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

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

注意事項・仕様

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

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

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

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

無料版での機能制限

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

  • 「ボタン #1」、「ボタン #2」オプション
  • 「インナーメディア」オプション
  • スクロールアニメーション設定

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

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

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

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE