SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

SWELLブロックエディターガイド|使い心地抜群のエディターで楽しく記事を書こう!

SWELLブロックエディターガイド|使い心地抜群のエディターで楽しく記事を書こう!
  • URLをコピーしました!

SWELLの高機能なブロックエディターを快適に使いこなすためのガイドです。

このSWELLブロックエディターガイドでは、以下3つのパートに分けて情報を紹介していきます。

  1. ブロックエディターの使い方
  2. SWELLのブロックエディターの機能
    • SWELLオリジナルのブロック
    • コアブロックの機能拡張
    • SWELLオリジナルのエディター機能
  3. ブロックを呼び出すショートカット

※項目の横に【】マークがあるものはSWELLの機能や設定。それ以外はWordPress標準の機能。

さとしん

SWELLの機能を活かした記事の書き方を覚えて楽しく快適に記事を書いていきましょう…!

目次

ブロックエディターの使い方を覚える

WordPressのブロックエディターを使ったことが無い方は、まず基本的な使い方を覚えましょう。

SWELLは、ブロックエディターに独自のカスタマイズを加えることで使い心地を向上させてくれています。

そのためSWELLで楽しく快適に記事を書くためには、ブロックエディターの基本的な使い方を覚えておく必要があります。

ブロックエディターでは、見出しや画像などのコンテンツがそれぞれブロック化されています。

WordPress側で用意している標準のブロックをコアブロックと呼びます。

まずは、ブロックエディターの操作方法と、記事執筆で使う機会の多い以下のようなブロックを覚えておくと良いかなと思います。

ブロックエディターの使い方や、良く使うコアブロックを以下の記事にまとめているので必要に応じて参考にしてください。

SWELLのブロックエディター機能を把握する

WordPress標準のブロックエディターの使い方がある程度把握できたら、SWELLオリジナルの機能を確認しておきましょう。

SWELLオリジナルのブロックエディターの機能は大きく3つです。

  1. SWELLオリジナルのブロック
  2. WordPress標準ブロックの機能拡張
  3. SWELLオリジナルのエディター機能

それぞれ紹介します。

SWELLの機能について

SWELLオリジナルの機能はとてもたくさんあるので、今すぐ全て把握する必要は無いと思います。

ただ、SWELLのブロックエディターの魅力を最大限に引き出すためにはいろいろな機能を覚えておくと良いので、お時間あるときに見てみてください。

SWELLオリジナルのブロックと標準ブロックの拡張機能

SWELLでは、先に紹介したコアブロックに独自の機能を追加して更に使いやすくしてくれています。

例えば、テーブルブロックでは背景に〇や×の記号アイコンを配置できたり、画像ブロックではデスクトップやブラウザ風の装飾ができます。

SWELLのテーブルブロックで比較表を作る手順-1
SWELLのテーブルブロック
SWELL画像ブロックのデスクトップ風装飾
SWELLの画像ブロック
さとしん

標準のテーブルブロックには物足りなさを感じる人も多いですが、SWELLではその不満がほぼ改善されています…!

その他にも、SWELLだけで使えるオリジナルのブロックも多数あります。
※以下は一例です。

  • 関連記事ブロック
  • フルワイドブロック
  • リッチカラムブロック
  • 制限エリアブロック

2022年4月時点で、19個のオリジナルブロックがあります。

SWELLのオリジナルブロックとコアブロックの機能拡張について以下の記事でまとめています。

SWELLオリジナルのエディター機能

SWELLのブロックエディターの凄さは、上述したブロックに目が行きがちですが、それ以外にも使い心地を向上させてくれる工夫がたくさん盛り込まれています。

例えば、以下のような機能があります。

  • 改行の位置を閲覧者のデバイス(PC or スマホ)に応じて変える
  • ブロックの表示/非表示を閲覧者のデバイス(PC or スマホ)に応じて変える
  • ブロック間の余白を簡単に変更できる

これらの操作は全て、ブロックツールバーから設定できます。

