【SWELL】装飾した段落ブロックの中に別のブロックを追加する方法【グループブロックを使用】

WordPressの有料テーマの中でも有名なSWELL。
このブログもSWELLで作成しています。

SWELLの特徴は、ブロックエディタ完全対応で、ブロックエディタが非常に使いやすいテーマであることです。

ブロックエディタを使用してブログを書きたい方にオススメのWordPressテーマです。

ブロックエディタで使えるSWELLの基本的な機能は、以下のリンクで紹介されています。

＼ SWELL専用ブロックの機能を紹介！ ／

SWELLの機能は、直感的にあつかえるものが多いです。
私もとくにマニュアルや使い方を調べることもなく、大体の機能は使用できています。
しかし、なかには直感的にわからにくい機能もあります。

この記事では、SWELLのブロックエディタの使い方で、私が直感的にわかりにくいと感じた機能について紹介します。

その１つが、装飾した段落ブロックの中に、吹き出しブロックなどの別のブロックを追加する方法です。

たとえば、SWELLのWordPressテーマで、以下の装飾をしたブロックを作成できますか？

上記の装飾は、SWELLを使い始めたばかりでは、やり方がわからない方も多いでしょう。
私もしばらく調べて使えるようになったため、直感的にわかる操作とは言いにくいです。

この記事では、上記のように装飾したブロックの中に、吹き出しブロックなどの別のブロックを追加する方法について、解説します。

装飾した段落ブロックの中に吹き出しを挿入する方法

この記事では、以下のように段落ブロックの装飾の中に、吹き出しを挿入する方法について解説します。
この方法を理解すれば、吹き出しブロック以外の別のブロックにも応用できます。

段落ブロックの装飾や吹き出しの挿入の１つずつを再現することは難しくありません。
しかし、２つを組み合わせる方法が直感的にはわかりにくいかと思います。

結論としては、グループブロックを使用しますが、１つずつ解説していきます。

段落ブロックの装飾

まず、以下のような段落ブロックの装飾について解説します。

この装飾は段落ブロック選択後、右側のサイドバーの「スタイル」から「ポイント」を選択します。
同じく、右側のサイドバーの「色」から「背景」を選択して、背景色を設定します。

段落ブロック選択後、右側のサイドバーの「スタイル」から「ポイント」を選択した画像が以下になります。

段落ブロック選択後、右側のサイドバーの「色」から「背景」を選択して、背景色を設定した画像が以下になります。

上記２つの設定をすることで、段落ブロックの装飾ができます。

吹き出しブロックの挿入

次に、吹き出しブロックの挿入方法について解説します。

吹き出しブロックは、記事編集画面左上の「＋」を選択後、左側のサイドバーで表示されるブロックの中から、「SWELLブロック」の「ふきだし」を選択すると挿入できます。

または、空白の段落ブロックで「/ふきだし」を入力すると、吹き出しブロックが表示され、エンターキーを押すと吹き出しブロックが挿入されます。

SWELLの場合、WordPressのダッシュボードの「ふきだし」で、ふきだしセットを登録しておくと、よく使う吹き出しをカンタンに呼び出すことが可能になるのでオススメです。

グループブロックで装飾したブロック内に吹き出しを設置

上記で、段落ブロックの装飾と吹き出しブロックの使用方法について解説しました。

しかし、段落ブロックの中に、吹き出しブロックを挿入することは通常できません。

実際に試すと、装飾した段落ブロックが吹き出しブロックに置き換わる、もしくは装飾した段落ブロックの下に吹き出しブロックが追加されるはずです。

装飾した段落ブロックの中に吹き出しブロックを入れるためには、グループブロックを使用します。

まず、以下の画像左側の「デザイン」の 中から「グループ」を選択して、グループブロックを挿入します。

グループブロックを挿入すると、上記画像の文章内に表示されている「＋」のブロックが挿入されます。
「＋」のブロックを選択すると、段落ブロックや吹き出しブロックを追加できます。

この記事で紹介した装飾をおこないたい場合は、一番外側のグループブロックを選択して、グループブロックを装飾します。

グループブロックが選択しにくい場合、上記の状態であれば、グループブロック内で一番上の吹き出しブロックを選択後、キーボードの↑を入力することで、グループブロックを選択できます。

グループブロックの装飾方法は、上記で紹介した段落ブロックの装飾と同様です。

そのため、グループブロックを組み合わせることで、装飾したブロック内に吹き出しブロックなどの別のブロックを追加することが可能となります。

まとめ

以上、装飾した段落ブロックの中に、吹き出しブロックなどの別のブロックを追加する方法について解説しました。

要点をまとめると、以下のとおりです。