Flexible Spacer Blockは、拡張されたスペーサーブロックを追加できるWordPressプラグインです。
デスクトップ・タブレット・スマホのそれぞれで余白の値を変更でき、ネガティブマージンも指定可能です。
Flexible Spacer Blockのインストール
インストール手順は以下の通りです。
ファイルをFTPでアップロードしてインストール
- Flexible Spacer Blockをダウンロードします。
- ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
- 管理画面の[プラグイン]ページで、Flexible Spacer Blockを有効化します。
WordPress管理画面でインストール
- [プラグイン] – [新規追加]にアクセスします。
- 「Flexible Spacer Block」で検索します。
- [今すぐインストール]をクリックして、Flexible Spacer Blockをインストールします。
- [有効化]をクリックしてプラグインを有効化します。
Flexible Spacer Blockの設定
WordPress管理画面の[設定] – [Flexible Spacer Block]にて、ブレイクポイントなどを変更できます。
| レスポンシブ設定 | ブレイクポイント |
| デフォルト値 | 余白のデフォルト値 |
| ブロックエディターの設定 | 未選択時のブロックの可視化 |
ブレイクポイントのデフォルト値は、「デスクトップ：1025px以上、タブレット：1024px～600px、スマホ：599px以下」です。
通常は、ブロックが未選択の時は空白が表示されるだけでブロックがあるのかわかりにくいですが、「ブロックエディターの設定」をオンにすると常にブロックの内容が表示されるようになります。
ブロック未選択時でも以下のように表示されますので、「ブロックエディターの設定」はオンにしておいた方がわかりやすいと思います。
Flexible Spacer Blockの使い方
投稿編集画面で「フレキシブルスペーサーブロック」を挿入します。デザインブロック内に追加されています。
右ペインで各デバイスの余白を設定します。「マイナススペース」にチェックを入れると、マイナスの値が指定されてネガティブマージンが実装できます。
「All heights」に値を入れると全デバイス共通の値が入ります。
あとがき
余白はデバイスによって変えたいことが多いと思いますので、そういう時はFlexible Spacer Blockの導入をぜひご検討ください。
通常のスペーサーブロックでは実現できないことが可能になる、まさにかゆいところに手が届くプラグインですね。