エディターで使える簡単デザイン! – 装飾ボックス編

エディターで使える簡単デザイン! - 装飾ボックス編
記事上のウィジェットエリア

この記事では、SWELLのエディターで使用できるデザイン実装機能について解説していきます。

今回はその中でも「装飾ボックス」機能に焦点を当てて解説していきます。

クラシックエディター・ブロックエディターのどちらからも、非常に簡単に装飾付きのボックスを使用できますので、ぜひご活用ください。

目次前広告表示エリア
目次

シンプルな装飾

1.グレーの線枠がついたボックス

2.グレーの点線枠がついたボックス

3.メイン色の線枠がついたボックス

4.メイン色の点線枠がついたボックス

5.濃い背景色(メインカラーに依存します)

6.薄い背景色(メインカラーに依存します)

7.薄いグレーの背景色

8. 薄いグレーストライプの背景色

アクセントの効いた装飾

1.付箋風

2.吹き出し風

3.注釈エリア

4.カギカッコ

5.かぎかっこ(大)

6.窪み効果

7.浮き出し効果

アイコン付きボックス(小)

1.グッドアイコン

2.バッドアイコン

3.インフォアイコン

4.アナウンスアイコン

5.えんぴつアイコン

6.書籍アイコン

アイコン付きボックス(大)

1.電球アイコン

2.チェックアイコン

3.バツ印アイコン

4.はてなアイコン

5.アラートアイコン

6.メモアイコン

「アイコンボックス(大)」の見た目は、カスタマイザーから以下のように変更もできます!

アイコンデザイン:立体
アイコンデザイン:立体

装飾ボックスの使い方

では、ここまで紹介してきた装飾ボックスの使い方を説明していきます。

ブロックエディターでの使い方

エディター右側とツールバーの「スタイル」タブから、使用したい装飾スタイルをクリックするだけです。

通常の「段落ブロック」と、SWELLブロックの「装飾ブロック」で使用可能です。

画面右側に表示される「スタイル」タブ

「スタイル」タブを開いた状態
「スタイル」タブを開いた状態
「スタイル」タブをスクロールした状態
「スタイル」タブをスクロールした状態

ツールバーの「ブロックスタイル」タブ

ブロックスタイル
ブロックスタイル
ブロックスタイル
ブロックスタイル

クラシックエディターでの使い方

ツールバーの二段目、一番左にある「スタイル」というセレクトメニューから、挿入したい装飾ボックスの名前を選択して下さい。

ボックス装飾の使用
「セレクト」メニューをクリック
ボックス装飾の使用
装飾ボックスを選択

装飾ボックスは「シンプルボックス」・「効果付きボックス」・「アイコン付きボックス(小)」・「アイコン付きボックス(大)」の4種類に分かれています。

ツールバーが1段しか表示されていない場合

ツールバーが1段しか表示されていない場合は、1段目の一番右にある「ツールバー切り替えボタン」をクリックすると全ての段が表示されます。

ツールバー切り替えボタン
ツールバー切り替えボタン

その他のエディター機能一覧

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次