このサイトのテーマ「SWELL」を見てみる>>

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

悩む人

SWELLを使い始めたのですが、ブロックエディターに慣れなくて…。機能や使い方を分かりやすく教えてください!

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

この記事で分かる事

  • SWELLブロック機能
  • ブロックエディターの使い方
  • ブロックエディターの画面が表示されない時の対処

この記事の信頼性

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

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

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

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

目次

SWELLブロックの紹介

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

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

順位見ていきましょう。

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

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

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

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

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

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

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

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

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

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

設定項目

  1. 画像
  2. リンク先のURL
  3. 画像のサイズ
  4. メインコピー
  5. サブコピー
  6. テキストの配置
  7. カラーオーバーレイの色
  8. 影やブラー効果の追加
  9. 画像の丸み

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

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

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

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

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

SWELLボタンの特徴
  1. 5つのデザイン
  2. 3色のカラーバリエーション(設定可能)
  3. 全ボタンブロックの色を一括で変更できる
  4. グラデーション設定も可能
  5. テキスト型の広告タグをそのままペーストできる

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

フルワイドブロックは、このように画面幅いっぱいに表示することができます。

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

設定項目

  1. コンテンツのサイズ
  2. 文字のカラー設定
  3. オーバーレイカラー(不透明度)
  4. 画像の設定

その6:タブブロック

タブ1・2で別の文章、画像、ブロックを入力することができます。

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

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

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

キャプション付きブロック
  • 上部にキャプションのついたコンテンツを簡単に作成できるブロックです。
  • 他のブロックと組み合わせることも可能です!
  • デザインパターンは6種類
  • 3色のカラーセットも用意されています。

カラーセットの例1

カラーは自分で設定することが可能です。

カラーセットの例2

キャプションにアイコンを表示させることもできます。

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

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

項目A

項目Aの説明をここに表示

項目B

項目Bの説明をここに表示

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

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

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

項目A

項目Aの説明をここに表示

項目B

項目Bの説明をここに表示

その9:FAQブロック

質問1

質問1の答えを答えましょう!

質問2

質問2に対する答えを入力、

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

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

設定項目

  1. スタイル
  2. アイコンの形
  3. アイコンの色

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

STEP
序盤

まず初めに〜をやりましょう。

STEP
中盤

次にこれをやります。

STEP
終盤

最後にこうすれば完成です。

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

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

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

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

広告タグの呼び出し方

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

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

りょう

次はふきだしですね。

りょう

こんな感じでデザイン・色・方向を変えることができます!

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

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

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

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

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

ブログパーツの使い方

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

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

  • 呼び出す投稿の数
  • どの順番で表示するか(新着・人気順)
  • カテゴリーやタグ・タクソノミーの指定
  • レイアウトの種類
  • 表示する投稿情報の選択(日付・カテゴリーなど…)
  • 投稿IDでの直接指定
  • 除外する投稿の設定

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

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

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

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

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

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

関連記事の呼び出し方

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

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

\ ブログを楽しむ最高のWordPressテーマ/

ブロックエディターに完全対応!

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

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

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

  1. 【投稿】から【新規追加】
  2. 文字を入力or +ボタンでブロックを選択
  3. 装飾を付ける

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

順に解説していきます。

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

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

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

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

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

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

手順3:装飾を付ける

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

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

りょう

ブロックエディターの使い方はこれだけです!

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

\ ブログを楽しむ最高のWordPressテーマ/

ブロックエディターに完全対応!

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

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

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

Classic Editor

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

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

\ ブログを楽しむ最高のWordPressテーマ/

ブロックエディターに完全対応!

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

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

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

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

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

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

\ ブログを楽しむ最高のWordPressテーマ/

ブロックエディターに完全対応!

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる