
SWELLはブロックエディターに完全対応って聞くけど、そもそもブロックエディターってなに?どう使うの?
クラシックエディターしか使ったことが無いので、扱えるかが不安です。
そんな疑問を解決します。
2020年9月から、SWELLのブロックエディターを使っている僕が解説しますね。
この記事を書いている人


- ブロックエディターの基礎知識
- ブロックエディターの使い方【記事の書き方】
- SWELLでブログ記事を書く際によく使うブロック
SWELLの公式サイトを見ると、「ブロックエディター」に完全対応という文字。
クラシックエディタしか使ったことが無いと、
何それ?どうやって使うの?
ちゃんと扱えるのかな??
って思いますよね?
SWELLに乗り換える直前の僕も、そう思いました。
結論、SWELLのブロックエディターは簡単に扱えます。
- マウス操作だけで使える
- HTML/CSSの操作が不要
- 画面を見ながら装飾が施せる
ので、ストレスがありません。
ただ、操作の仕方を知らないまま使うと、頭が混乱します。ググりながら使うことになるので、最初は苦労ことに。
そうならないためにも、SWELLのブロックエディターの使い方・実際のブログ記事の書き方を動画+図解で解説します。



ブロックエディターについて知りたい人・SWELLが気になっている人は、最後までご覧ください。
ちなみに、SWELLの機能について知りたい方は、SWELLの機能(専用ブロック)まとめ【使い方やできることを動画で紹介】をどうぞ。
それでは、本文を見ていきましょう。
>>関連記事:【SWELLレビュー】なぜスウェルは評判が良い? デメリットは無いのか?
ブロックエディターとは?
ブロックエディターとは、2018年12月から採用されているCMSです。
CMSとは?
ざっくり言うと、文章や画像などを保存・管理する仕組みのことです。
見出しや画像、文章を「ブロック」として構成していきます。
例


クラシックエディターのサポートは2022年末まで
WordPressは現在、ブロックエディターを中心に開発が進められています。
そのため、クラシックエディターについては下記のようにアナウンス。
Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。
引用:https://ja.wordpress.org/plugins/classic-editor/



「いつサポートが終わるのかが分からない」ですね。
突然サポートが終了する可能性もあります。
なので、早めにブロックエディタへ乗り換えることが必要です。
ブロックエディターの画面構成
ブロックエディターの画面構成についてお伝えしますね。



ブロックエディターのエリアは、下記の3つに分けられます。


一つずつ説明しますね。
「トップツールバー」エリア
トップツールバーエリアは
- 下書き保存
- プレビュー
- 記事の公開
などをする部分です。



エディターの基本項目が並ぶところですね。
具体例


- 管理画面(ダッシュボード)へ移動
- ブロックの追加
- 「編集・選択」モード切替
- ひとつ前の状態に戻す
- ひとつ先の状態に進める
- コンテンツの構造や文字数などの確認
- コンテンツのブロックナビゲーション
- 保存した投稿内容を確認
- 下書きを保存
- プレビューを表示
- 記事を公開
- 右ツールバーの表示/非表示
- SWELL設定
- ツールバー、エディターモードなどの設定
「右ツールバー」エリア
右ツールバーエリアは
- パーマリンクの設定
- カテゴリー・タグの設定
- アイキャッチ画像の設定
などをする部分です。



投稿の設定をする部分ですね。
具体例


- 公開状態の確認・設定
- パーマリンク(URL)の設定
- カテゴリーの選択
- タグの設定
- アイキャッチ画像の設定
- 要約文の設定
- コメントの許可など
- SWELL専用の設定(目次表示・非表示など)
「メインコンテンツ」エリア
メインコンテンツエリアは
- 記事タイトルの作成
- 記事本文の作成
などをする部分です。


- タイトルを入力する場所
- 記事本文を作成する場所



このエリアで記事を作ります。
ブロックのメニューバー
文章を入力すると、入力したブロックの上に「メニューバー」が表示されます。
このメニューバーの解説をしますね。