ブロックツールバーとは?

任意のブロックを選択している時に、ブロック上部に表示されるツールバーのこと。

SWELLのブロックツールバー

SWELLのブロックツールバーでできることは以下の記事でまとめています。

ブロックを簡単に呼び出すショートカットを覚える

ブロックエディターには、ひとつひとつの作業を時短できるキーボードショートカットがあります。

ショートカットコマンドはたくさんあるので以下の記事にまとめています。

この記事では、ブロックをエディター上に呼び出すショートカットキーを紹介します。

  • 「/」でブロックを呼び出す
  • 「#」で見出しブロックを呼び出す
  • 「-」でリストブロックを呼び出す
さとしん

記事執筆の効率を上げるために、必須で覚えておいた方が良いです…!

それぞれ紹介します。

「/」でブロックを呼び出すキーワードを覚える

段落ブロックで「/+ブロック名」を入力することで、任意のブロックを呼び出すことができます。

以下の動画のイメージです。

例えば、「/heading」と入力すると見出しブロックを簡単に呼び出せます。「/見出し」のように日本語でもOKです。

主要なブロックを呼び出すための英字キーワードを以下にまとめておきます。

ブロック名(コアブロック)キーワード
見出しブロック/heading
リストブロック/list
画像ブロック/image
テーブルブロック/table
カラムブロック/columns
ボタンブロック/buttons
コアブロック
ブロック名(SWELLブロック)キーワード
ふきだしブロック/balloon
SWELLボタンブロック/button
キャプションブロック/cap
フルワイドブロック/fullwide
関連記事ブロック/blogcard , /postlink
ステップブロック/step
投稿リストブロック/postlist
タブブロック/tab
説明リストブロック/dl
リッチカラムブロック/rich-columns
制限エリアブロック/restrict-area
SWELLブロック

上記で紹介していないSWELLブロックのキーワードは公式サイトの「」でまとめられています。

さとしん

良く使うブロックのキーワードを覚えたり、PCに辞書登録しておくと本当に執筆の効率が上がるのでぜひ試してみてください…!

見出しやリストは別の方法でも呼び出せる

ブロックを「/」を使って簡単に呼び出す方法を紹介しましたが、他にもブロックを簡単に呼び出す方法があります。

例えば、見出しブロックは「#+半角スペース」を入力するだけで呼び出せます。

以下のイメージで、見出しの階層に合わせて「#」の数を変えるだけでOKです。

  • 見出し2 → ##+半角スペース
  • 見出し3 → ###+半角スペース
  • 見出し4 → ####+半角スペース

また、リストブロックは「-+半角スペース」と入力するだけで呼び出せます。

番号付き(ol)のリストにしたいときは、「1.+半角スペース」を入力します。

実際の使用イメージは見出しとリストそれぞれ以下のとおりです。

見出しブロック
リストブロック

ここまではブロックエディターの機能を紹介してきました。

ここからは、SWELLのブロックエディターで快適にコンテンツを作っていくための環境を整えていきましょう。

ブロックエディターを自分仕様にカスタマイズする

SWELLのブロックエディターを快適に使っていくために、自分が使いやすいエディターの環境を作っていきましょう。

以下の項目を紹介します。

  1. エディターのカラーパレットの設定
  2. 装飾のデザインやカラーの設定
  3. 編集画面の表示をカスタマイズ
  4. ブロックツールバーのカスタマイズ
  5. 良く使うテキスト装飾の登録

ブロックエディターのカラーパレットを設定する

テキスト色や背景色を設定するときに、良く使うカラーを事前に登録しておくことができます。

さとしん

良く使う色を設定しておくとカラーを選ぶときの手間が減ります…!

SWELLでは、以下のように「濃い色」と「淡い色」を各4色ずつ登録できます。

SWELLのカラーパレット設定

カラーパレットは以下から設定できます。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カラーセット」→「カラーパレット設定」

カラーパレットを設定する方法は公式サイトでも紹介されています。

