SWELLの記事の書き方ガイド｜使い心地抜群のブロックエディターを使いこなそう！

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

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

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

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

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

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

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

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

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

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

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

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

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

それぞれ紹介します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それぞれ紹介します。

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

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

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

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

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

ブロック名(コアブロック)	キーワード
見出しブロック	/heading
リストブロック	/list
画像ブロック	/image
テーブルブロック	/table
カラムブロック	/columns
ボタンブロック	/buttons

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

上記で紹介していないSWELLブロックのキーワードは公式サイトの「SWELLブロックを簡単に呼び出せる「キーワード情報」一覧」でまとめられています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>カラーパレットの配色をカスタマイズする方法

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

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

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

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

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

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

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

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

以下3点紹介します。

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

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

トップツールバー

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

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

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

スポットライトモード

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

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

フルスクリーンモード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再利用ブロック

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

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

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

ブログパーツ

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

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

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

• メインビジュアル
• ウィジェット
• カテゴリー、タグページ
• 著者アーカイブページ

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

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

ブロックパターン

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

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

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

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

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

ページ内リンク

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

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

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

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

広告タグ管理機能

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

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

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

ふきだしセット

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それぞれ紹介します。

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

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

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

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

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

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

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

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

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

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

SEO SIMPLE PACKの導入方法や設定方法は以下の記事にまとめています。

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

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

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

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

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

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

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

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

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

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

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

---

SWELL公式サイトはこちらからどうぞ…！

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

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

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