![](https://coin-blog.net/wp-content/uploads/2022/03/img13-150x150.png)
SWELLの段落ブロックはどうやって使うの?
このような悩みを解決します。
SWELLの段落ブロックは、「ブロックツールバー」と「右サイドバー」を必要に応じて使い分けますが操作はかんたんなのでご安心ください。
記事を書く度、かならず使用するのですぐに慣れます。
まず「段落ブロックの基本」をご覧いただき、次に使い方を解説。
この記事を読むころには、段落ブロックを使いこなせるようになりますよ!
SWELLのレビューはこちら
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
\国内人気No.1/
段落ブロックの基本
それでは、段落ブロックの基本から解説します。
段落と改行の違い
![段落と改行の違い](https://coin-blog.net/wp-content/uploads/2024/03/img7816.png)
![段落と改行の違い](https://coin-blog.net/wp-content/uploads/2024/03/img7816.png)
段落はテキストのかたまりを指します。
一方、改行は段落内で行を変更するアクション(Shift+Enter)のことです。
行間・字間についてはこちら
段落ブロックの追加方法
![段落ブロック挿入画面](https://coin-blog.net/wp-content/uploads/2024/03/img7817.png)
![段落ブロック挿入画面](https://coin-blog.net/wp-content/uploads/2024/03/img7817.png)
段落ブロックの追加方法は、テキストを入力したらEnter
をクリックするだけです。
すると、ブロックを選択するには「/」を入力と表示されます。
エディターの「+」からも段落ブロックの追加が可能。
![段落ブロック挿入画面2](https://coin-blog.net/wp-content/uploads/2024/03/img7818.png)
![段落ブロック挿入画面2](https://coin-blog.net/wp-content/uploads/2024/03/img7818.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
テキストを入力→「Enter」が手っ取り早い
ブロックツールバーと右サイドバー
![SWELLのブロックツールバーと右サイドバー画像](https://coin-blog.net/wp-content/uploads/2024/03/img7819.png)
![SWELLのブロックツールバーと右サイドバー画像](https://coin-blog.net/wp-content/uploads/2024/03/img7819.png)
段落ブロック内のテキストを装飾するには、「ブロックツールバー」と「右サイドバー」を使用します。
両者の使い方は次項から解説しますね。
SWELLのブロックツールバーは機能を拡張済み
SWELLのブロックツールバーは機能が拡張されています。
機能はワンクリックでON/OFFの切り替えが可能です。
エディター右上の「
SWELLマーク」をクリックすると、ブロックツールバーの表示設定が表示されます。![SWELLのブロックツールバー機能拡張画面](https://coin-blog.net/wp-content/uploads/2024/03/img7820.png)
![SWELLのブロックツールバー機能拡張画面](https://coin-blog.net/wp-content/uploads/2024/03/img7820.png)
必要な機能にチェックを入れてご利用ください。
![SWELLのブロックツールバー拡張機能ON](https://coin-blog.net/wp-content/uploads/2024/03/img7821.png)
![SWELLのブロックツールバー拡張機能ON](https://coin-blog.net/wp-content/uploads/2024/03/img7821.png)
SWELL版|段落ブロック(ツールバー)の使い方
![ブロックツールバー](https://coin-blog.net/wp-content/uploads/2024/03/img7821-1.png)
![ブロックツールバー](https://coin-blog.net/wp-content/uploads/2024/03/img7821-1.png)
続いて、ブロックツールバーの使い方を解説します。
段落 | ドラッグ | 矢印で上下移動 |
テキストの配置 | デバイスコントロール | ブロック下の余白量 |
太字 | イタリック | リンク |
下矢印 (さらに表示) | SWELL装飾 | アイコン |
ショートコード | フォントサイズ | テキスト色 |
背景色 | マーカー | オプション |
段落
「段落」では、段落を別のブロックタイプに変更できます。
![SWELLブロックタイプの変更](https://coin-blog.net/wp-content/uploads/2024/03/img7822-1.png)
![SWELLブロックタイプの変更](https://coin-blog.net/wp-content/uploads/2024/03/img7822-1.png)
上記は「私はその人を常に先生と呼んでいた」を、テキストからボタンに変換するところです。
選択リストの右側にはプレビューも表示されます。
ドラッグ
ドラッグアイコンをドラッグ&ドロップすると、ブロックを移動できます。
![SWELLのドラッグ機能](https://coin-blog.net/wp-content/uploads/2024/03/img7823.png)
![SWELLのドラッグ機能](https://coin-blog.net/wp-content/uploads/2024/03/img7823.png)
矢印で上下移動
上下の矢印アイコンをクリックすると、段落ごと移動できます。
![SWELL版ブロックツールバー「上下移動矢印」](https://coin-blog.net/wp-content/uploads/2024/03/img7824.png)
![SWELL版ブロックツールバー「上下移動矢印」](https://coin-blog.net/wp-content/uploads/2024/03/img7824.png)
テキストの配置
テキストの配置アイコンをクリックすると、段落の文章やコンテンツを「左寄せ・中央寄せ・右寄せ」できます。
![SWELL版ブロックツールバー「テキスト配置」](https://coin-blog.net/wp-content/uploads/2024/03/img7825.png)
![SWELL版ブロックツールバー「テキスト配置」](https://coin-blog.net/wp-content/uploads/2024/03/img7825.png)
デバイスコントロール
デバイスコントロールのアイコンをクリックすると、デバイスサイズによって表示ブロックの表示を切り替えられます。
![SWELL版ブロックツールバー「デバイスコントロール」](https://coin-blog.net/wp-content/uploads/2024/03/img7826.png)
![SWELL版ブロックツールバー「デバイスコントロール」](https://coin-blog.net/wp-content/uploads/2024/03/img7826.png)
例:
スマホサイズでのみ表示する![SWELL版ブロックツールバー「デバイスコントロール」例1](https://coin-blog.net/wp-content/uploads/2024/03/img7827.png)
![SWELL版ブロックツールバー「デバイスコントロール」例1](https://coin-blog.net/wp-content/uploads/2024/03/img7827.png)
スマホでは表示させたいけど、PCでは表示させたくないとき(逆も然り)に便利な機能です。
ブロック下の余白量
ブロック下の余白量アイコンは、その名のとおりブロックの余白量(0em〜6em)を調整できます。
![SWELL版ブロックツールバー「ブロック下の余白量」](https://coin-blog.net/wp-content/uploads/2024/03/img7827-1.png)
![SWELL版ブロックツールバー「ブロック下の余白量」](https://coin-blog.net/wp-content/uploads/2024/03/img7827-1.png)
詳細についてはこちら
太字
太字アイコンは、ブロック内の選択したテキストを太字にできます。
![SWELL版ブロックツールバー「太字」](https://coin-blog.net/wp-content/uploads/2024/03/img7828-1.png)
![SWELL版ブロックツールバー「太字」](https://coin-blog.net/wp-content/uploads/2024/03/img7828-1.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
太字にしたい箇所を選択し「B」をクリックするだけ
イタリック
イタリックアイコンは、選択したテキストを斜体にできます。
![SWELL版ブロックツールバー「イタリック」](https://coin-blog.net/wp-content/uploads/2024/03/img7829.png)
![SWELL版ブロックツールバー「イタリック」](https://coin-blog.net/wp-content/uploads/2024/03/img7829.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
斜体にしたい箇所を選択し「/」をクリックすればOK
リンク
リンクアイコンをクリックすると、テキストにリンクを設置できます。
![SWELL版ブロックツールバー「リンク」1](https://coin-blog.net/wp-content/uploads/2024/03/img7830.png)
![SWELL版ブロックツールバー「リンク」1](https://coin-blog.net/wp-content/uploads/2024/03/img7830.png)
リンクを設置するテキストを選択し、リンクアイコンをクリック。
![SWELL版ブロックツールバー「リンク」2](https://coin-blog.net/wp-content/uploads/2024/03/img7831.png)
![SWELL版ブロックツールバー「リンク」2](https://coin-blog.net/wp-content/uploads/2024/03/img7831.png)
リンク先URLを入力後、「Link」をクリック。
![SWELL版ブロックツールバー「リンク」3](https://coin-blog.net/wp-content/uploads/2024/03/img7832.png)
![SWELL版ブロックツールバー「リンク」3](https://coin-blog.net/wp-content/uploads/2024/03/img7832.png)
リンク設置できると、リンクされたテキストが青色になります。
下矢印(さらに表示)
下矢印(さらに表示)をクリックすると、プルダウンメニューが開きます。
![SWELL版ブロックツールバー「下矢印」](https://coin-blog.net/wp-content/uploads/2024/03/img7832-1.png)
![SWELL版ブロックツールバー「下矢印」](https://coin-blog.net/wp-content/uploads/2024/03/img7832-1.png)
- インラインコード
-
インラインコードとは、記事でプログラミング言語を書くときに使用するハイライト機能です。
htmlタグには<code>プログラミングコード</code>のように表示されます。
こんな感じ→
background
- インライン画像
-
インライン画像は文中やテーブルに画像
を挿入できる機能です。詳細や使い方はこちら
- キーボード入力
-
キーボード入力は、キーボードで入力した文字を指すときに使用する機能です。
デフォルトでは変化がないので、CSSコードを追加して使用します。(Enter←こんな感じ)
しかし、環境によってCSSコードが反映されないことも…
文字をキーボード風にするなら、SWELL装飾の「カスタム書式」をおすすめします。
- ハイライト
-
選択したテキストのカラー変更ができます。
- 「上付き」「下付き」
-
「上付き」「下付き」では、文末の右斜め上下にテキストを表示できます。
単位を表現したいときに便利です。
X2 ←こんな感じ
- 打ち消し線
-
打ち消し線は「
公開したいけど公開するべきではない情報」を書くときに使用します。 - 脚注
-
脚注は選択したテキストに、脚注番号がリンク付きで付与される機能。
記事の最下部に脚注ブロックが自動で設置されます。1
出典や内容の補足をするときに便利ですね。
- 言語
-
文字を右から左読みに変更できます。
SWELL装飾
SWELL装飾はSWELL独自の拡張機能です。
![SWELL版ブロックツールバー「SWELL装飾」](https://coin-blog.net/wp-content/uploads/2024/03/img7834.png)
![SWELL版ブロックツールバー「SWELL装飾」](https://coin-blog.net/wp-content/uploads/2024/03/img7834.png)
- 書式クリア
-
ブロック内の装飾をすべてクリアします。
- コード(DIR)
-
選択箇所を
コード(DIR)
で装飾できます。 - コード(FILE)
-
選択箇所を
コード(FILE)
で装飾可能。 - 注釈
-
テキストに注釈を追加できます。※こんな感じ!
使い方はこちら
- インラインボタン
-
インラインボタンは表に設置するボタンです。
使い方はこちら
- カスタム書式
-
あらかじめ登録したCSSコードを、選択したテキストに反映できます。
「SWELL設定」>「エディター設定」>「カスタム書式」
- 書式セット
-
あらかじめ登録したカスタム書式セット(太字・文字色・背景色・マーカー・フォントサイズ)を、選択したテキストに適用できます。
登録手順は「カスタム書式」と同じです。
アイコン
顔アイコンをクリックすると、SWELLで使用できるアイコン一覧が表示されます。
![SWELL版ブロックツールバー「顔アイコン」](https://coin-blog.net/wp-content/uploads/2024/03/img7835-1.png)
![SWELL版ブロックツールバー「顔アイコン」](https://coin-blog.net/wp-content/uploads/2024/03/img7835-1.png)
アイコン一覧
![SWELLアイコン一覧1](https://coin-blog.net/wp-content/uploads/2024/03/img7835.png)
![SWELLアイコン一覧1](https://coin-blog.net/wp-content/uploads/2024/03/img7835.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
アイコンを選択してポチるだけ
「Font Awesome」の設定方法はこちら
ショートコード
ショートコードアイコンをクリックすると、記事内で自由にショートコードを貼れます。
![SWELL版ブロックツールバー「ショートコード」](https://coin-blog.net/wp-content/uploads/2024/03/img7840.png)
![SWELL版ブロックツールバー「ショートコード」](https://coin-blog.net/wp-content/uploads/2024/03/img7840.png)
- 記事内広告
-
あらかじめ登録したアドセンスコードを呼び出せます。
登録はカスタマイザーからどうぞ。
「外観」>「カスタマイズ」>「アドセンス広告設定」
- スマホ・PCだけ改行
-
デバイス別に改行できます。
- アイコン
-
“XXXX”に「Font Awesome」のアイコンコードを入力すれば、SWELLでも表示可能です。
- 評価用スター
-
「」このように、レビューなどで使う星を入力できます。
- HTML挿入
-
テキストにHTMLタグを挿入できます。
フォントサイズ
テキストを選択し、フォントサイズアイコンをクリックするとサイズを変更できます。
![SWELL版ブロックツールバー「フォントサイズ」](https://coin-blog.net/wp-content/uploads/2024/03/img7841.png)
![SWELL版ブロックツールバー「フォントサイズ」](https://coin-blog.net/wp-content/uploads/2024/03/img7841.png)
- XSです。
- Sです。
- Lです。
- XLです。
「PX」をクリックすれば単位も変更可能。
![SWELL版ブロックツールバー「フォントサイズ」単位変更](https://coin-blog.net/wp-content/uploads/2024/03/img7842.png)
![SWELL版ブロックツールバー「フォントサイズ」単位変更](https://coin-blog.net/wp-content/uploads/2024/03/img7842.png)
テキスト色
テキストを選択、テキスト色アイコンをクリックすると文字の色を変更できます。
![SWELL版ブロックツールバー「テキストカラー」](https://coin-blog.net/wp-content/uploads/2024/03/img7843.png)
![SWELL版ブロックツールバー「テキストカラー」](https://coin-blog.net/wp-content/uploads/2024/03/img7843.png)
オプションカラー(後半8色)の変更は「SWELL設定」>「エディター設定」>「カラーセットタブ」からどうぞ。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
ハイライトと同じ機能だけど、矢印をクリックする手間がないのでこちらのほうが楽
背景色
テキストを選択し背景色アイコンをクリックすると、背景色をつけられます。
![SWELL版ブロックツールバー「背景色」](https://coin-blog.net/wp-content/uploads/2024/03/img7844.png)
![SWELL版ブロックツールバー「背景色」](https://coin-blog.net/wp-content/uploads/2024/03/img7844.png)
オプションカラー(後半8色)の変更は「SWELL設定」>「エディター設定」>「カラーセットタブ」から。
マーカー
テキストを選択しマーカーアイコンをクリックすると、マーカー(下線)を引けます。
![SWELL版ブロックツールバー「マーカー」](https://coin-blog.net/wp-content/uploads/2024/03/img7845.png)
![SWELL版ブロックツールバー「マーカー」](https://coin-blog.net/wp-content/uploads/2024/03/img7845.png)
「SWELL設定」>「エディター設定」>「マーカータブ」で色を変更できます。
オプション
オプションをクリックするとメニューが開きます。
![SWELL版ブロックツールバー「オプション」](https://coin-blog.net/wp-content/uploads/2024/04/img7882.png)
![SWELL版ブロックツールバー「オプション」](https://coin-blog.net/wp-content/uploads/2024/04/img7882.png)
- コピー
-
ブロックをコピーできます。
- 複製
-
選択中のブロックと同じブロックを複製できます。
- 前・後に追加
-
選択中のブロックの前後に新規ブロックを追加できます。
SHIFTを押しながら複数のブロックを選択可能。
- スタイルをコピー
-
ブロックをコピーします。
- スタイルを貼り付け
-
コピーしたブロックを貼り付けます。
- グループ化
-
複数の選択したブロックを一つのブロックに変換できます。
- ロック
-
選択したブロックの移動、削除を無効化できます。
- 名前を変更
-
ブロックにカスタム名を付けれます。
- パターンを作成
-
ブロックをパターン登録できます。
登録したパターンはエディターでいつでも呼び出し可能です。
パターンについてはこちら
- 移動
-
選択したブロックを移動できます。
- HTMLとして編集
-
選択したブロックのみHTMLで編集できます。
- 削除
-
選択したブロックを削除できます。
SWELL版|段落ブロック(右サイドバー)の使い方
![SWELLの右サイドバー](https://coin-blog.net/wp-content/uploads/2024/03/img7846.png)
![SWELLの右サイドバー](https://coin-blog.net/wp-content/uploads/2024/03/img7846.png)
SWELL版|段落ブロック(右サイドバー)の使い方です。
設定
![SWELL版右サイドバー「設定」選択画面](https://coin-blog.net/wp-content/uploads/2024/04/img7850.png)
![SWELL版右サイドバー「設定」選択画面](https://coin-blog.net/wp-content/uploads/2024/04/img7850.png)
「設定」ではボーダーやスタイルなど、テキストに加える装飾を選択できます。
テキストを目立たせたいときに効果的です。
ボーダー設定
![SWELL右サイドバー「ボーダー設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7851.png)
![SWELL右サイドバー「ボーダー設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7851.png)
ボーダー設定では、テキストに枠を付けられます。
ボーダセット4種
ボーダーセット: 01
ボーダーセット: 02
ボーダーセット: 03
ボーダーセット: 04
ボーダーセット管理ページ(SWELL設定 > エディター設定 >ボーダーセット)で枠のカスタマイズも可能です。
スタイル
![SWELL右サイドバー「スタイル設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7852.png)
![SWELL右サイドバー「スタイル設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7852.png)
スタイル設定では、テキストに背景の装飾やアイコン付きのボックスを加えられます。
スタイル24種
ストライプ
方眼
角に折り目
スティッチ
かぎ括弧
かぎ括弧(大)
窪み
浮き出し
左に縦線
付箋
吹き出し
吹き出し2
ポイント
チェック
バツ印
はてな
アラート
メモ
デバイス制限
![SWELL右サイドバー「デバイス制限」](https://coin-blog.net/wp-content/uploads/2024/04/img7853.png)
![SWELL右サイドバー「デバイス制限」](https://coin-blog.net/wp-content/uploads/2024/04/img7853.png)
デバイス制限では、テキストを「スマホのみ表示」するか「PCのみ表示」するか選択できます。
前項で紹介した、ブロックツールバーの【デバイスコントロール】と同じです。
ブロック下の余白量
![SWELL右サイドバー「ブロック下の余白量」](https://coin-blog.net/wp-content/uploads/2024/04/img7854.png)
![SWELL右サイドバー「ブロック下の余白量」](https://coin-blog.net/wp-content/uploads/2024/04/img7854.png)
「ブロック下の余白量」ではその名のとおり、ブロック下の余白量を調整できます。
0em〜6emで設定可能。
ブロック下の余白量についてはこちら
高度な設定
![SWELL右サイドバー「高度な設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7855.png)
![SWELL右サイドバー「高度な設定」](https://coin-blog.net/wp-content/uploads/2024/04/img7855.png)
- HTMLアンカー
-
固有のウェブアドレスを作成することで、直接リンクを設置可能。
たとえば、本項目の見出し【SWELL版|段落ブロック(右サイドバー)の使い方】には「right-sidebar」というHTMLアンカーを設置しています。
サイト内のテキストから本項目の見出しにリンクさせたいときは、リンクに「#right-sidebar」と記述すればOK
- 追加CSSクラス
-
選択したブロックをCSSでカスタマイズできます。
スタイル
![SWELL版右サイドバー「スタイル」選択画面](https://coin-blog.net/wp-content/uploads/2024/04/img7856.png)
![SWELL版右サイドバー「スタイル」選択画面](https://coin-blog.net/wp-content/uploads/2024/04/img7856.png)
「スタイル」ではテキストの色や背景色、フォントのサイズなどを設定できます。
色
![SWELL版右サイドバー「スタイル」色設定](https://coin-blog.net/wp-content/uploads/2024/04/img7858.png)
![SWELL版右サイドバー「スタイル」色設定](https://coin-blog.net/wp-content/uploads/2024/04/img7858.png)
色ではテキスト、背景色を設定できます。
項目をクリックするとパレットが表示されるので、お好きな色にしてください。
![SWELL版右サイドバー「スタイル」色設定のカラーパレット](https://coin-blog.net/wp-content/uploads/2024/04/img7859.png)
![SWELL版右サイドバー「スタイル」色設定のカラーパレット](https://coin-blog.net/wp-content/uploads/2024/04/img7859.png)
タイポグラフィ
![SWELL版右サイドバー「スタイル」タイポグラフィ設定](https://coin-blog.net/wp-content/uploads/2024/04/img7860.png)
![SWELL版右サイドバー「スタイル」タイポグラフィ設定](https://coin-blog.net/wp-content/uploads/2024/04/img7860.png)
タイポグラフィではテキストの詳細設定ができます。
![SWELL版右サイドバー「スタイル」タイポグラフィ設定2](https://coin-blog.net/wp-content/uploads/2024/04/img7861.png)
![SWELL版右サイドバー「スタイル」タイポグラフィ設定2](https://coin-blog.net/wp-content/uploads/2024/04/img7861.png)
デフォルトでは【サイズ】しか表示されていませんが、「︙」をクリックすると【ツール】が出現。
![SWELL版右サイドバー「スタイル」タイポグラフィ設定3](https://coin-blog.net/wp-content/uploads/2024/04/img7862.png)
![SWELL版右サイドバー「スタイル」タイポグラフィ設定3](https://coin-blog.net/wp-content/uploads/2024/04/img7862.png)
使用したい機能にチェックを入れると、タイポグラフィに表示されます。
まとめ|SWELL版「段落ブロック」の使い方
今回はSWELL版「段落ブロック」の使い方をまとめました。
「ブロックツールバー」と「右サイドバー」を使用すれば、ブロックの装飾もかんたんです。
読みやすい記事は読者、Googleにも評価されSEOに好影響を与えます。
ウェブサイトが検索上位に表示されれば収益も増加するでしょう。
効果的に使っていきましょう!
\国内人気No.1/
あわせて読みたい
- 脚注について ↩︎