>>

装飾のデザインやカラーを設定する

SWELLのエディターで使える装飾のデザインやカラーが設定できます。

設定は以下の画面で行えます。

WordPress管理画面→「SWELL設定」→「エディター設定」→下記画像の赤枠のタブ

SWELL装飾のデザイン設定

上記画像の赤枠のタブを開くと以下のような設定ができます。

  • リスト設定
  • キャプションブロック設定
  • Q&A設定
  • ボーダーセットの登録
  • マーカー設定
  • SWELLボタンの設定
  • アイコンボックス(大、小)の設定
  • ふきだしカラーの設定
さとしん

後から色やデザインを変えたくなった時も、この画面で変更すれば全記事に反映されます…!

他の装飾のデザイン設定方法…!

見出しのデザインは以下の場所から設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」

SWELLの見出しデザイン設定

目次のデザインは以下の場所で設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→「投稿・固定ページ」→「目次」

SWELLの目次デザイン設定

エディター(編集画面)の表示をカスタマイズする

エディターの構成をカスタマイズすることもできます。必要に応じて調整してください。

以下3点紹介します。

  1. トップツールバーの設定
  2. スポットライトモード
  3. フルスクリーンモード

上記の3点は、全て以下の場所で設定できます。

編集画面→「オプション」→「表示」

エディター画面を編集する

トップツールバー

トップツールバーの設定にチェックを入れると、ブロックツールバーが上部に固定されるようになります。

ブロックエディターのトップツールバーの設定-1

通常は、編集しているブロックのすぐ上にツールバーが表示されます。

ブロックエディターのトップツールバーの設定-2

僕は編集しているブロックのすぐ上に表示されるのが好きですが、お好みで設定してみてください。

スポットライトモード

スポットライトモードにチェックを入れると、編集していないブロックが薄く表示されます。

ブロックエディターのスポットライトモードの設定

どこのブロックを編集しているか分かりやすくなるかもしれません。こちらもお好みで設定してください。

フルスクリーンモード

フルスクリーンモードはデフォルトでチェックが入っています。

チェックを外すと、画面の上部にWordPressの管理バー、左側に管理画面のサイドバーが表示されます。

ブロックエディターのフルスクリーンモードの設定

エディターが狭くなるので、個人的にはフルスクリーンモードが好みです。

お好みで設定してみてください。

ブロックツールバーをカスタマイズする

ブロックツールバーに表示する項目をカスタマイズすることができます。

編集画面→「SWELL設定」→「ブロックツールバーの表示設定」

SWELLのブロックツールバーの表示設定

デフォルトでは、「背景色」以外の項目にチェックが入っています。

頻繁に使わない項目のチェックを外しておくと、ツールバーをスッキリさせることができるので、作業時に迷うことも少なくなるかもしれません。

良く使う装飾を書式セットに登録する

SWELLには書式セット機能というものがあります。

例えば、”マーカー”+”太字”など、良く使う文字装飾の組み合わせを事前に作っておき、記事内で簡単に装飾できる機能です。

以下のようなイメージです。

書式セット機能

書式セットは以下の画面で設定できます。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カスタム書式」

SWELLのカスタム書式セット機能の登録方法

書式セットなど、SWELLのカスタム書式機能は以下の記事にまとめているので参考にしてください。

ブロックエディターの記事執筆で活躍する便利機能を使う

ブロックエディターでコンテンツを作成するときにかなり重宝する便利な機能を計7点紹介します。

  1. 再利用ブロック
  2. ブログパーツ 【
  3. ブロックパターン
  4. ページ内リンク
  5. 広告タグ管理機能 【
  6. ふきだしセット 【
  7. ポチップ 【プラグイン】

※項目の横に【】マークがあるものはSWELLの機能。それ以外はWordPress標準の機能です。

再利用ブロック

再利用ブロックは、挨拶文やプロフィールなど、複数の記事で使いまわすコンテンツを登録しておくことができる機能です。

