MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

【SWELLブロックエディタ使い方】段落、見出し、リスト、グループ

「SWELLブロックエディタ使い方1」では、記事を書く上で「一番基本」となる以下のブロックをご紹介します。

  • 段落
  • 見出し
  • リスト
  • グループ

こちらはSWELLの独自ブロックではなく「共通ブロック」になりますが、SWELL独自の設定が加えられているのでご紹介します。

エディタの使い方、裏ワザもご紹介!

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

目次

「段落」ブロック |SWELLエディタ

SWELLの「段落」ブロックでは、

文字の入力」だけでなく「枠線の装飾」や「背景色の設定」を一度に行えます。

装飾を設定するために、他のブロックに入れる必要はありません。ただし、複数の段落では使用できません。

ブロック全体の文字色を変えたり、部分的に文字色を変えたりもできます。

段落の装飾例

段落(背景色を変更)

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

段落の装飾

一部の装飾は、カスタム画面で選ぶことができます( SWELL設定 > エディター設定 )。

\参考リンク/

SWELL記事:SWELLで使える「ボックス装飾」一覧

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

「見出し」ブロック|SWELLエディタ

SWELL見出し例

SWELLの見出しは、下記でデザインを変更できます。

外観 > カスタマイズ投稿・固定ページ > コンテンツのデザイン

ブロックエディタ内の設定画面では、見出しのスタイルを変更したり、フォントサイズ高さを変更できます。さらに、背景色文字色も変更可能。

SWELL見出しブロック設定画面

\参考リンク/

SWELL記事:見出しやマーカーなどのデザイン切り替え方法

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

「リスト」ブロック |SWELLエディタ

リストブロックの設定内容は以下のようになります。

ビュレットの形を変更したり、項目間に下線を付けたりできます。

SWELLリストブロック設定画面

ビュレットの色を変更するには、下記のから行えます。

SWELL設定 > エディター設定カラーセット > リスト項目

SWELLーエディタ設定ーカラーセットの画面

「リスト」ブロック|ビュレットサンプル

SWELLの「リスト」ブロックでは、以下のようなリストを作成できます。

デフォルト

  • メイン項目
    • サブ項目
    • サブ項目
  • メイン項目
  • メイン項目

目次

  • メイン項目
    • サブ項目
    • サブ項目
  • メイン項目
  • メイン項目

チェック

  • メイン項目
    • サブ項目
    • サブ項目
  • メイン項目
  • メイン項目

グッド

  • メイン項目
    • サブ項目
    • サブ項目
  • メイン項目
  • メイン項目

バッド

  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

注釈

  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

「○」「×」「チェックマーク」の色は設定で変更できます。

「リスト」ブロック|数字サンプル

数字リストのサンプルは以下の通りです。

デフォルト

  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

目次

  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

丸数字

  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

「リスト」にボーダーを入れる

リストの行間にボーダーを入れることができます。

  • メイン項目
  • メイン項目
  • メイン項目
  1. メイン項目
    1. サブ項目
    2. サブ項目
  2. メイン項目
  3. メイン項目

「リスト」ブロックの裏ワザ

通常の方法で下線を引くと、一番下に下線が入ってしまいます。この下線はない方が、リストがきれいに見えることもあります。

最終行に下線あり

  • リスト1
  • リスト2
  • リスト3

最終行に下線なし

  1. リスト1
  2. リスト
  1. リスト3

最終行の下線をとる裏ワザの方法は、以下の通りです。

  1. ロックを2つに分けます。1番下のリスト項目のみ、別ブロックで作成します。
  2. 上のブロックに [下線を付ける] を選択します。
  3. 上のブロックで [ブロック下の余白量] を 0 に設定します。
  4. 下のブロックで初期値を修正する(数字の場合のみ)。
SWELLリストブロックの裏ワザ解説

\参考リンク/

SWELL記事:リストで使えるデザイン装飾一覧 

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

「グループ」ブロック |SWELLエディタ

SWELLの「グループ」ブロックは、次のことができます。

  1. 複数のブロックをまとめて扱う
  1. ブロックを囲って装飾する
複数のブロックをまとめて扱う

複数のブロックを移動したりするとき、グループで囲っておくとバラバラにならずに便利です。一時的にグループで囲み、その後解除することも可能。

ブロックを囲って装飾する

1つまたは複数のブロックを装飾したいときに、グループで囲んで装飾を選択します。「段落」ブロックと同じ装飾を使用できます。

グループ装飾例

グループで囲む

  • リスト1
  • リスト2

グループで囲む

  • リスト1
  • リスト2

グループで囲む

  • リスト1
  • リスト2

グループで囲む

  • リスト1
  • リスト2

グループを解除するには > グループ解除 を選択します。

SWELLグループ解除画面

\参考リンク/

SWELL記事:SWELLで使える「ボックス装飾」一覧 

\ 詳しく見てみる /

SWELLホームページ:swell-theme.com

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次