- ブロックタイプまたはスタイルを変更
- ブロックの移動
- テキストの配置を変更
- ブロック下の余白量
- デバイスコントロール(PCのみで表示など)
- 太字
- イタリック
- リンク
- 続きを読む
- SWELL装飾
- ショートコード
- オプション
一つずつ見ていきましょう。
①:ブロックタイプまたはスタイルを変更


名前のとおり、ブロックタイプやスタイルを変更できます。
具体的には
- 入力した文章⇒見出し
- 入力した文章⇒吹き出し
- 入力した文章⇒リスト
にすることが可能です。
具体例






動画で確認する



ボタン一つで済むので、記事作成の負担が減りますよ。
②:ブロックの移動


ブロックを上下に動かすことができます。







文章や装飾の順番を変えたい時、入力し直さなくて済みますよ。
③:テキストの配置を変更


入力した文章の位置を変えることができます。
テキスト左寄せ
テキスト中央寄せ
テキスト右寄せ



メニューバーが文章の上にあるので、エディター上までマウスを動かさなくて済みますよ。
④:デバイスコントロール


スマホのみで表示するのか、PCのみで表示するかのが決められます。



普通に記事を作る分には使わないです。
⑤:ブロック下の余白量


改行幅を変えることができます。


動画で確認する



これを使えば、「読みやすい」と言われるようになりますよ。
⑥:太字


入力した文章を太文字にできます。
- あああああ
- いいいいい



なので、エディター上まで移動する必要がありません。
⑦:イタリック


打ち込んだ文字を「斜め」にすることが可能です。
- あああああ
- いいいいい



メニューバーを使えば、すぐ「斜め」にできますよ。
⑧:リンク


文章にリンクを貼りたい時に使います。
使い方








動画で確認



1回の操作で別タブ設定ができるのって、ラクですよね。
⑨:続きを読む


文字色を変更したり、打消し線を使用する際に使います。


⑩:SWELL装飾


SWELLの文字装飾機能が使えます。
- メインカラー
- メインカラー(薄)
- グレー
- 白
- 黒
- 赤
- 青
- 緑
- オレンジ
- 赤(薄)
- 青(薄)
- 緑(薄)
- オレンジ(薄)
⑪:ショートコード


SWELL独自のショートコードの使用が可能です。(これはめちゃくちゃラク)



よく使うものだけをご紹介しますね。
- 評価スター・・・
- アイコン用ショートコード・・・
その他のショートコードは、SWELLで使えるショートコード一覧をご覧ください。
⑫:オプション


主にブロック関連の操作となります。



詳細は後述しているので、そちらを参照してください。
【SWELL編】ブロックエディターの使い方【ブログ記事の書き方】
では、ブロックエディターを使ってのブログ記事の書き方をご紹介しますね。


順番に見ていきましょう。
ステップ①:記事タイトルの入力


まずは、記事タイトルを入力しましょう。
「狙っているSEOキーワード」だけを書きます。
というのも、ガッツリ決めると
- 記事タイトルを意識するあまりチグハグなことを書く
- 記事タイトルと記事本文のズレが生じる
からです。
そうならないためにも、狙っているSEOキーワードだけを書きましょう。



それにより、執筆の方向性も定まりますよ。
ステップ②:メインエリアで本文作成


次は、メインエリアで本文を作成していきましょう。
見出しブロックや段落ブロックを使って、文章を書きます。
動画で確認する
ステップ③:記事本文に文字装飾を施す


次は、記事本文に文字装飾を施しましょう。
- 右ツールバーの文字装飾
- ブロックのメニューバー
を使って、リストやボックスなどを使用します。
動画で確認する
ステップ④:書いたブログ記事の投稿設定


次は、書いたブログ記事の投稿設定をしましょう。
具体的には
- パーマリンクの設定
- カテゴリーの設定
- タグの設定
- アイキャッチ画像の設定
をします。
投稿設定のやり方
投稿設定のやり方です。






①:「アイキャッチ画像を設定」をクリック


