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

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

このブロックでは、1スライド内に任意のブロックで作られたコンテンツをまとめ、そのような複数のスライドをあらゆるエフェクトでスライダー形式で表示します。

画像や動画専用のスライダーではなく、スライドコンテンツはすべてのブロックから自由に組み合わせて生成できます。

---

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

上記のエフェクトはズームのみのシンプルな一例です。
スライドのアクティブ時、非アクティブ時のエフェクトは、拡大/縮小、回転、オーバーレイカラー、フィルター加工など複数の要素を組み合わせることができます。

---

ブロックの構成

スライダーブロック（親）は、内部にスライドブロック（子）を複数持つことができ、このスライドブロックがスライドの実態となります。

さらに、スライドブロックは内部に任意のブロックを自由に追加することができ、ブロックで表現可能なコンテンツを「スライド」としてまとめ、スライダーを構成することができます。

ブロックの追加

「スライダー」ブロックは、ブロック追加ボタンで一覧を開き、検索フォームに「スライダー」や「slider」、「digipress」などと入力して検索し、追加します。

ブロックを追加すると、バリエーションピッカーが表示されます。
まずはバリエーションピッカーに表示されているテンプレートの中から目的に最も近いスタイルのスライダーを選択します。

スライダーコントロール

スライドの追加・削除、エディタ上でのスライダーの一時停止、再生等の操作を制御します。

スライドの追加

スライドを追加する方法は2パターンあります。

エディタ上のスライダーブロックから追加するには、ブロックを選択して表示される右上の「スライドを追加」ボタンから追加できます。

スライダーブロックのサイドバーの「スライドコントロール」パネルにある “スライド数” オプションからスライドを末尾に追加します。
また、ブロックの複製モードをオンにすると、最後のスライドをコピーした状態で新たにスライドが追加されます。

直前のスライドのスタイルや設定をベースとして画像やテキストなど一部の修正のみを行って効率的にスライドコンテンツの作成をしたい場合に有効です。

スライドの削除

スライドを削除するには、以下の方法で操作できます。

スライダーブロック内の個々のスライドブロックを選択し、スライドの右上に表示される「スライド削除」ボタンによって、対象のスライドをスライダーから削除することができます。

スライドブロックのサイドバーの「スライドアクション」パネルにある「スライドを削除」ボタンで対象スライドを削除します。

スライドの入れ替え

以下の方法で選択中のスライドを前後のスライドと入れ替えることができます。

スライダーブロック内の個々のスライドブロックを選択し、スライドの右上に表示されるブロック移動ボタンによって、対象のスライドを隣接する前後のスライドと入れ替えます。

スライドブロックのサイドバーの「スライドアクション」パネルにある「スライドを移動」オプションのボタンで対象スライドを前後のスライドと入れ替えます。

スライダーの一時停止・再開

エディタ上で再生されているスライダーを一時停止するには、スライダーブロックの選択中に表示される右上の「再生・停止」ボタンか、サイドバーの「スライドコントロール」パネルの「再生・停止」ボタンから制御します。

自動再生を有効にしている場合など、個々のスライド編集作業に支障があるときに一時的にスライダーの動作を停止させることでエディタ側での作業をしやすくします。

また、「アクティブスライド」項目では、エディタ側で編集したいスライドを前面、もしくは可視エリアにすぐに表示を切り替えたい場合に、その対象スライドを選択します。

スライドコンテンツの編集

スライドブロックには、任意のブロックを追加してスライド用のコンテンツを作成します。
スライダー上で直接ブロックを追加して、各ブロックをカスタマイズすることも可能ですが、1ビューに複数のスライドを表示するスタイルの場合などは、スライドサイズが小さくなるため編集がしづらい場合があります。

そのような場合は、スライドごとで内部ブロックのみをポップアップで前面に表示し、編集作業をしやすくできます。
スライドコンテンツ編集モードを表示するには、以下の方法で行います。

スライドコンテンツ編集モード

スライドコンテンツ編集モードは以下のように表示されます。

一般設定

サイドバーの「一般設定」では、フロントエンド側のスライダー操作（マウスホイール・キーボードによるスライド切り替え可否、ホバー時のアニメーション停止）と、スライダーの上下に設けるパティング（余白）の調整が行えます。

