書けば書くほどストレスがなくなるSWELLの評判・口コミはこちらclick

SWELLのブロックエディターの使い方|ブログ記事の書き方も解説【動画あり】

URLをコピーする
URLをコピーしました!
悩む初心者ブロガー

SWELLはブロックエディターに完全対応って聞くけど、そもそもブロックエディターってなに?どう使うの?

クラシックエディターしか使ったことが無いので、扱えるかが不安です。

そんな疑問を解決します。

2020年9月から、SWELLのブロックエディターを使っている僕が解説しますね。

この記事を書いている人

ため(@tame3_tame3
この記事で分かること
  • ブロックエディターの基礎知識
  • ブロックエディターの使い方【記事の書き方】
  • SWELLでブログ記事を書く際によく使うブロック

SWELLの公式サイトを見ると、「ブロックエディター」に完全対応という文字。

クラシックエディタしか使ったことが無いと、

何それ?どうやって使うの?

ちゃんと扱えるのかな??

って思いますよね?

SWELLに乗り換える直前の僕も、そう思いました。

結論、SWELLのブロックエディターは簡単に扱えます。

  • マウス操作だけで使える
  • HTML/CSSの操作が不要
  • 画面を見ながら装飾が施せる

ので、ストレスがありません。

ただ、操作の仕方を知らないまま使うと、頭が混乱します。ググりながら使うことになるので、最初は苦労ことに。

そうならないためにも、SWELLのブロックエディターの使い方・実際のブログ記事の書き方を動画+図解で解説します。

ため

ブロックエディターについて知りたい人・SWELLが気になっている人は、最後までご覧ください。

ちなみに、SWELLの機能について知りたい方は、SWELLの機能(専用ブロック)まとめ【使い方やできることを動画で紹介】をどうぞ。

それでは、本文を見ていきましょう。

>>関連記事:【SWELLレビュー】なぜスウェルは評判が良い? デメリットは無いのか?

目次

ブロックエディターとは?

SWELLのブロックエディタ

ブロックエディターとは、2018年12月から採用されているCMSです。

CMSとは?

ざっくり言うと、文章や画像などを保存・管理する仕組みのことです。

見出しや画像、文章を「ブロック」として構成していきます。

クラシックエディターのサポートは2022年末まで

WordPressは現在、ブロックエディターを中心に開発が進められています。

そのため、クラシックエディターについては下記のようにアナウンス。

Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

引用:https://ja.wordpress.org/plugins/classic-editor/
ため

「いつサポートが終わるのかが分からない」ですね。

突然サポートが終了する可能性もあります。

なので、早めにブロックエディタへ乗り換えることが必要です。

ブロックエディターの画面構成

ブロックエディターの画面構成についてお伝えしますね。

ため

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

一つずつ説明しますね。

「トップツールバー」エリア

トップツールバーエリアは

  • 下書き保存
  • プレビュー
  • 記事の公開

などをする部分です。

ため

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

具体例

トップツールバー
  1. 管理画面(ダッシュボード)へ移動
  2. ブロックの追加
  3. 「編集・選択」モード切替
  4. ひとつ前の状態に戻す
  5. ひとつ先の状態に進める
  6. コンテンツの構造や文字数などの確認
  7. コンテンツのブロックナビゲーション
  8. 保存した投稿内容を確認
  9. 下書きを保存
  10. プレビューを表示
  11. 記事を公開
  12. 右ツールバーの表示/非表示
  13. SWELL設定
  14. ツールバー、エディターモードなどの設定

「右ツールバー」エリア

右ツールバーエリアは

  • パーマリンクの設定
  • カテゴリー・タグの設定
  • アイキャッチ画像の設定

などをする部分です。

ため

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

具体例

  1. 公開状態の確認・設定
  2. パーマリンク(URL)の設定
  3. カテゴリーの選択
  4. タグの設定
  5. アイキャッチ画像の設定
  6. 要約文の設定
  7. コメントの許可など
  8. SWELL専用の設定(目次表示・非表示など)

「メインコンテンツ」エリア

メインコンテンツエリアは

  • 記事タイトルの作成
  • 記事本文の作成

などをする部分です。

  1. タイトルを入力する場所
  2. 記事本文を作成する場所
ため

このエリアで記事を作ります。

ブロックのメニューバー

文章を入力すると、入力したブロックの上に「メニューバー」が表示されます。

このメニューバーの解説をしますね。

メニューバー
  1. ブロックタイプまたはスタイルを変更
  2. ブロックの移動
  3. テキストの配置を変更
  4. ブロック下の余白量
  5. デバイスコントロール(PCのみで表示など)
  6. 太字
  7. イタリック
  8. リンク
  9. 続きを読む
  10. SWELL装飾
  11. ショートコード
  12. オプション

一つずつ見ていきましょう。

①:ブロックタイプまたはスタイルを変更

名前のとおり、ブロックタイプやスタイルを変更できます。

具体的には

  • 入力した文章⇒見出し
  • 入力した文章⇒吹き出し
  • 入力した文章⇒リスト

にすることが可能です。

具体例

動画で確認する

ため

ボタン一つで済むので、記事作成の負担が減りますよ。

②:ブロックの移動

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

ため

文章や装飾の順番を変えたい時、入力し直さなくて済みますよ。

③:テキストの配置を変更

入力した文章の位置を変えることができます。

テキスト配置の変更例

テキスト左寄せ

テキスト中央寄せ

テキスト右寄せ

ため

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

④:デバイスコントロール

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

ため

普通に記事を作る分には使わないです。

⑤:ブロック下の余白量

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

動画で確認する

ため

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

https://twitter.com/Indoorman4/status/1427245983033827337?s=20
https://twitter.com/purple_wakuwaku/status/1355168605227241474?s=20

⑥:太字

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

  • あああああ
  • いいいいい
ため

なので、エディター上まで移動する必要がありません。

⑦:イタリック

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

  • あああああ
  • いいいいい
ため

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

⑧:リンク

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

使い方

文章を入力
リンクを挿入する文字列を選択し、ブロックメニューバーの「リンク」をクリック
リンクの設定
リンクの完成

動画で確認

ため

1回の操作で別タブ設定ができるのって、ラクですよね。

⑨:続きを読む

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

⑩:SWELL装飾

SWELLの文字装飾機能が使えます。

  • メインカラー
  • メインカラー(薄)
  • グレー
  • オレンジ
  • 赤(薄)
  • 青(薄)
  • 緑(薄)
  • オレンジ(薄)

⑪:ショートコード

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

ため

よく使うものだけをご紹介しますね。

よく使うもの例
  • 評価スター・・・
  • アイコン用ショートコード・・・

>>SWELLで使えるアイコン一覧

その他のショートコードは、SWELLで使えるショートコード一覧をご覧ください。

⑫:オプション

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

ため

詳細は後述しているので、そちらを参照してください。

【SWELL編】ブロックエディターの使い方【ブログ記事の書き方】

では、ブロックエディターを使ってのブログ記事の書き方をご紹介しますね。

順番に見ていきましょう。

記事の骨格となる「記事構成」については、ブログの記事構成の作り方を9ステップで解説【無料テンプレートあり】をご覧ください。

ステップ①:記事タイトルの入力

まずは、記事タイトルを入力しましょう。

「狙っているSEOキーワード」だけを書きます。

というのも、ガッツリ決めると

  • 記事タイトルを意識するあまりチグハグなことを書く
  • 記事タイトルと記事本文のズレが生じる

からです。

そうならないためにも、狙っているSEOキーワードだけを書きましょう。

ため

それにより、執筆の方向性も定まりますよ。

ステップ②:メインエリアで本文作成

次は、メインエリアで本文を作成していきましょう。

見出しブロックや段落ブロックを使って、文章を書きます。

動画で確認する

ステップ③:記事本文に文字装飾を施す

次は、記事本文に文字装飾を施しましょう。

  1. 右ツールバーの文字装飾
  2. ブロックのメニューバー

を使って、リストやボックスなどを使用します。

動画で確認する

ステップ④:書いたブログ記事の投稿設定

次は、書いたブログ記事の投稿設定をしましょう。

具体的には

  • パーマリンクの設定
  • カテゴリーの設定
  • タグの設定
  • アイキャッチ画像の設定

をします。

投稿設定のやり方

投稿設定のやり方です。

パーマリンクの設定
カテゴリーの設定
タグの設定
アイキャッチ画像の設定

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

②:画像を選択

投稿設定の完了

動画で確認

ステップ⑤:一晩寝かせてから文章推敲をする

次は、一晩寝かせてから文章推敲をしましょう。

理由は単純で

  • 書いた直後では気づけないことに気付ける
    • 「論理が破綻している」「説明が抽象的過ぎて分からない」ところを発見できる
  • 読者目線で自分の記事を見れる
    • 言い回しや表現、リズムなどの良し悪しが分かる
    • 読みやすいかどうかが分かる

からです。

ため

文章推敲のやり方については、下記をご覧ください。

文章推敲のやり方

ステップ⑥:プレビューを確認して記事を公開する

最後は、プレビューを確認して記事を公開しましょう。

ため

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

やり方

「プレビュー」⇒「新しいタブでプレビュー」
「プレビュー」⇒「モバイル」
メタディスクリプションの作成

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

本タイトルの作成

赤背景色の記事タイトルの文字数を見ながら、「本記事タイトル」を作ります。

記事タイトルの決め方については、下記をご覧ください。

関連記事

公開

以上が記事作成の流れになります。

SWELLの基本的な使い方

画面構成や記事作成の流れは、理解できましたか?

ため

次は、SWELLの基本的な使い方をお伝えします。

SWELLの基本的な使い方
  1. ブロックの追加
  2. ブロックの移動
  3. ブロックの削除
  4. ブロックのコピー
  5. ブロックのグループ化
  6. ブロックの再利用

一つずつ説明しますね。

その①:ブロックの追加

文字装飾や画像などを使いたい時に使用します。

「ブロックの追加」の使い方

「+」をクリック
ブロックを選択
ブロックパターンの選択

ブロックパターン・・・ブロックとブロックが組み合わさったものです

ざっくりまとめると

  1. 「+」をクリック
  2. 目的のブロックを選ぶ
  3. 投稿画面に表示される

ですね。

動画で確認する

その②:ブロックの移動

文章や画像を移動させたい時に使います。

「ブロックの移動」の使い方

移動させたいブロックを選択
移動させたい方向(上下)を選ぶ
ブロックが移動する

動画で確認する

その③:ブロックの削除

ブロックを一括で消したい時に使います。

「ブロックの削除」の使い方

削除したいブロックを選択
「オプション」⇒「ブロックの削除」
ブロックの削除が完了

削除したブロックを復元する方法

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

「元に戻る」をクリック
削除したブロックが復元された

動画で確認する

その④:ブロックのコピー

文字装飾などをコピペしたい時に使います。

「ブロックのコピー」の使い方

コピーするブロックを選択
「オプション」⇒「コピー」

コピーができると、画面左下に「〇個のブロックをクリップボードにコピーしました。」と表示されます。

ペースト(Ctrl+V)

動画で確認する

その⑤:ブロックのグループ化

ブロックをひとまとめにして、ボックス装飾を使う時に使用します。

「ブロックのグループ化」の使い方

グルーピングしたい文章を選択
「オプション」⇒「グループ化」
ビジュアルを確認しならが、ボックス装飾を使う
ため

これができることで、まとめて装飾が施せます。一つずつ装飾を作る必要がありません。

なので、記事作成の負担がめちゃくちゃ減って、時短になりますよ。(僕の場合は記事作成時間が2h短縮しました)

動画で確認する

その⑥:ブロックの再利用

文章のテンプレートを作りたい時に使います。

「ブロックの再利用」の使い方

テンプレ化したい文章(ブロック)を選択
「オプション」⇒「再利用ブロックに追加」
名前を決めて保存

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

「ブロックの追加」⇒「再利用ブロック名」⇒「再利用ブロック名をクリック」
「通常のブロックへ変換」

動画で確認する

SWELLでブログ記事を書く際によく使うブロック

ここでは、ブログ記事を書く際によく使うブロックをご紹介します。

よく使うブロック
  • 段落ブロック
  • 見出しブロック
  • 画像ブロック
  • キャプションボックスブロック
  • 普通のボックスブロック
  • リストブロック
  • 吹き出しブロック
  • タブブロック
  • ステップブロック
  • テーブルブロック

段落ブロック

まずは、段落ブロック。

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

ため

使い方は超簡単で、「改行」すればOKです。

動画で確認する

見出しブロック

次は、見出しブロック。

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

ため

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

動画で確認する

ため

なので、追加CSSをいじる必要がありません。

画像ブロック

次は、画像ブロック。

文中に画像を挟むことができ、ボタン一つで挿絵のレイアウトを変えられます。

動画で確認する

ため

簡単な画像の加工ができますよ。

キャプションボックスブロック

次は、キャプションボックスブロック。

タイトルが付けられるボックスのことで、下記ができます。

キャプションボックスで出来ること
  • カラーは4色から選べる
  • レイアウトは7種類から選べる
  • 箇条書きや画像も挿入することが可能
  • タイトル部分にアイコンを設定することができる

動画で確認する

ため

かなりの時短になりますよ。

普通のボックスブロック

次は、普通のボックスブロック。

SWELLのボックスでは、こんなことが可能です。

普通のボックスで出来ること
  • デザインは30種類から選べる
  • 箇条書きや画像を挿入できる
  • 枠内の背景色の変更ができる
  • 他のボックスとの併用ができる

動画で確認する

ため

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

リストブロック

次は、リストブロック。

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

画像をクリックすると大きくなります

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

動画で確認する

ため

使い分けができるので、視認性が上がって精読率が高まりますよ。

吹き出しブロック

次は、吹き出しブロック。

プラグインを入れることなく、吹き出しが作れます。

しかも

  • 無制限に作成できる
  • 左側・右側に配置できる
  • 発言と心の声の2種類から選べる
  • 色を変えたり枠線を付けることができる

という優れものです。

動画で確認する

ため

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

タブブロック

次は、タブブロック。

タブ切り替えが作れるブロックで、下記が可能です。

出来ること
  • リストとの併用できる
  • タブのサイズ幅の変更ができる
  • 3種類のデザインから選択できる
  • ナビをスクロールすることができる

動画で確認する

ため

横移動だけで済むので利便性と満足度が上がりますよ。

言い換えるなら、サイト滞在時間が伸びるってことですね。

ステップブロック

次は、ステップブロック。

流れや手順を分かりやすく説明できるブロックで、下記ができます。

ステップブロックで出来ること
  • デザインは3種類から選べる
  • STEPの文字・色・形を変えられる
  • リストや画像などの文字装飾を挿入できる
  • 親ブロックを選択すれば簡単にデザインが変えられる

動画で確認する

ため

「CSSをいじる必要が無い」っていうのが、嬉しいですよね。

テーブルブロック

最後は、テーブルブロック。

一覧表や比較表を作れるブロックで

  • 4種類のデザインから選択ができる
  • テーブルの固定サイズの設定ができる
  • ヘッダータイトルを追加することができる
  • 横スクロールの設定ができる(PC・スマホ)

という優れものです。

動画で確認する

ため

テーブルのカスタマイズって案外難しいもの。それをしなくて済むので、かなり負担が減りますよ。

その他のブロックを知りたい方は、SWELLの機能(専用ブロック)まとめ【使い方やできることを動画で紹介】をご覧ください。

【おまけ】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の操作が不要
  • 画面を見ながら装飾が施せる

ので、ストレスがありません。

※僕と同じように感じている人が続出

https://twitter.com/tomotomo0197/status/1378283228868403204?s=20

勿論、「全員導入すべき」とは言いません。が、導入すればストレスがかなり消えます。

その結果、心地良く快適にブログを続けられるようになりますよ。

ため

ぜひSWELLのサクサク感を体感してください。そして、快適なブログ生活を堪能してくださいね!

\ ブログが楽しくなって継続がラクになる/

手順を見ながら導入したい方は、『こちら』をクリックしてください

導入後にやること

SWELLを導入したら、初期設定をしましょう。

後がかなりラクになりますよ。

SWELLの初期設定

今回は以上です。

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

この記事が少しでも役に立ったらシェアしてください!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次
トップへ
目次
閉じる