DigiPress

Highly Flexible WordPress Theme

[共通オプション]ブロック背景

エディター機能
[共通オプション]ブロック背景

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

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のブロックエディターの対象となる標準ブロック、およびオリジナルブロックで共通の拡張オプションとして「ブロック背景」オプションが追加されます。

この拡張機能により、対象のブロックコンテンツの表示エリアに背景カラーや背景画像、背景動画を表示することができるようになります。

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


機能の概要

機能・操作イメージ

本拡張機能の対象となるブロックでは、右側サイドバーに「ブロック背景」という共通メニューが追加されます。

ブロックによっては、「ブロック背景」ではなく別の項目名になっています。
また、ブロックによっては背景メディアの一部または全てが指定できないブロックがあります。
無料版では、ブロックによってこのオプションの利用が制限されています。

ブロックに背景カラーを表示する

ブロックの背景カラーは単色またはグラデーションのいずれかを選択でき、カラーパレットまたはカラーピッカーから自由に色を指定できます。
また、背景色の不透明度やストライプ加工を施すこともできます。

操作イメージ

背景メディア(画像または動画)を表示する

“背景メディア” からメディアライブラリを開き、既存の画像または動画ファイルを選択するか、新たにアップロードして背景として表示したいメディアをセットできます。
背景カラーと同時に指定し、カラーオーバーレイの状態で表示も可能です。

背景メディアをカラーオーバーレイで表示する場合は、背景カラーの不透明度を下げてください。

操作イメージ

背景アニメーションエフェクトを表示する

背景色、背景画像に加えて、複数の浮遊するオーブや波打つラインなどのアニメーション要素を重ねて背景エフェクトとして表示することができます。

以下の背景アニメーションエフェクトは多重で表示できますが、多用すると負荷がかかりパフォーマンスに影響を及ぼすことに注意してください。

ドロップオブジェクト

“ドロップオブジェクト” を有効にすると、ブロックコンテンツの背景に最大3つまでのアクセント要素としての図形 (ドロップオブジェクト) を表示できます。
ドロップオブジェクトは、カラーの指定(グラデーション対応)、画像表示、角丸の度合い、サイズ、表示位置、ぼかし具合などをそれぞれ細かく調整でき、3地点に順番に移動するアニメーション要素として表示することも可能です。

表示例高度な見出しブロックの背景

The Power of Learning

学びは、未来への鍵となる。
操作パネルブロック背景 → ドロップオブジェクト
オブジェクトごとの設定
表示位置、カラー設定
画像、サイズ、角丸、回転、ぼかし
編集操作イメージ
実際の表示イメージ
流体背景

多数のオーブ要素がブラーに変化をつけながら浮遊する流体エフェクトを表示します。

無料版ではフロントエンドで表示されません。

表示例高度な見出しブロックの背景

The Power of Learning

学びは、未来への鍵となる。
操作パネルブロック背景 → 流体背景
「流体背景」をチェック
設定パネルを表示
設定パネル(続き) 
編集操作イメージ
流れるライトバー

上下左右から指定した方向に流れるカラーバーを、拡大比率、速度の違いによって視差効果を伴いながら表示します。

無料版ではフロントエンドで表示されません。

表示例高度な見出しブロックの背景

The Power of Learning

学びは、未来への鍵となる。
操作パネルブロック背景 → 流れるライトバー
「流れるライトバー」をチェック
設定パネルを表示
設定パネル(続き)
編集操作イメージ
波打ちラインモーション

複数の曲線が等間隔で流れ動き、波打つように見えるアニメーションを表示します。

無料版ではフロントエンドで表示されません。

表示例高度な見出しブロックの背景

The Power of Learning

学びは、未来への鍵となる。
操作パネルブロック背景 → 波打ちラインモーション
「波打ちラインモーション」をチェック
設定パネルを表示
設定パネル(続き)
編集操作イメージ

仕様・制限事項

対象ブロック

このブロック共通オプションは以下のブロックにて利用可能です。

対象ブロックサブスクリプション版無料版
高度な見出し
チャート
カラム(オリジナル版)
カウントダウン
データテーブル
ロゴスライダー
マップ
メディア
カウントアップ
オーバーラップ画像
円グラフ
円形プログレスバー
チャート
投稿
プロセスステップ 非搭載
プログレスバー
ショーケース 非搭載
吹き出し
テキスト
フェードインテキスト
縁取りテキスト
テキストアニメーション
タイピングアニメーション
タイムライン

上記に掲載されていない標準ブロックおよびオリジナルブロックについては対象外です。

無料版での制限

  • 無料版で対象ブロックとなっている場合でも、「ドロップオブジェクト」は全ブロックにて利用ができません。
  • 「流体背景」、「流れるライトバー」、「波打ちラインモーション」のエフェクトはエディタでの試し表示のみとなります。