悩む初心者ブロガー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でブログ記事を書く際によく使うブロック […]
[…] […]