MENU
「保護中」のコンテンツは近日中に開放していきます

【SWELL】超便利な専用ブロック16個の使い方を丁寧に解説【画像付き】

あなた

SWELLって評判いいけど、 便利なのかな?記事を書くときに使えるブロックには、どんなものがあるんだろう?SWELL専用のブロックを見てみたい!

というお悩みを持つ方に、ぜひ読んでほしい記事です。

SWELLは読み手にも書き手にも優しいテーマとなっており、専用ブロックを活用しないのは「もったいない」。

だからこそ、そんな専用ブロックをご紹介したいというわけです。

この記事で分かること
  • SWELL専用ブロックの種類
  • SWELL専用ブロック16個の使い方

ユーザビリティアップや時短効果、結果的にアクセスや収益アップにつながりますので参考にしてみてください。

この記事を書いた人
とおる
とおる
  • エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。ブログ売却も含め1年で1ブログのみ8桁収益経験
  • ブログ運営・YouTube(1300人ほど)・Twitter運用代行・ライター・コンサルなど幅広く活動中
  • 趣味は「筋トレ」「食べ歩き」「ガジェット」「映画鑑賞」など
目次

SWELL専用ブロック16個の紹介

SWELL専用ブロック16個

SWELL専用ブロックは、2021年8月現在で上記の16個です。

それぞれの概要と使い方を解説していきます。

1.RSS

RSSは、特定のメディア最新情報を自動的に取得して表示できるブロックです。。

主に、まとめブログで使用されているもので、通常のブログ運営では使用頻度は低いでしょう。

とおる

必要なら使うといった感じです。

RSSの使い方

STEP
RSSブロックを呼び出す
RSS使い方1
このアイコン覚えておきましょう

WordPress独自のRSSブロックとは違うので注意。SWELLの方がアイコン太め。



呼び出すと、こんなブロックが出てきます。

RSS使い方2
STEP
RSSフィードのURLを取得する

下記のようにRSSアイコンの上で、右クリックして「リンクをコピー」します。

RSS使い方3
STEP
リンクを入力して反映されれば完了

取得したリンクを入力し、下記のように記事が取得できればOKです。

RSS使い方4

リンクだけになる場合は、右のブロック設定にある「RSSフィードのURL」に入力することで反映されます。

RSS使い方5



投稿数・レイアウト・表示設定・カラム数などは好みで設定してみましょう。

RSS使い方6
RSS使い方7

2.関連記事

関連記事は、ブログカード型やテキスト型の関連記事を表示できるブロックです。

ブログ内の回遊性(他のコンテンツも見てもらいやすくなる)を高めるのに有効な手段です。

とおる

ぜひ活用して頂きたいブロックです。

関連記事の使い方

STEP
関連記事ブロックを呼び出す
関連記事使い方1



呼び出すと、こんなブロックが出てきます。

関連記事使い方2
STEP
キーワードで検索する

IDは確認するのが面倒なので、表示させたい記事のキーワードを検索しましょう。

すると下記のように記事候補が出ますので、選択しましょう。

関連記事使い方3
STEP
表示させたい記事が表示されれば完了

下記のように記事が表示できればOKです。

カード型の関連記事は、URLをそのまま貼り付けても上記のように表示されます。


テキストリンクだけで表示したい場合は、右のブロック設定から「テキストリンクで表示する」にチェックを入れればOKです。

関連記事使い方4



連続で表示させたい場合は、下に同じブロック追加で設定すれば下記のように増やせます。

3.投稿リスト

投稿リストは、ブログ内の記事を任意の条件で表示できるブロックです。

記事下に関連記事コンテンツがあるので、本文に投稿リストを入れることは少ないです。

とおる

本文に入れるとしたら関連記事くらいですが、状況次第では入れてもいいでしょう。

投稿リストの使い方

STEP
投稿リストブロックを呼び出す
投稿リスト使い方1



呼び出すと、こんなブロックが出てきます。

投稿リスト使い方2

ブロックを表示した時点で「カード型・新着順・投稿数3」のリストで良ければ完成です。

レイアウトや表示数など変更したい場合は、右のブロック設定「Setting」で好みの設定にしましょう。

これが正解って部分はないので、色々触ってみてください。

投稿リスト使い方3
投稿リスト使い方4
投稿リスト使い方5



「Pickup」では、個別に表示させたい記事ID、カテゴリー、タグなどの設定ができます。

こちらも正解はないので、必要なら好みで表示させてみましょう。

投稿リスト使い方6
投稿リスト使い方7
投稿リスト使い方8

4.ブログパーツ

