[オリジナル]ボタンブロックの機能

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

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

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

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

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

デフォルト状態カスタマイズなし(プリセットスタイル)

DOWNLOAD

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

プリセットボタン例25%幅、アイコンあり

カスタマイズ例ボーダー

カスタマイズ例ボーダー＋共通オプション(背景)利用

カスタマイズ例背景カラー指定

カスタマイズ例幅33%、スクロールアニメーション

詳しく

お申込み

お問い合わせ

カスタマイズ例アイコンのみ

ブロックの追加

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

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

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

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

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

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

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

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

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

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

ボタンの幅 (一括指定)

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

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

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

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

ボタンの追加

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

ボタンの基本スタイル

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

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

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

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

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

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

[共通オプション] ブロックプリセット機能

WordPressのブロックエディターを拡張する DigiPress Ex – Blocks プラグインにて追加される「ブロックプリセット」機能を紹介しています。

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

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

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

ボタンの枠線・角丸加工

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

ボタンシャドウ

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

ボタンアイコン

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

ボタンテキストに隣接するアイコンの指定

ボタンの端に矢印を表示

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

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

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

ホバーアニメーションなし

ホバーアニメーションあり

ブロック共通オプション

ブロック背景

ブロック共通オプションの一つである「ブロック背景」オプションを有効にすると、該当ブロックコンテンツの背景に背景色や、背景画像または動画を表示させることができます。
このオプションは、一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して共通のカスタマイズ機能として組み込まれます。

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

「ブロック背景」オプションの概要については以下の動画をご覧ください。

概要

「ブロック背景」共通オプションのさらに詳細については以下をご覧ください。

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

WordPressのブロックエディターを拡張する DigiPress Ex – Blocks プラグインにて拡張される「ブロック背景」共通オプションの機能を紹介しています。

枠線 / 角丸

一部のコアブロックおよび「DigiPress Ex – Blocks」のオリジナルブロックに対して組み込まれるブロック共通オプションの一つである「枠線 / 角丸」オプションを利用すると、対象ブロックコンテンツに指定した太さと色のボーダーを表示したり、一括または頂点(左上、右上、右下、左下)ごとで指定したサイズの角丸を表現できます。