再利用ブロックに登録しておいたコンテンツは、エディター上で簡単に呼び出すことができます。

再利用ブロックの登録方法と、エディター上での使い方は以下の記事にまとめています。

ブログパーツ

ブログパーツは、再利用ブロックと同様に複数の記事で使いまわすコンテンツを登録しておくことができる機能です。

ブログパーツはSWELL限定の機能です。

再利用ブロックとの大きな違いは、登録したパーツをショートコード化して以下のような記事以外のいろいろな場所でも使うことができる点です。

  • メインビジュアル
  • ウィジェット
  • カテゴリー、タグページ
  • 著者アーカイブページ
アーカイブページでブログパーツを使う方法-2
アーカイブページ
SWELLのCTAウィジェット
カテゴリーCTA

再利用ブロックとブログパーツをうまく使い分けていきましょう。

さとしん

僕は、記事文中だけで使うコンテンツは再利用ブロック。それ以外はブログパーツ。という使い分けをすることが多いです。

ブログパーツの設定方法や具体的な使い方は以下の記事にまとめています。

ブロックパターン

ブロックパターンは、複数のブロックで作られたレイアウトを登録しておいて、記事内で呼び出すことができる機能です。

再利用ブロックやブログパーツとの違いは、ブロックパターンはあくまでブロックの組み合わせのみを保持できる点です。

ブロックパターンで呼び出したブロックは、テキストや画像などのブロック内のコンテンツを自由に編集できます。

再利用ブロックやブログパーツは、ブロックの組み合わせだけでなくブロック内の画像やテキストの情報も保存されます。そのため、テキストを変更するとサイト内の全てのコンテンツのテキストが変更されてしまいます。

さとしん

使いまわしたい文章や画像は再利用ブロックやブログパーツ。使いまわしたいレイアウトはブロックパターン。という使い分けをしましょう…!

ブロックパターンの登録方法や使い方は以下の記事にまとめています。

ページ内リンク

ページ内リンクは、同じページ内の任意の箇所にリンクを設置できる機能です。

以下動画のイメージです。

ページ内リンク

記事内に設置する目次なども同じ原理です。ページ内リンクを適切に活用するとユーザーに優しい記事になると思います。

ブロックエディターのページ内リンク設置方法は以下の記事にまとめました。

広告タグ管理機能

広告タグ管理機能は、いろいろなデザインの広告リンクを事前に作成して登録しておくことができるSWELL限定の機能です。

広告のクリック数も計測できます。また、ASPの広告リンクなどを一括で管理できるので、リンクの貼り替え作業も簡単に対応できる点もとても便利です。

さとしん

広告タグ機能は確実に活用したほうが良いです…!

広告タグ管理機能の設定方法と使い方は以下の記事にまとめました。

ふきだしセット

SWELLにはふきだしブロックという記事内に簡単にふきだしを配置できるブロックがあります。

そのふきだしブロックを更に効率良く便利に活用するために「ふきだしセット」という機能があります。

SWELLのふきだしセット機能-1

管理画面から事前にふきだしのアイコンや形状、配置などをテンプレートとして登録しておくことで、記事執筆時のふきだしの編集作業が不要になります。

ふきだしセットは以下から設定できます。

WordPress管理画面→「ふきだし」

SWELLのふきだしセット機能-2

新しいふきだしを登録したいときは「新規ふきだし追加」をクリックすると、ふきだしセットの編集画面にアクセスできます。

ふきだしセットに登録したふきだしの使い方は以下です。

編集画面→ふきだしブロックを呼び出す→サイドバーから登録したふきだしをクリック

SWELLのふきだしセット機能-3

これで記事内に登録した状態のふきだしが配置されました。あとは自由にテキストを入力するだけでOKです。

さとしん

ふきだしのカラーやスタイル、アイコンを都度設定しなくて良いのでとっても楽です…!

ポチップ【商品リンクプラグイン】