ブログパーツは、事前に設定したブロックの組み合わせを簡単に呼び出せるブロックです。

この記事を書いた人
とおる
とおる
  • エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。ブログ売却も含め1年で1ブログのみ8桁収益経験
  • ブログ運営・YouTube(1300人ほど)・Twitter運用代行・ライター・コンサルなど幅広く活動中
  • 趣味は「筋トレ」「食べ歩き」「ガジェット」「映画鑑賞」など

CTA(コールトゥアクション)やプロフィールなど、ブロックを組み合わせてテンプレ化させておくと時短になります。

とおる

僕はリード文の下のリード文は、ブログパーツで組み合わせて表示させています。

ブログパーツの作り方

ブログパーツは、事前にブロックを組み合わせて作って、それを呼び出す形で使用します。

STEP
ダッシューボード→ブログパーツ→新規追加
ブログパーツ使い方1
STEP
記事を書く時のように必要なブロックを組み合わせて「公開」する
ブログパーツ使い方2
STEP
エディターでブログパーツブロックを呼び出す
ブログパーツ使い方3



呼び出すと、こんなブロックが出てきます。

ブログパーツ使い方4
STEP
作成したブログパーツを選択して表示
ブログパーツ使い方5
ブログパーツ使い方6

ブログパーツは、ブロックの呼び出し以外に、ショートコードでも呼び出せます。

さらに、設置したページが分かるようになっていますので、どこに設置しているか一目瞭然です。

ブログパーツ使い方7

5.ふきだし

ふきだしは、自身の心の声など記事のアクセントとして活用できるブロックです。

ズレメガネ

メガネメガネ

自分や誰かとのやり取りを表現するのに、とても効果的なブロックです。

とおる

僕は、ふきだしを多用するので重宝しています。

ふきだしの使い方

ふきだしは、エディターからでも設定できます。

ですが、毎回設定するのは面倒です。

使用頻度の高い「ふきだし」に関しては、事前に設定しておくと時短になります。

STEP
ダッシュボード→ふきだし→新規追加
ふきだし使い方1
STEP
ふきだし設定をして公開

ふきだし名やデザインなどを、好みで設定したら公開します。

ふきだし使い方2
STEP
エディターでふきだしブロックを呼び出す
ふきだし使い方3



呼び出すと、こんなブロックが出てきます。

ふきだし使い方4
STEP
作成した「ふきだし」をブロック設定から選択して表示
ふきだし使い方5

ふきだしセット・形・カラー・アイコン画像などの変更は、右のブロック設定でも簡単に変更できます。

ふきだし使い方6
ふきだし使い方7
ふきだし使い方8

6.広告タグ

広告タグは、「アフィリエイト型」などの広告を簡単に表示できるブロックです。

広告コードを、そのまま使用して作ることができ、簡単に見やすい広告タグを呼び出せます。

とおる

見やすくて簡単に設置できるのでオススメです。

広告タグの作り方

広告タグは、事前に作って置く必要があります。

STEP
ダッシュボード→広告タグ→新規追加
広告タグ使い方
STEP
広告設定をする

広告タイプは5種類あり、それぞれ独自の設定ができます。

難しい設定はないので、個々にプレビューを見ながら好きなように設定して公開しましょう。

広告タグ使い方0

テキスト型以外はボタンを2つ設置できますが、ぶっちゃけ1つで十分です。

STEP
エディターで広告タグブロックを呼び出す
広告タグ使い方1



呼び出すと、こんなブロックが出てきます。

広告タグ使い方2
STEP
作成した「広告タグ」を選択して表示
広告タグ使い方3
広告タグ使い方4

テキスト型に関しては、ブロックで呼び出すことができません。

ダッシュボード→広告タグで表示される、ショートコードをエディターに貼り付ければ表示されます。

広告タグ使い方5



さらに広告タグでは、ボタンごとのクリック率も計測できます。

表示させる文章などの反応を見れますので、ぜひ活用してみてください。

広告タグ使い方6

7.タブ

タブは、1つのスペースで複数の情報を表示できるブロックです。

タブ1の内容

当ブログのTOPページにある「新着・人気記事」や「おすすめカテゴリー」も、タブを活用しています。

とおる

個人的には記事内で活用することははないですが、複数の情報をスマートに表示したい時に便利です。

タブの使い方

STEP
タブブロックを呼び出す
タブの使い方1



呼び出すと、こんなブロックが出てきます。

タブの使い方2
STEP
タブ名と内容を記載
タブの使い方3

「+」マークでタブを増やせます。

このままで良ければ、これで完了です。

