この記事では、SWELLのエディターで使用できるボックス装飾機能について解説していきます。
クラシックエディター・ブロックエディターのどちらからも、簡単に装飾付きのボックスを使用できますので、ぜひご活用ください。
ブロックエディターでは、段落ブロックとグループブロックでほぼ同じ装飾が使えます!
シンプルな装飾
ここでご紹介する「シンプルな装飾」については、SWELL ver 2.0.5 からブロックエディターでは廃止されました。
代わりに、「色設定」パネルから好きな背景色を設定したり、「ボーダー設定」パネルから4種類のボーダースタイルを選択できるようになっています!
カラーパレット & ボーダー設定は、「SWELL設定」>「エディター設定」からカスタマイズ可能です!
1.グレーの線枠がついたボックス
2.グレーの点線枠がついたボックス
3.メイン色の線枠がついたボックス
4.メイン色の点線枠がついたボックス
5.濃い背景色(メインカラーに依存します)
6.薄い背景色(メインカラーに依存します)
7.薄いグレーの背景色
8. 薄いグレーストライプの背景色
アクセントの効いた装飾
1.ストライプ
2.方眼
3.角に折り目
4.スティッチ
5.かぎ括弧
6.かぎ括弧(大)
7.窪み
8.浮き出し
9.左に縦線
10.付箋
11.吹き出し
12.吹き出し2
アイコン付きボックス(小)
アイコン付きボックス(大)
1.電球アイコン
2.チェックアイコン
3.バツ印アイコン
4.はてなアイコン
5.アラートアイコン
6.メモアイコン
「アイコンボックス(大)」の見た目は、「SWELL設定」>「エディター設定」内の「アイコンボックス」タブから以下のように変更もできます!
装飾ボックスの使い方
では、ここまで紹介してきた装飾ボックスの使い方を説明していきます。
ブロックエディターでの使い方
エディター右側のサイドバーにある「スタイル」タブから、使用したいスタイルをクリックするだけです。
「段落ブロック」と「グループブロック」で使用可能です。
クラシックエディターでの使い方
ツールバーの二段目、一番左にある「スタイル」というセレクトメニューから、挿入したい装飾ボックスの名前を選択して下さい。
その他のエディター機能一覧
- リンクリストブロックの使い方
- 「書式セット」を登録して複数のテキスト装飾を同時に呼び出す方法
- 「テーブルブロック」で使えるSWELLのオリジナル機能
- 【SWELL専用ブロック】ステップブロックの使い方
- 【SWELLブロック】投稿リストブロックの使い方
- アコーディオンブロックの使い方
- SWELLブロックを簡単に呼び出せる「キーワード情報」一覧
- 記事のアイキャッチ画像の代わりにYouTube動画を表示する方法
- 【SWELLブロック】Q&Aを簡単に設置!FAQブロックの使い方
- URLをペーストするだけで自動ブログカード化する機能
- 【SWELLブロック】関連記事ブロックで簡単にブログカード作成!
- 「セクション用見出し」の使用方法
- 【SWELL専用ブロック】フルワイドブロックの使い方
- 広告タグ管理機能・広告タグブロックの使い方
- SWELLのふきだしブロックの使い方
- カラムブロックで使えるSWELLのオリジナル機能
- SWELLの「キャプション付きブロック」の使い方
- SWELLの各ブロックで使用できるレイアウト設定・上下の余白調節
- 登録したコンテンツを自由に呼び出せる「ブログパーツ」機能
- リストで使えるデザイン装飾一覧
- SWELLで使えるテキスト装飾機能(書式)一覧
- SWELL専用ボタンブロックの使い方
- ブロックエディターで使えるSWELLの専用機能まとめ