ポチップは、Amazonや楽天、Yahoo!などのリンクを作成、管理できるプラグインです。

以下のようなデザイン性も優れた商品リンクを簡単操作で作ることができます。

ポチップは通常無料のプラグインですが、機能が拡張された有料版のポチッププロもあります。

ポチッププロでは以下の機能が追加されます。

  • ボタンのクリック率計測機能
  • セール複数設定機能
  • 商品リンク画像の変更機能
  • セール自動取得機能
  • お知らせバー表示機能

上記の中の「お知らせバー表示機能」はSWELLとポチップの組み合わせのみで使用できる機能で、SWELLとの相性も抜群のプラグインです。

さとしん

ポチップは物販が多いブログには本当におすすめのプラグインです…!

ポチップの使い方や設定などは以下の記事にまとめています。

記事ごとに個別に設定できる項目を確認する

記事ごとに設定したい内容や、記事ごとに個別にカスタマイズできることがあります。

以下3点紹介するので覚えておくと役に立つと思います。

  1. 表示の上書き設定|記事ごとに目次や広告の表示を変える
  2. SEO関連設定|メタディスクリプションなどの入力方法
  3. カスタムCSS & JS|記事ごとにカスタマイズする

それぞれ紹介します。

記事ごとに広告などの表示、非表示を切り替える

SWELLでは、目次、アイキャッチ、広告などの要素の表示は「外観」→「カスタマイズ」で設定します。

このベースの設定に対して、記事ごと個別に設定を切り替えられる様になっています。以下から行えます。

記事編集画面のサイドバー「投稿」タブ→「表示の上書き設定」

SWELLの表示上書き設定

特定の記事だけサイドバーを非表示にしたり、広告を非表示にできるので、コンテンツの種類に応じて柔軟な設定ができます。

さとしん

有効に活用したいですね…!

メタディスクリプションなどSEO関連の設定はプラグインを使う

SWELLでは、メタディスクリプションなど記事個別のSEO関連設定はプラグインで行います。

プラグインは「SEO SIMPLE PACK」というプラグインがおすすめです。

SWELL開発者の了さんが公開しているプラグインなので安心して使うことができます。

SEO SIMPLE PACKプラグインを有効化すると、エディター下部に「SEO SIMPLE PACK設定」という項目が追加されるので、記事ごとに必要な内容を入力しましょう。

SWELLのSEO関連設定

また、記事をTwitterでシェアしたときにカード形式でツイートするための設定方法を以下の記事にまとめています。

記事ごとにCSSやJSを記述する

エディターの下部に、「カスタムCSS & JS」という入力欄があります。

SWELLのカスタムCSS & JS設定

この欄に入力したCSSやJSは、そのページでのみ適用されます。

サイト全体ではなく、特定の記事にだけCSSやJSを書きたい場合は、この入力欄を使うと便利です。

SWELLのブロックエディターで楽しく快適な記事執筆を!

SWELLのブロックエディターでできることを紹介しました。

  1. ブロックエディターの使い方
  2. SWELLのブロックエディターの機能
    • SWELLオリジナルのブロック
    • コアブロックの機能拡張
    • SWELLオリジナルのエディター機能
  3. ブロックを呼び出すショートカット

※項目の横に【】マークがあるものはSWELLの機能。それ以外はWordPress標準の機能。

SWELLのブロックエディターはとても多機能、高機能なので日々新しい発見があるはずです。

少しずつ機能が把握できていくことで、よりSWELLのブログ運営が楽しく快適になっていくと思います。

ぜひこの記事を何度も見ながら、SWELLのブロックエディター機能を覚えていってください。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

次に読んで欲しいWebNote+のおすすめ記事

WebNote+では、当記事「SWELLのブロックエディターガイド」以外にも複数の記事を用意しています。

合わせて読んで欲しいWebNote+のおすすめ記事を紹介します。

SWELLブロックエディターガイド|使い心地抜群のエディターで楽しく記事を書こう!

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

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