スタイル・タブサイズ・カラー・ボーダーを変更したい場合は、右のブロック設定でできます。

とおる

個人的にスタイルは「ふきだし」で、タブサイズはPC・SPともに「端まで並べる」がオススメです。

タブの使い方4
タブの使い方5
タブの使い方6

8.ステップ

ステップは、何らかの解説をする際に、流れを分かりやすく表示できるブロックです。

STEP
当記事でも

ステップを活用して

STEP
ブロックの使い方を

解説しています。

見出しで区切るのもいいですが、見出しが多くなりすぎてもゴチャゴチャします。

とおる

ステップで解説すると、スッキリするのでオススメです。

ステップの使い方

STEP
ステップブロックを呼び出す
ステップ使い方1



呼び出すと、こんなブロックが出てきます。

STEP
STEP
ステップ使い方2
STEP
タイトル記載とステップ内のブロックを必要に応じて追加
ステップ使い方3
STEP
ステップが必要なら下の「+」で追加
ステップ使い方4

このデザインのままで良ければ、これで完了です。

タイトルデザインを変更したい場合

タイトル部分をクリックして、右のブロック設定で文字や色など変更できます。

ステップ使い方5



ステップ全体のデザインを変更したい場合
ブロック右上の「親ブロックを選択」をクリックします。

ステップ使い方6



全体的なデザイン変更ができます。

好みに応じて変更してみてください。

ステップ使い方7

9.フルワイド

フルワイドは、 幅いっぱいにコンテンツを表示できるブロックです。

これがフルワイドです

こんな感じで、幅いっぱいに目立つコンテンツを簡単に設置できます。


こんな感じで背景画像も挿入できます


こんな感じの背景効果も可能(PCのみ)

これはFixed Background効果です。

背景画像を固定することで立体感を演出できます。


こんな感じの背景効果も可能(PCのみ)

これはパララックス効果です。

さりげない視差効果で立体感を演出できます。


通常の記事でも活用できますが、LPやTOPページで活用すると効果的です。

とおる

オシャレなので、TOPページに設置しています。

フルワイドの使い方

STEP
フルワイドブロックを呼び出す
フルワイド使い方1


呼び出すと、こんなブロックが出てきます。

フルワイド使い方2
STEP
見出しやコンテンツを追加
フルワイド使い方3

このデザインのままで良ければ、これで完了です。

背景色のみでデザイン設定する場合

右のブロック設定でコンテンツサイズ・上下の余白・カラー・境界線の種類など好みで設定できます。

フルワイド使い方4



特に「境界線の形状」を変更すると、一気にオシャレ感が増すのでオススメです。

フルワイド使い方5



背景に画像を設定してデザイン設定する場合

背景色を設定せずに「背景画像の設定」から、背景画像を設定可能です。

境界線の形状を変更することができませんが、背景効果を追加することができます。

フルワイド使い方6

10.FAQ

FAQは、質問と回答を分かりやすく表示させることができるブロックです。

リンゴは果物ですか?

リンゴは果物です。

ドリアンは臭いですか?

ドリアンは臭いです。

LPなどで活用できます。

とおる

こういうQ&Aの表示は見やすくていいですね。

FAQの使い方

STEP
FAQブロックを呼び出す
FAQ使い方1



呼び出すと、こんなブロックが出てきます。

FAQ使い方2
STEP
質問と回答を記載
FAQ使い方3

このデザインのままで良ければ、これで完了です。

質問を追加したい場合は、下の「+」をクリックします。

デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。

FAQ使い方4



スタイルやアイコンの形・カラーを好みで設定できます。

FAQ使い方5
FAQ使い方6

11.説明リスト

説明リストは、タイトルと説明部分を分けて見やすく表示できるブロックです。

ここにタイトル

ここに説明

ここにタイトル

ここに説明

とおる

僕は使っていませんが、見やすく何かを説明する時に活用してみてください。

説明リストの使い方

STEP
説明リストブロックを呼び出す
説明リスト使い方1



呼び出すと、こんなブロックが出てきます。

説明リスト使い方2
STEP
タイトルと説明を記載
説明リスト使い方3

このデザインのままで良ければ、これで完了です。

説明を追加したい場合は、下の「+」をクリックします。

デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。

説明リスト使い方4



スタイルを好みで設定できます。

説明リスト使い方5

12.キャプション付きブロック

キャプション付きブロックは、タイトル付きのボックスを表示させてくれるブロックです。

ここにタイトル

ここにブロックを入れられる

このボックスは、当記事のリード文(冒頭文)にも使用しています。

