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

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

このブロックでは、複数のリンクボタンを横並びまたは縦並びでまとめて表示することができます。
DigiPress テーマに組み込まれているボタン用の装飾 class (.btn 等)をプリセットボタンとして表示するだけでなく、ボーダーや背景、サイズ、ホバー時のトランジション等のあらゆるカスタマイズ項目を組み合わせたオリジナルデザインのボタンを作成できます。

このブロックは旧ボタンブロックの後継となります。
v4.0.0.0 以降、旧ボタンブロックを利用した既存のボタンの表示は維持され編集も可能ですが、新規でのブロックの追加はできません。新たにボタンを表示する場合は、本ブロックを利用してください。

---

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

ブロック追加直後(デフォルト状態)では、DigiPress テーマ組み込みのボタンスタイル用のクラス(.btn)のみが適用され、ボタンの幅は未指定(ボタンテキストの幅に依存)の状態になります。

---

ブロックの追加

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

「ボタン単体」ブロック(子)は、親である「ボタン」ブロック内でのみ追加可能であり、インサーターからは直接追加できません。

ブロック追加直後の初期状態は以下のように表示されます。

ボタンブロック(親)のカスタマイズ

ブロックの詳細なカスタマイズを行うには、ブロックを選択して右側のサイドバーの「ブロック」タブから操作します。

一部のオプションは無料版では利用できません。

一般設定(配置、間隔、幅の指定等)

右側サイドバーの「一般設定」パネルでは、ボタンの並べる方向(横並び、縦並び)、親ブロック(ラッパー)対する内部のボタン(単体)の整列の仕方、ボタンの間隔、全ボタンに対する幅の一括指定などの調整を行うことができます。

ブロック内のボタンの整列方法

親ブロック内にある複数のボタン単体ブロックの整列方法を 左揃え、中央揃え、右揃え、均等配置 から指定します。

ボタンの幅 (一括指定)

ボタンの幅は、親ブロック(ラッパー)の幅を 100% としてボタン1つ分の幅を予め用意されている割合から選ぶか、任意のサイズを指定した幅で全てのボタンに一括で指定することができます。

「未指定」の場合はボタン幅の均一化をせず、ボタンテキストの長さに比例する状態になります。

ボタン単体ブロック(子)のカスタマイズ

ボタン自体のタイポグラフィや細かいデザインについては、子であるボタン単体ブロックを選択して調整します。

ボタンの追加

追加ボタンからボタンブロック(親)内にボタンを追加すると、直前のボタンのスタイル(タイポグラフィ、カラー、ボーダー、角丸、シャドウ、ホバー設定等)を引き継いだ状態で新たなボタンが追加されます。

ボタンの基本スタイル

右側サイドバーの「ボタンの基本スタイル」パネルでは、ボタンの種別(DigiPress テーマにプリセットのボタン装飾スタイル、またはオリジナルスタイル)、タイポグラフィ、文字色、背景色、余白に関する設定を行います。

プリセット(テーマのボタンclass)

ボタンスタイルのタイプが「プリセット」の場合、DigiPress テーマに組み込みのボタン装飾用 class (.btn) を利用を前提とするリンクボタンを表現します。

カスタム(オリジナルデザイン)

ボタンスタイルが「カスタム」の場合、ボタンのテキストカラー、背景カラー、ボーダー、ボックスシャドウ、ホバー時のエフェクトなど、あらゆるデザイン項目について細かくカスタマイズが可能になります。

よく利用するボタンスタイルとしてカスタムしたボタンは、「ブロックプリセット」機能にてプリセット登録しておくことで別の投稿を行う際にも同じボタンを復元して再利用できます。

他のボタンにスタイルを同期

同じ親ボタンブロック内にある他のボタンのデザインを、選択中のボタン単体ブロックのデザインに一括で更新することができます。

既に複数のボタンを配置し、カスタマイズを繰り返した後、他のボタンにも一括でスタイルを更新したい場合に役立ちます。
ボタンテキスト、URL、ボタンアイコンは同期の対象外となるため、上書きされることはありません。

ボタンの枠線・角丸加工

右側サイドバーの「枠線／角丸」パネルでは、ボタンに枠線(単色またはグラデーション)と角丸加工を施す場合に使用します。

ボタンシャドウ

右側サイドバーの「ボタンシャドウ」パネルでは、ボタンにボックシャドウを表現する場合のシャドウに関するパラメータを調整します。

ボタンアイコン

右側サイドバーの「ボタンアイコン」パネルでは、ボタンテキストの隣に DigiPress テーマ組み込みのアイコンを表示する場合にアイコンの検索を行い、表示タイミング(常時またはホバー時)、表示位置(左または右)を設定します。

ボタンの端に矢印を表示

右側サイドバーの「ボタンの矢印」パネルでは、ボタンアイコンとは別に、ボタン内の端に予め用意されている矢印アイコンから選択して表示することができます。

ホバー時のアニメーション

右側サイドバーの「ホバーアニメーション」パネルでは、ボタンのマウスオーバー時にカラーやスケール、シャドウなど、様々なスタイルが変化するアニメーション加工を施すことができます。

ブロック共通オプション

ブロック背景

枠線 / 角丸

ボックスシャドウ

間隔調整

スクロールフェードイン

ブロック境界シェイプ

注意事項・仕様

無料版での機能制限

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