DigiPress

Highly Flexible WordPress Theme

メニュー

[オリジナル]シェイプセパレータブロックの機能

[オリジナル]シェイプセパレータブロックの機能

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

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

このブロックでは、ブロック間を指定した形状のオブジェクトで区切るデザイン要素を表示します。

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


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

表示例シェイプセパレータを上下に連続配置
構造
エディター側の状態
表示例メディアカバーブロックと隣接
Inner Image
これはメディアカバーブロックです
メディアカバーブロックの上にシェイプセパレータブロックがあります。
構造
エディター側の状態

表示例メディアカバーの上下に配置、シャドウあり
Inner Image
これはメディアカバーブロックです
メディアカバーブロックの上下にシェイプセパレータブロックがあります。

表示例背景カラーと組み合わせた場合
Inner Image
これはメディアカバーブロックです
メディアカバーブロックの上下にシェイプセパレータブロックがあります。
Inner Image
これはメディアカバーブロックです
メディアカバーブロックの上にシェイプセパレータブロックがあります。
構造
エディター側の状態

ブロックの追加

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

「シェイプセパレータ」を追加

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

ブロック追加直後の状態

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

編集中のエディターの状態

ブロック専用オプション

シェイプ設定

右側の設定サイドバーにある「シェイプ設定」では、セパレータの形状の指定、水平および垂直反転、シェイプカラー、影の設定が行えます。

シェイプの高さと隣接する塗りつぶしエリアの高さは、ここで数値を指定するか、エディター上のシェイプセパレータブロックをドラッグすることで直接変更することができます。

無料版では、一部のシェイプのみ指定できます。
シャドウエフェクトはサブスクリプション版にて利用できます。

背景設定

右側の設定サイドバーにある「背景設定」では、シェイプで切り抜かれた部分の背景カラーを指定できます。

背景設定は、サブスクリプション版にて利用できます。

ブロック共通オプション

間隔調整

一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「間隔調整」オプションでは、このブロックの前後(上下)、左右に設けるマージン(外余白)、およびパディング(内余白)のサイズを調整できます。

スクロールフェードイン

ブロック共通オプションの一つである「スクロールフェードイン」オプションを使用すると、スクロールしてブロックが可視エリアに到達した時点で、指定したアニメーション方向や時間に従ってフェードインで表示させることができます。

設定したアニメーションは、「プレビュー」ボタンをクリックしてエディター上で事前にチェックが行なえます。

無料版ではブロックによって本オプションは無効の場合があります。

「スクロールフェードイン」オプションの概要は、以下の動画をご覧ください。

概要

その他Tips

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

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

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

注意事項・仕様

無料版での機能制限

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

  • シェイプ設定
    • 指定可能なシェイプの制限
    • シェイプのシャドウ表示
  • 背景設定
ブロックのリカバリーを試行(復元)を実行

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

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

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

WordPress 5.9 にアップデート後、「DigiPress Ex – Blocks/Blocks Free」を利用すると段落や見出しブロックなどを追加したり、ブロックの選択時にアクティブな状態になるまでしばらくフリーズする現象が確認されています。

段落や見出しブロックは、多くの「スタイル」(装飾)が用意されていますが、WordPress 5.9 でのブロックエディターでは、ブロック追加や選択時に全スタイルのプレビュー処理(レンダリング)がその都度行われ、恐らくこの処理の待ち時間が長いことが原因と思われます。

この場合は、将来のブロックエディター(ベータ版)を試せる「Gutenberg」プラグインに置き換えると、「スタイル」はテキストの項目のみとなり、スタイルごとにカーソルを合わせた際に、はじめて対象スタイルのプレビュー(レンダリング)を行う仕様のため、WordPress 5.9 のブロックエディターに比べてはるかにレスポンスが早くストレスなく編集作業ができます。

WordPress のエディターがこのスタイルプレビューの仕様にアップデートされるまでは、「Gutenberg」プラグインに置き換えてご利用ください。