②:画像を選択




動画で確認
ステップ⑤:一晩寝かせてから文章推敲をする
次は、一晩寝かせてから文章推敲をしましょう。
理由は単純で
- 書いた直後では気づけないことに気付ける
- 「論理が破綻している」「説明が抽象的過ぎて分からない」ところを発見できる
- 読者目線で自分の記事を見れる
- 言い回しや表現、リズムなどの良し悪しが分かる
- 読みやすいかどうかが分かる
からです。



文章推敲のやり方については、下記をご覧ください。
文章推敲のやり方
ステップ⑥:プレビューを確認して記事を公開する
最後は、プレビューを確認して記事を公開しましょう。



「最終チェックをして投稿する」って感じですね。
やり方






メタディスクリプションの書き方は、【例文あり】メタディスクリプションとは?クリックされる効果的な書き方も解説をご覧ください。


赤背景色の記事タイトルの文字数を見ながら、「本記事タイトル」を作ります。
記事タイトルの決め方については、下記をご覧ください。
関連記事


以上が記事作成の流れになります。
SWELLの基本的な使い方
画面構成や記事作成の流れは、理解できましたか?



次は、SWELLの基本的な使い方をお伝えします。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
- ブロックの再利用
一つずつ説明しますね。
その①:ブロックの追加
文字装飾や画像などを使いたい時に使用します。
「ブロックの追加」の使い方






ざっくりまとめると
- 「+」をクリック
- 目的のブロックを選ぶ
- 投稿画面に表示される
ですね。
動画で確認する
その②:ブロックの移動
文章や画像を移動させたい時に使います。
「ブロックの移動」の使い方






動画で確認する
その③:ブロックの削除
ブロックを一括で消したい時に使います。
「ブロックの削除」の使い方






削除したブロックを復元する方法
削除したブロックを復元したい場合、「元に戻る」をクリックしてください。




動画で確認する
その④:ブロックのコピー
文字装飾などをコピペしたい時に使います。
「ブロックのコピー」の使い方






動画で確認する
その⑤:ブロックのグループ化
ブロックをひとまとめにして、ボックス装飾を使う時に使用します。
「ブロックのグループ化」の使い方









これができることで、まとめて装飾が施せます。一つずつ装飾を作る必要がありません。
なので、記事作成の負担がめちゃくちゃ減って、時短になりますよ。(僕の場合は記事作成時間が2h短縮しました)
動画で確認する
その⑥:ブロックの再利用
文章のテンプレートを作りたい時に使います。
「ブロックの再利用」の使い方






「ブロックの再利用」の呼び出し方




動画で確認する
SWELLでブログ記事を書く際によく使うブロック
ここでは、ブログ記事を書く際によく使うブロックをご紹介します。
- 段落ブロック
- 見出しブロック
- 画像ブロック
- キャプションボックスブロック
- 普通のボックスブロック
- リストブロック
- 吹き出しブロック
- タブブロック
- ステップブロック
- テーブルブロック
段落ブロック


まずは、段落ブロック。
文章を入力する際に使うブロックで、画像挿入や文字装飾が行えます。



使い方は超簡単で、「改行」すればOKです。
動画で確認する
見出しブロック


次は、見出しブロック。
SWELLには、デザインが施されたh2・h3・h4見出しがあります。組み合わせればレイアウトが完成するので、カスタマイズをする必要がありません。



さらに、ワンクリックで見出しの階層を変えられますよ。
動画で確認する



なので、追加CSSをいじる必要がありません。
画像ブロック


次は、画像ブロック。
文中に画像を挟むことができ、ボタン一つで挿絵のレイアウトを変えられます。
動画で確認する



簡単な画像の加工ができますよ。
キャプションボックスブロック


次は、キャプションボックスブロック。
タイトルが付けられるボックスのことで、下記ができます。
- カラーは4色から選べる
- レイアウトは7種類から選べる
- 箇条書きや画像も挿入することが可能
- タイトル部分にアイコンを設定することができる
動画で確認する



かなりの時短になりますよ。
普通のボックスブロック


次は、普通のボックスブロック。
SWELLのボックスでは、こんなことが可能です。
- デザインは30種類から選べる
- 箇条書きや画像を挿入できる
- 枠内の背景色の変更ができる
- 他のボックスとの併用ができる
動画で確認する



なので、CSSをいじる必要が無いです。それにより、負担が減って、執筆に専念できますよ。
リストブロック


次は、リストブロック。
箇条書きを簡単に作れるブロックで、デザインが16種類あります。


しかも、ワンクリックでデザインの変更が可能です。
動画で確認する



使い分けができるので、視認性が上がって精読率が高まりますよ。
吹き出しブロック


次は、吹き出しブロック。
プラグインを入れることなく、吹き出しが作れます。
しかも
- 無制限に作成できる
- 左側・右側に配置できる
- 発言と心の声の2種類から選べる
- 色を変えたり枠線を付けることができる
という優れものです。
動画で確認する



有料プラグインを買わなくて済みますよ。さらに操作がカンタンなので、記事作成に集中できます。
タブブロック


次は、タブブロック。
タブ切り替えが作れるブロックで、下記が可能です。
- リストとの併用できる
- タブのサイズ幅の変更ができる
- 3種類のデザインから選択できる
- ナビをスクロールすることができる
動画で確認する



横移動だけで済むので利便性と満足度が上がりますよ。
言い換えるなら、サイト滞在時間が伸びるってことですね。
ステップブロック


次は、ステップブロック。
流れや手順を分かりやすく説明できるブロックで、下記ができます。
- デザインは3種類から選べる
- STEPの文字・色・形を変えられる
- リストや画像などの文字装飾を挿入できる
- 親ブロックを選択すれば簡単にデザインが変えられる
動画で確認する



「CSSをいじる必要が無い」っていうのが、嬉しいですよね。
テーブルブロック


最後は、テーブルブロック。
一覧表や比較表を作れるブロックで
- 4種類のデザインから選択ができる
- テーブルの固定サイズの設定ができる
- ヘッダータイトルを追加することができる
- 横スクロールの設定ができる(PC・スマホ)
という優れものです。
動画で確認する



テーブルのカスタマイズって案外難しいもの。それをしなくて済むので、かなり負担が減りますよ。
【おまけ】SWELLで使えるショートカットキー一覧【記事が早く書ける】
最後に、SWELLで使えるショートカットキー一覧をご紹介します。
ショートカットキー | できること |
---|---|
Ctrl+U | アンダーライン |
Ctrl+I | イスタリック |
Ctrl+A | 全選択 |
Ctrl+F・G | キーワード数の確認 |
Ctrl+K | テキストリンクの設定 |
Ctrl+Z | 一つ前に戻る(段落のみ) |
Ctrl+C | コピー |
Ctrl+X | 切り取り |
Ctrl+V | 貼り付け |



マウス操作の手間が省ける分、記事がより早く書けます。なので、ぜひ使ってみてください。
SWELLのブロックエディターの使い方|ブログ記事の書き方も解説【動画あり】:まとめ
今回は、 SWELLのブロックエディターの使い方・実際のブログ記事の書き方を動画+図解で解説 しました。
- 2018年12月から採用されているエディタ
- 見出しや文章、画像などを「ブロック」として作成する
SWELLのブロックエディターは簡単に扱えます。
- マウス操作だけで使える
- HTML/CSSの操作が不要
- 画面を見ながら装飾が施せる
ので、ストレスがありません。
※僕と同じように感じている人が続出



ぜひSWELLのサクサク感を体感してください。そして、快適なブログ生活を堪能してくださいね!
導入後にやること
SWELLを導入したら、初期設定をしましょう。
後がかなりラクになりますよ。
SWELLの初期設定
今回は以上です。
コメント
コメント一覧 (2件)
[…] >>関連記事:SWELLでブログ記事を書く際によく使うブロック […]
[…] […]