![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
段落ブロックやグループブロックで使えるSWELLの「ボックス装飾」について教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- SWELLで使える「ボックス装飾」全48パターンを見れる
- 「ボックス装飾」の使い方
- 「ボックス装飾」のスタイル変更方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容
SWELLで使える「ボックス装飾」【全48パターン+α】
ボーダーセット
01
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35.jpg)
02
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-2.jpg)
03
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-4.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-4.jpg)
04
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-3.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_26_35-3.jpg)
アクセントの効いた装飾
ストライプ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03.jpg)
方眼
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-2.jpg)
角に折り目
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-6.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-6.jpg)
スティッチ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-3.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-3.jpg)
かぎ括弧
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-4.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-4.jpg)
かぎ括弧(大)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-5.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-5.jpg)
窪み
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-7.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-7.jpg)
浮き出し
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-8.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-8.jpg)
左に縦線
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-9.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_25_03-9.jpg)
付箋
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06.jpg)
吹き出し
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06-2.jpg)
吹き出し2
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06-3.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-12_26_06-3.jpg)
アイコンボックス(小)
グッド
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29.jpg)
バッド
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-2.jpg)
インフォ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-3.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-3.jpg)
アナウンス
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-4.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-4.jpg)
ペン
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-5.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-5.jpg)
本
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-6.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_30_29-6.jpg)
アイコンボックス(大)
ポイント
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18.jpg)
チェック
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-2.jpg)
バツ印
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-3.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-3.jpg)
はてな
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-4.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-4.jpg)
アラート
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-5.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-5.jpg)
メモ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-6.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-23-07_35_18-6.jpg)
グループブロック専用の装飾
ブラウザ風
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-20_58_24.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-20_58_24.jpg)
デスクトップ風
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-20_58_24-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-20_58_24-2.jpg)
+αの装飾
ボーダーセットは、以下と組み合わせることができます。
- アクセントの効いた装飾
- アイコンボックス(小)
- アイコンボックス(大)
- グループブロック専用の装飾
組み合わせ例:「ボーダーセット:01」と「ストライプ」
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-21_08_50.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2024-01-27-21_08_50.jpg)
SWELLで使える「ボックス装飾」の使い方
ボックス装飾の挿入
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/8dbfaf82f9e8714f2b9e1dae868542a4.jpg)
![](https://hrdyuic.com/wp-content/uploads/8dbfaf82f9e8714f2b9e1dae868542a4.jpg)
段落ブロックにテキストを入力します。
![](https://hrdyuic.com/wp-content/uploads/9d790a017b2abd13f38ee567ac85a007.jpg)
![](https://hrdyuic.com/wp-content/uploads/9d790a017b2abd13f38ee567ac85a007.jpg)
(設定)から、「ブロック」>「 (設定)」>「スタイル」を開きます。
![](https://hrdyuic.com/wp-content/uploads/aa6c415b27301561cf4a3eed54aa0c8d.jpg)
![](https://hrdyuic.com/wp-content/uploads/aa6c415b27301561cf4a3eed54aa0c8d.jpg)
スタイルから、「チェック」を選択するとボックスが挿入されます。
![](https://hrdyuic.com/wp-content/uploads/36fa4749b767754294753b3a158160eb.jpg)
![](https://hrdyuic.com/wp-content/uploads/36fa4749b767754294753b3a158160eb.jpg)
グループ化
2段落ブロック以上を同時に選択して、以下のいずれかをクリックしてグループ化します。
- (グループ化)
- (横並び)
- (縦積み)
![](https://hrdyuic.com/wp-content/uploads/b15b394ff68b43f968ea7c23131cbf9c.jpg)
![](https://hrdyuic.com/wp-content/uploads/b15b394ff68b43f968ea7c23131cbf9c.jpg)
(グループ化)を選択してグループ化しました。
![](https://hrdyuic.com/wp-content/uploads/c9ad181c12013fcb2b0f3de2e55eda09.jpg)
![](https://hrdyuic.com/wp-content/uploads/c9ad181c12013fcb2b0f3de2e55eda09.jpg)
スタイルから、「ブラウザ風」を選択するとボックスが挿入されます。
![](https://hrdyuic.com/wp-content/uploads/703fbf6a84c36833ca5daf1ba03e8de7.jpg)
![](https://hrdyuic.com/wp-content/uploads/703fbf6a84c36833ca5daf1ba03e8de7.jpg)
エディター設定
以下の設定が行えます。
- ボーダーセット
- アイコンボックス(小)
- アイコンボックス(大)
※ 「アクセントの効いた装飾」は設定できません。
管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/ac53fe64378f899d195f5c2449ff58ed.jpg)
![](https://hrdyuic.com/wp-content/uploads/ac53fe64378f899d195f5c2449ff58ed.jpg)
ボーダーセット
エディター設定の「ボーダーセット」タブからスタイルの変更が行えます。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_36_40.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_36_40.jpg)
アイコンボックス
エディター設定の「アイコンボックス」タブからスタイルの変更が行えます。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_37_29.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_37_29.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_37_29-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-wp-admin-admin-php-2024-01-27-20_37_29-2.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
今回は以上です。