【SWELL】ブロックエディターの使い方【専用ブロック15の紹介】

こんな悩みを解決します。

この記事で分かる事

この記事の信頼性

この記事を書いている筆者は、このサイトを立ち上げげた時からSWELLを使用していて、ブロックエディターをかなり使い込んでいると思っています。

この記事を読むことによって、ブロックエディタの使い方はもちろん、SWELLを完全にイメージすることができます。

また、「みんなと違う画面が表示されちゃう…。」という悩みも解決することができるので、ぜひ参考にしてみてください。

それでは早速みていきましょう！

SWELLブロックの紹介

まず初めに、SWELLブロックを紹介していきます。

上記のブロックは全てSWELLのオリジナルブロックなんですね。

順位見ていきましょう。

その1：ABテストブロック

ABテストブロックでは、AブロックとBブロックをランダムで出し分けることができます。

どんなブロックでも配置でき、広告タグ管理機能と合わせることでクリック率を計算できるので、ABテストをするときにめちゃめちゃ便利です。

その2：アコーディオンブロック

2つ目は、アコーディオンブロックの紹介です。

デザインも数種類あるので、自分のサイトに合わせて設定できます。

アコーディオンを使うことで、説明文や長くなりそうな文章を隠して置けるので、記事をすっきり見せることができるんですね。

その3：バナーリンクブロック

上記の通り、画像の上に文字を配置し、全体をリンクとして設置できるブロックです。

画像編集のスキルが全くない人でも、ボタン1つで「バナーリンク」を作ることができます。

設定項目

この辺りの設定ができます。

その4：SWELLボタンブロック

WordPressに標準装備されているボタンブロックとは別に、SWELLオリジナルボタンも使うことができます。

これがかなり優秀で、アフィリエイトリンクのクリック率も向上です！

特徴を簡単にまとめておきます。

その5：フルワイドブロック

トップページのデザインや、コーポレートサイトなどで使うと、非常に便利なブロックです。

設定項目

その6：タブブロック

使い方としては、例えば「Before」・「After」や「人気記事」・「おすすめ記事」などに分けるのもありです。

デザインも3種類用意されていて、サイトの雰囲気に合わせて使い分けれれます。

その7：キャプション付きブロック

キャプション付きブロックは、どんな記事にも柔軟に使いこなせるので、ぜひ試してください！

その8：説明リストブロック

説明リストは、HTMLで言うとdlタグを簡単に設置することができます。

見出しを使わずにそれぞれの項目をわかりやすく解説できるブロックです。

横並びでも表示可能です。

その9：FAQブロック

個人的に「FAQ」ブロックはめちゃめちゃ気に入っています。

なぜなら、カラーを自分で設定でき、デザインバリエーションも豊富なので使いやすいから。

設定項目

その10：ステップブロック

ステップブロックは、作業の手順を説明する際に便利なブロックです。

現在のデザインパターンは3種類あり、好きなデザインを選べます。

その11：広告タグブロック

広告タグブロックは、事前に登録している広告タグを簡単に呼び出せるブロックです。

広告タグの呼び出し方

このように、超簡単なのでブロガーは重宝している機能です！

その12：ふきだしブロック

ブログやるなら憧れるふきだしブロックも、SWELLでは簡単に表示させることができます。

上記のように様々な設定ができるので好みに合わせて使い分けましょう！

その13：ブログパーツブロック

ブログパーツブロックは、事前に登録しておいたブログパーツを簡単に呼び出すことができます。

どの記事でも使う「この記事の信頼性」などを登録しておくと、記事の執筆時間を短縮できます。

ブログパーツの使い方

その14：投稿リストブロック

好きな数だけ作成した記事を呼び出せるブロックです。

こんな感じでかなり柔軟に使うことができる便利なブロックです。

サイトのトップページとかによく使われています。

その15：関連記事ブロック

関連記事へのリンクをブログカードとして表示できるブロックです。

内部リンク・外部リンクどちらでもOKです！

デザインも自分で設定できるので、自分好みに仕上げましょう。

関連記事の呼び出し方

こんな感じでキーワードを入力するだけで関連記事を呼び出せます！

他のテーマだとIDを入力しないとなので面倒ですが、SWELLは楽々です。

ブロックエディターの使い方

ブロックエディターの使い方を紹介していきます。

クラシックエディターに慣れている人は、難しそうって思うかもですが、マジで簡単です。

ブロックエディターの使い方の手順はこんな感じ。

順に解説していきます。

手順1：【投稿】から【新規追加】

まずは新しく記事を書き始めるために【新規追加】をクリックします。

すでに投稿されている過去の記事は、【編集】をクリックすることでリライトできます。

手順2：文字を入力or +ボタンでブロックを選択

ブロックエディターの基本操作は、【文字・ブロックを選択】→【装飾を付ける】となります。

難しい操作は一切ないので、1記事書き終わる頃には操作に慣れていますよ。

手順3：装飾を付ける

装飾を付けるには、【段落アイコン】と【歯車アイコン】をクリックします。

すると、ボーダー設定や見出し・リストなどその時々で使えるおしゃれな装飾があるので、クリックして完了です。

めちゃめちゃ簡単なので、1度記事を書いてみましょう。

ブロックエディターの画面が表示されない時の対処

以前、Twitterで「ブロックエディターの画面が表示されない。」という悩みをいただきました。

その原因は、「クラシックエディターのプラグイン」が有効になっていたからでした。

プラグインによって、WordPressテーマは大きく影響を受けるので、不要な物は削除してしまいましょう。

ちなみに、SWELLと相性の良いプラグインを下記の記事で紹介しているので参考にどうぞ。

まとめ：ブロックエディターで執筆時間を短縮しよう

今回は、WordPressテーマ「SWELL」でブロックエディターについて解説しました。

クラシックエディターは、廃止が決まっているため、テーマはブロックエディターに対応している物を選ぶのが必須です。

その中で、SWELLは圧倒的なデザインと使いやすさを誇っているので、ぜひ導入してみてくださいね。

それでは今回は以上になります。

SWELLについて実際に使ったイメージを知りたい方は、下記の記事をみると「SWELL」良いなってなりますよ。