リストを囲ったり何かの説明をする際に使用するなど、その部分を見やすく強調できます。

とおる

個人的に使用頻度の多いブロックです。

キャプション付きブロックの使い方

STEP
キャプション付きブロックを呼び出す
キャプション付きブロック使い方1



呼び出すと、こんなブロックが出てきます。

キャプション付きブロック使い方2
STEP
タイトルや文章などを入力して完了

キャプション部分にタイトル、ボックス内に好きなブロックを挿入すればOKです。

キャプション付きブロック使い方3

ボックスのスタイル・色・キャプション部分のアイコンを変更したい場合は、右のブロック設定を好みの設定にできます。

キャプション付きブロック使い方4
キャプション付きブロック使い方5

13.SWELLボタン

SWELLボタンは、テキストリンクの広告タグを直接入力でき、クリック率まで計測できるブロックです。

SWELLボタンは、当ブログでも使用頻度は高いです。

とおる

アフィリエイトするなら、クリック率計測は必須なので重宝します。

SWELLボタンの使い方

STEP
SWELLボタンブロックを呼び出す
SWELLボタン使い方



呼び出すと、こんなブロックが出てきます。

SWELLボタン使い方3
STEP
文章とリンクを入力

ボタン部分に文章とリンクを入力すれば完了です。

SWELLボタン使い方4

SWELLボタンのスタイル・色・広告タグ・クリック率計測などを設定する場合は、右のブロック設定を好みの設定にしましょう。

SWELLボタン使い方5
とおる

個人的にオススメのスタイルは、下記の「キラッと」です。



「クリック率を計測する」はONにすることをオススメします。

SWELLボタン使い方6

とおる

こんな感じで計測してくれるので、 非常にありがたいですね。

SWELLボタンクリック率



テキストタイプの広告タグは「広告タグを直接入力」にコピーすれば直接反映されます。

SWELLボタン使い方7

14.バナーリンク

バナーリンクは、任意の画像を背景に設定できる簡易バナーリンクのブロックです。

自社商品など目立たせたい場合に活用できます。

バナーリンクの使い方

STEP
バナーリンクブロックを呼び出す
バナーリンク



呼び出すと、こんなブロックが出てきます。

バナーリンク使い方1



画像を追加すると、こんな感じです。

バナーリンク使い方2
STEP
テキストとリンクを入力
バナーリンク使い方3

このままで良ければ、これで完了です。

バナーの高さ・Altテキスト・画像加工(ブラー・影・丸み)などを設定する場合は、右のブロック設定でおこなえます。

バナーリンク使い方4



テキストやオーバーレイ(画像の上に重ねられるカラー)・不透明度も変更できます。

バナーリンク使い方5

好きなように設定可能ですが、主張したい文字など見づらくならないようにしましょう。

15.ABテスト

ABテストは、ランダムで任意のコンテンツを表示してくれるブロックです。

2つの案がある時に、反応を比べられます。

とおる

ページを更新すると、別の文字が見れるかも・・・

ABテストの使い方

STEP
ABテストブロックを呼び出す
ABテスト使い方1



呼び出すと、こんなブロックが出てきます。

ABテスト使い方2
STEP
任意のコンテンツを追加する
ABテスト使い方3
ABテスト使い方4

これで完了です。

あくまでランダム表示だけであり、このブロックだけで計測はできません。

「SWELLボタン」や「広告タグ」など、計測できるブロックとの活用がベストです。

16.アコーディオン

アコーディオンは、メインテキストにサブテキストなどのコンテンツを格納できるブロックです。

なんらかの解説やQ&Aを、スマートに表示できます。

とおる

個人的にはFAQより、Q&A表示はこちらのほうが好きです。

アコーディオンの使い方

STEP
アコーディオンブロックを呼び出す
アコーディオン



呼び出すと、こんなブロックが出てきます。

アコーディオン使い方2
STEP
テキストを入力する
アコーディオン使い方3

このままで良ければ、これで完了です。

スタイルや右端のアイコン変更は、 右のブロック設定でおこなえます。

アコーディオン使い方4

SWELLブロックを有効活用しよう

今回のまとめ
  • SWELLブロックは便利
  • SWELLブロックは素晴らしい
  • SWELLブロックは活用すべし
有効活用しよう

16個ご紹介してきましたが、ぶっちゃけ全部は使わないかも・・・

ですが、ふとした時に「あ、このブロック使えるやん」って、かゆいところに手が届くブロック達です。

ブロガー目線で素晴らしいブロックを実装してくれるSWELL・・・素敵やん。

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

役に立ったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる