【SWELLブロック】全20種類の使い方！初心者向けにわかりやすく解説

『SWELLブロック』の機能を知っていますか？

SWELLブロックとは、WordPress5.0から標準搭載されているブロックエディタで使用できるSWELL専用機能です。

「あのサイトと同じ装飾がしたい」「見やすい記事を書きたい」「オシャレなサイトにしたい」

あなたの願望は、機能を知ることで叶えることができます。

本記事ではSWELLブロックの用途と使用例をかんたんに、わかりやすく説明していきます。

▼本記事の内容

SWELLブロックは全部で何種類？

上から順番に説明していくので、先に知りたいことがある方は、目次から選んでください。

SWELLブロックの使い方

SWELLブロックの呼び出し方は、簡単！

キーボード操作で呼び出す方法

ブロック名	呼び出しキーワード
リスト入りグループ	/list.group
ボックスメニュー	/box.menu
SWELLボタン	/swell.buttonまたは/button
キャプションボックス	/cap.block
テーブル	/table
スペーサー	/spacer
ステップ	/step
ふきだし	/balloon
ブログパーツ	/blogpartsまたは/parts
関連記事	/blogcard

かな入力で呼びたい場合は「/+表にあるブロック名」を入力すると呼び出せます。

ローマ字の場合は、表の右側のキーワードで呼べます。

ちなみに、区切りに使用する記号は「.」以外にも「-」「^」「@」「;」「:」が使用できます。

アコーディオンブロックの使い方

アコーディオンブロックとは、タイトルだけ表示して内容を隠したいときに使います。

説明をするときやQ＆Aなど隠したいものがあるときや、中身が長くなってしまった時の省略などに使えます。

アコーディオンブロックの使い方を知りたい方は、こちら

ABテストブロックの使い方

ABテストとは、AとBそれぞれ違うパターンをいれてランダムに表示させることができます。

ABテストブロックの実際の使用例

上記のように、ふたつのパターンを作成すると、この二つのパターンがランダムに表示されるようになります。

しかも、広告タグやSWELLボタンを使用することで、クリック率まで測定することができます。

ABブロックを使用することで、どちらの広告が効果的か測定することができます。

バナーリンクブロックの使い方

バナーリンクとは、画像にリンクを貼り付けられる機能のことです。

バナーリンクブロックの実際の使用例

デフォルト

ブラー効果をつける(背景をぼかせます)

影をつける(画像に影が付きます)

画像を丸くする

このような見た目に設定できます。

そのほかに、「テキストカラー」「オーバーレイカラー」「オーバーレイの不透明度」を変えることができます。

バナーリンクは、リンクに画像を添付することでリンク先を相手にイメージしやすくでき、クリック率を上げることができます。

SWELLボタンブロックの使い方

SWELL専用のボタンブロックです。

SWELLボタンブロックの実際の使用例

デフォルト

立体

キラッと

アウトライン

MOREボタン

SWELLボタンの設定画面から、広告を貼ることができます。

下記の、赤枠内に広告タグ(HTML)を入力することで、ボタン型の広告が作れるようになります。

SWELLボタンは、上記のように装飾でき、クリック率の測定や広告タグをかんたんに貼ることができるボタンです。

SWELLボタンの詳しい使い方は下記の記事にて解説しています。

キャプションボックスブロックの使い方

　キャプションボックスは、見出し・タイトル付きボックスです。

キャプションボックスブロック実際の使用例

デフォルト

小

枠上

枠上２

枠内

浮き出し

内テキスト

上記の７種類のスタイルを選択でき、４種類のカラーがあります。

キャプションボックスは、読者にわかりやすく伝えることができるボックスです。

リッチカラムブロックの使い方

リッチカラムは、カラムの上位相互。
カラムとは、横並びにコンテンツを配置できるブロックです。
リッチカラムは、カラムの幅や、カラムとカラムの間の隙間の幅を変更したり、表示列を変更することができます。

リッチカラムブロックの実際の使用例

画像サイズ(パソコンのみ全サイズ表示されています)

余白なし

カルムの幅の変更

上記のように、画像サイズの変更や、カラム幅・空白の幅が簡単に調整できます。

また、画像にリンクを貼り付けたりもできます。

リッチカラムは、コンテンツをじぶんの好きなようにカスタマイズできる使い勝手抜群のカラムです。

説明リストブロック(DL)の使い方

説明リストは、項目と内容が一つになっているリストです。
(DL)は、ダウンロードという意味ではなく、HTMLのタグで「リスト」という意味を持ちます。

説明リストの実際の使用例

説明リストとは

項目と内容が一つになっているリストです。

上記の
「説明リストとは」が、項目
「項目と内容が一つになっているリストです」が内容の部分になります。

説明リストは、落ち着いたイメージで説明をしたいときに使用できるブロックです。

FAQブロックの使い方

FAQブロックは、Q＆Aをかんたんに装飾できるブロックです。

FAQブロックの実際の使用例

パソコン初心者でも、有料テーマにしたほうがいいですか？

パソコン初心者の方ほど、有料テーマのほうが向いています。

なぜパソコン初心者のほうが、有料テーマに向いているんですか？

かんたんに装飾や、カスタマイズができるように設計されているからです。

FAQブロックは、どんな装飾ができますか？

QとAのアイコンの色や形を変えることができます。

ほかには、どんなことができますか？

スタイルをボックスや線あり、ストライプなどに変更できます。

FAQブロックは、Q＆Aとして使用するブロックです。

