AFFINGER6 ブロックをグループ化してPタグ（段落）のように装飾！余白設定や枠付も超簡単！

こんにちは "osaboo"です。"@osaboo_Bot"

Question

段落や画像の行間や余白が思うように設置できない。
ブロックの間が狭すぎたり広すぎたり…毎回調整しながら記事を書くのが大変！
「なんとかしたい！！」
画像やAFFINGER：メモ等をPタグ（段落）のように装飾したい。

＼＼このような「疑問を解決する」お手伝いをします！／／

AFFINGER6の場合、Gutenberg用プラグイン2の初期設定を自分のブログ用に設定することと…スペーサーブロック・Pタグ（段落）ブロック下の余白で調整しながら書くのが一般的！

この記事ではグループ機能を使った裏技？！的な方法を紹介するよ。^^／
グループ化すればPタグ（段落）と同じ余白切り替えと装飾ができるよ！

osaboo

こんな方におすすめ！

この記事でわかること！

今回の記事では…

「画像」「AFFINGER：メモ」「AFFINGER：マイボックス」等のブロック下の余白をスペーサーブロックを使わずにグループ化して余白の調整をする方法をご紹介します。

グループ扱いなのにグループ化されていないブロックをPタグ（段落）ブロックのように扱う方法をご紹介します。

最新版 WordPress 6.2 の表示画面でお届けします。

それではご覧ください！

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

各ブロック下の余白について

この章では、各ブロック下の余白についてご紹介します。

この記事でターゲットにしているのは『Pタグ（段落）メニューsettingsタブ→ブロック下の余白』のワンタッチ切り替えを使って他のブロックの余白を変更できるようにすることです。

投稿（記事編集）画面：右側のPタグ（段落）メニューsettingsタブ→ブロック下の余白

左画面の赤枠部で『ブロック下の余白』を切り替えることであらかじめ設定した余白幅の変更が簡単にできます。

『-大』『-小』『0』『固』『大』の初期設定は、後述する『Gutenbergプラグイン2の初期設定で基本的な設定をする』の記事でご紹介します。

ちなみに…

参考 Gutenbergでの『-大』『-小』『0』『固』『大』の設定画面はこんな感じです。

※ 上画面の余白が全体に反映されます。

AFFINGER6（Gutenberg用プラグオン2）では、Pタグ（段落）ブロックとグループ化したブロックのみ『ブロック下の余白』が可能です。

Pタグ（段落）ブロック以外で『ブロック下の余白』を変更する場合は、スペーサーブロックを挿入するのが一般的です。

Gutenbergプラグイン2の初期設定や基本的なブロック下の余白の設定を済ませていない場合は次の章から順番にご覧ください。
ブロック下の余白の変更にグループ機能を応用する方法のみを知りたい場合はこちらをクリック！

この章は、以下の記事でご紹介しています。

: AFFINGER6【Gutenberg用ブロックプラグイン2】の設定方法「使いやすい・見やすい・捗る」設定ポイント！
AFFINGER6で「記事をすらすら書きたい！書きやすくしたい！」等、効率を上げるためには不可欠な設定！！Gutenberg用プラグイン2の設定方法をご紹介。投稿画面を「見やすく！・わかりやすく！」設定するポイントを初心者向けにご紹介します。

※ Gutenbergプラグイン2の初期設定を済ませていない場合は是非ご覧ください。

この章は、以下の記事でご紹介しています。

: AFFINGER6 カスタマイズ！段落(Pタグ)下の余白と行間・他要素との間隔調整方法
AFFINGER6の初心者向け！フォントのサイズと行間の設定方法と段落（Pタグ）下の余白の設定方法など記事の文章を綺麗に表現するために必要な設定方法をご紹介。「スペーサーブロックの乱用防止・Gutenberg 設定のグループブロック」についても解説。記事における文章表現をほぼ解決できます。