スライダーのスタイル

スライダーのエフェクトやエフェクトごとの細かい動作のカスタマイズは、サイドバーの「スライダーのスタイル」パネルから操作します。

スライダーエフェクト

スライダーのエフェクトは、以下の6種類から選択します。

• スライド
• フェード
• カバーフロー
• フリップ
• キューブ
• カード

無料版では「スライド」と「フェード」の2種類のみが利用可能です。

エフェクトごとのカスタマイズ

エフェクトごとに調整可能なパラメータが分かれており、選択中のエフェクトに合わせて「カスタマイズ」ボタンで表示される設定内容が異なります。

例えば、次のようなスタイルのカバーフローを表示する場合の基本の設定値は以下のようにします。

• 任意のスライド幅を指定: オフ
• 1ビューあたりのスライド数: 2
• アクティブスライドの位置: 中央
• 1スライド = 1ビュー: オフ

標準的なカバーフローは、アクティブスライドの位置は「中央」に指定してください。

エフェクトが「スライド」または「カバーフロー」の場合は、一度に表示するスライド数を変更できます。
スライド数を調整する方法は、スライド数（数値）を直接指定する方法と、指定したスライド幅に応じてスライダーが自動的に調整する2通りがあります。

一度に表示するスライド数に対してスライダー全体のスライド数は十分な数を持つようにしてください。
全体のスライド数が少ない場合、スライダーが機能しなくなります。

トランジション速度

スライドの切り替わり開始から終了までのアニメーション時間をミリ秒単位で設定します。
デフォルトは 800 ミリ秒です。

自動再生と表示間隔

自動再生をオンにした場合の自動再生にてスライドが切り替わる間隔をミリ秒単位で設定します。

無停止の無限ループスライダーを表示する場合

停止せずにスライドが動き続けるスライダーを表示する場合は、0秒を指定してください。
また、0秒にした場合はユーザーの操作 (スワイプ、クリックなど) によるスライダーの停止が無効になります。

アクティブスライドのスタイル

「アクティブスタイル」パネルのトグルをオンにすると、スライドがアクティブ状態になったときに指定した時間をかけて設定した状態（拡大・縮小、回転）へアニメーションが実行されるようになります。

非アクティブスライドのスタイル

「非アクティブスタイル」パネルのトグルをオンにすると、スライドがアクティブ状態から非アクティブ状態になったときに、「トランジション速度」に指定した時間をかけてスライドに施すエフェクト（カラーオーバーレイ、不透明度、フィルター加工、拡大・縮小）のアニメーションを表示します。

パララックス効果を伴う切り替わり

「パララックス効果」パネルのトグルをオンにすると、スライドが非アクティブとアクティブの相互の状態に切り替わるとき、指定した時間をかけて視差効果を伴いながらアニメーションが実行されます。

前後スライドへのナビゲーションボタン

「前後ナビゲーション」パネルでは、現在アクティブなスライドの前後に隣接するスライドへの切り替えボタンの表示に関する設定をします。
ナビゲーションボタンの表示有無、オフセット、表示位置、サイズ、カラーなど、表示しているスライダーのデザインに合わせて細かく調整ができます。

ページネーションボタン

「ページネーション」パネルでは、スライダー下部に1ビューあたりのスライドを区切りとしてスライダー表示を切り替えるページネーションボタンに関する設定をします。
スライド数（ ≒ 1ビューあたりのスライド数）が多くページネーションが長くなりすぎる場合は、「動的ページネーション」のスタイルを有効にして直近のページネーションのみを常に表示することもできます。

レスポンシブ時のカラム調整

「レスポンシブ動作」パネルでは、1ビューに複数のスライド（カラムスタイル）の表示が可能な「スライド」と「カバーフロー」のエフェクトの場合、最大表示幅を3段階（タブレット（幅広）、タブレット、モバイル）に分けてカラム数を自動的に調整することができます。

ブロック共通オプション

ブロック背景

枠線 / 角丸

ボックスシャドウ

間隔調整

スクロールフェードイン

ブロック境界シェイプ

注意事項・仕様

無料版での機能制限

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