フルワイドブロックの使い方

フルワイドボックスとは、横幅いっぱいに使えるブロックです。
トップページのカスタマイズをするときに、かなり役に立つブロックです。

フルワイドブロックの実際の使用例

画像を貼る

　

上記のように、ブロックの形を変えて使用することもできます。

「斜線」「円」「波」「ジグザグ」は、境界線レベルを調整して高さを変えられます。

フルワイドブロックは、トップページを自由にカスタマイズできるブロックです。

ステップブロックの使い方

ステップブロックは、やり方や使い方を説明するときにステップ形式でわかりやすく説明できるブロックです。

　

ステップブロックの実際の使用例

スッテプブロックの使い方

上記のように、スッテプ内の色を変えたり、画像や動画なども貼ることができます。

スタイルも全部で3種類あります。

スッテプブロックは、わかりやすく説明や、順番を明確に伝えることができるブロックです。

タブブロックの使い方

タブとは、札やつまみなどの意味を持ちふせんのように、わかりやすくカテゴリーなどを分けることができます。

タブブロックの実際の使用例

このように、新着記事と人気記事をわかりやすく分けることができます。

タブブロックは、カテゴリーやパターンをまとめられるブロックです。

広告タグブロックの使い方

広告タグは、広告をカスタマイズできます。

広告タグブロックの実際の使用例

バナー型

アフィリエイト型

Amazon型

ランキング型

ダッシュボードから広告タグの設定をすることで、クリック数の測定や、上記のような見た目に
カスタマイズできます。

コードをいじれないわたしが唯一おすすめする活用方法をお伝えします！

広告タグは、テキストリンクがおすすめ！

テキストリンクを「カスタムHTML」で貼ろうとすると、下記のよう離れてしまいます。

しかし、広告タグを使用すると、

上記のように、繋げて使うことができます。

広告タグは、ブロックからかんたんに広告を貼り付けられます。
クリック数の測定や、見た目のカスタマイズもできるのでおすすめです。

詳しい広告タグの使い方は、【SWELL】広告タグの使い方とすぐにできるクリック率の測定方法をご覧ください。

ふきだしブロックの使い方

ふきだしブロックは、ふきだしをかんたんに使えるブロックです。

ふきだしブロックの実際の使用例

発言

心の声

左右の調整

上記のように、枠のパターンや、色などが変えられます。

ふきだしブロックは、ダッシュボードから設定すると

マウスを3クリックするだけで
使えちゃいます!

ふきだしは、毎記事必ず使うので、この短縮はかなり助かっています。

ふきだしブロックは、カスタマイズを設定し保存することでかんたんに使用することができるブロックです。

ふきだしブロックの登録方法や詳しい使いかたは、こちら

ブログパーツブロックの使い方

ブログパーツブロックは、よく使うコンテンツをショートコード化して記事内やウィジェットなどいろいろな場所で使用することができるブロックです。

ブログパーツブロックの実際の使用例

ダッシュボードで登録しておくと、上記のボタンが「5クリック」でできます。

ブログパーツは、投稿をしておくことでいろいろな場所で使いまわせるブロックです。

ブログパーツはとても便利なブロックですが、パソコン初心者には少し難しいブロックです。

パソコン初心者でも理解できる使い方を解説しています。

【初心者向け】ブログパーツの使い方から使用例を紹介しますをご覧ください。

投稿リストブロックの使い方

投稿リストは、自分が書いた記事をカテゴリーやタグ別に自分の好きなようにカスタマイズして表示することができるブロックです。

投稿リストブロックの実際の使用例

カード型

リスト型

リスト型(左右交互)

サムネイル型

テキスト型

上記のように、レイアウトが変更できます。

ほかにも

などもできます。

関連記事ブロックの使い方

関連記事ブロックは、自分の記事や、紹介したい記事のブログカードを作成してくれるブロックです。

関連記事ブロックの実際の使用例

内部リンク

IDやキーワードを入力するだけで選べて作成できます。

外部リンク

URLを入力するだけで、下記のように作成してくれます。

そのほかに、

ことができます。

制限エリアブロックの使い方

制限エリアブロックは、人や期間などを制限できる(決められる)ブロックです。

制限エリアブロックの実際の使用例

ログインしている人だけ、見ることができます。

上には、何も表示されていないですが、実際は

上記のように、画像を入れてます。

視聴できるユーザーを指定もできます。

など、指定できるので有料コンテンツの購入者限定記事を載せたり、外注さんにお願いするときに使用したりもできると思います。

期間も決めることができます。

今だけ！や、期間限定の情報を提供したいときに使えます。

制限エリアブロックは、見せる人を制限したり、期間を制限することで削除のし忘れを防いでくれたり、特定の人だけに見せたいときに使用するブロックです。

RSSブロックの使い方

RSSブロックは、最新の情報や更新情報をまとめてアップしてくれるブロックです。

RSSブロックの実際の使用例

上記のように、記載されます。

記事数は、１～１０まで選べ「カード型」「リスト型」「テキスト型」を選んでカスタマイズできます。

RSSブロックは、企業サイトなどの新着情報やアップデート情報を伝える際に使用されているブロックです。

SWELLのブロックエディタを説明してみて感じたこと。

SWELLブロックは、かんたんに使用できるものも多くあります。

しかし、パソコン初心者には難しいところもありました。

特に、説明リスト(DL)やRSSは意味を調べるのが物凄く大変でした。(笑)

このブログを通じてみなさんの「わからない」を解決していきましょう！