あなたSWELLって評判いいけど、 便利なのかな？記事を書くときに使えるブロックには、どんなものがあるんだろう？SWELL専用のブロックを見てみたい！
というお悩みを持つ方に、ぜひ読んでほしい記事です。
SWELLは読み手にも書き手にも優しいテーマとなっており、専用ブロックを活用しないのは「もったいない」。
だからこそ、そんな専用ブロックをご紹介したいというわけです。
- SWELL専用ブロックの種類
- SWELL専用ブロック16個の使い方
ユーザビリティアップや時短効果、結果的にアクセスや収益アップにつながりますので参考にしてみてください。
- ブログ実績：エンタメ系ブログ最高150万PV超＆当ブログ最高10万PV超。
- 仕事：メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味：筋トレ・食べ歩き・映画鑑賞など
SWELL専用ブロック16個の紹介
SWELL専用ブロックは、2021年8月現在で上記の16個です。
それぞれの概要と使い方を解説していきます。
1.RSS
RSSは、特定のメディア最新情報を自動的に取得して表示できるブロックです。。
RSSフィードのURLが正しくありません。
主に、まとめブログで使用されているもので、通常のブログ運営では使用頻度は低いでしょう。
とおる必要なら使うといった感じです。
RSSの使い方
WordPress独自のRSSブロックとは違うので注意。SWELLの方がアイコン太め。
呼び出すと、こんなブロックが出てきます。
下記のようにRSSアイコンの上で、右クリックして「リンクをコピー」します。
取得したリンクを入力し、下記のように記事が取得できればOKです。
リンクだけになる場合は、右のブロック設定にある「RSSフィードのURL」に入力することで反映されます。
投稿数・レイアウト・表示設定・カラム数などは好みで設定してみましょう。
2.関連記事
関連記事は、ブログカード型やテキスト型の関連記事を表示できるブロックです。
ブログ内の回遊性（他のコンテンツも見てもらいやすくなる）を高めるのに有効な手段です。
とおるぜひ活用して頂きたいブロックです。
関連記事の使い方
呼び出すと、こんなブロックが出てきます。
IDは確認するのが面倒なので、表示させたい記事のキーワードを検索しましょう。
すると下記のように記事候補が出ますので、選択しましょう。
下記のように記事が表示できればOKです。
テキストリンクだけで表示したい場合は、右のブロック設定から「テキストリンクで表示する」にチェックを入れればOKです。
連続で表示させたい場合は、下に同じブロック追加で設定すれば下記のように増やせます。
3.投稿リスト
投稿リストは、ブログ内の記事を任意の条件で表示できるブロックです。
記事下に関連記事コンテンツがあるので、本文に投稿リストを入れることは少ないです。
とおる本文に入れるとしたら関連記事くらいですが、状況次第では入れてもいいでしょう。
投稿リストの使い方
呼び出すと、こんなブロックが出てきます。
レイアウトや表示数など変更したい場合は、右のブロック設定「Setting」で好みの設定にしましょう。
これが正解って部分はないので、色々触ってみてください。
「Pickup」では、個別に表示させたい記事ID、カテゴリー、タグなどの設定ができます。
こちらも正解はないので、必要なら好みで表示させてみましょう。
4.ブログパーツ
ブログパーツは、事前に設定したブロックの組み合わせを簡単に呼び出せるブロックです。
- ブログ実績：エンタメ系ブログ最高150万PV超＆当ブログ最高10万PV超。
- 仕事：メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味：筋トレ・食べ歩き・映画鑑賞など
CTA（コールトゥアクション）やプロフィールなど、ブロックを組み合わせてテンプレ化させておくと時短になります。
とおる僕はリード文の下のリード文は、ブログパーツで組み合わせて表示させています。
ブログパーツの作り方
ブログパーツは、事前にブロックを組み合わせて作って、それを呼び出す形で使用します。
呼び出すと、こんなブロックが出てきます。
ブログパーツは、ブロックの呼び出し以外に、ショートコードでも呼び出せます。
さらに、設置したページが分かるようになっていますので、どこに設置しているか一目瞭然です。
5.ふきだし
ふきだしは、自身の心の声など記事のアクセントとして活用できるブロックです。
ズレメガネメガネメガネ
自分や誰かとのやり取りを表現するのに、とても効果的なブロックです。
とおる僕は、ふきだしを多用するので重宝しています。
ふきだしの使い方
ふきだしは、エディターからでも設定できます。
ですが、毎回設定するのは面倒です。
使用頻度の高い「ふきだし」に関しては、事前に設定しておくと時短になります。
ふきだし名やデザインなどを、好みで設定したら公開します。
呼び出すと、こんなブロックが出てきます。
ふきだしセット・形・カラー・アイコン画像などの変更は、右のブロック設定でも簡単に変更できます。
6.広告タグ
広告タグは、「アフィリエイト型」などの広告を簡単に表示できるブロックです。
広告コードを、そのまま使用して作ることができ、簡単に見やすい広告タグを呼び出せます。
とおる見やすくて簡単に設置できるのでオススメです。
広告タグの作り方
広告タグは、事前に作って置く必要があります。
広告タイプは5種類あり、それぞれ独自の設定ができます。
難しい設定はないので、個々にプレビューを見ながら好きなように設定して公開しましょう。
呼び出すと、こんなブロックが出てきます。
テキスト型に関しては、ブロックで呼び出すことができません。
ダッシュボード→広告タグで表示される、ショートコードをエディターに貼り付ければ表示されます。
さらに広告タグでは、ボタンごとのクリック率も計測できます。
表示させる文章などの反応を見れますので、ぜひ活用してみてください。
7.タブ
タブは、1つのスペースで複数の情報を表示できるブロックです。
タブ1の内容
当ブログのTOPページにある「新着・人気記事」や「おすすめカテゴリー」も、タブを活用しています。
とおる個人的には記事内で活用することははないですが、複数の情報をスマートに表示したい時に便利です。
タブの使い方
呼び出すと、こんなブロックが出てきます。
このままで良ければ、これで完了です。
スタイル・タブサイズ・カラー・ボーダーを変更したい場合は、右のブロック設定でできます。
とおる個人的にスタイルは「ふきだし」で、タブサイズはPC・SPともに「端まで並べる」がオススメです。
8.ステップ
ステップは、何らかの解説をする際に、流れを分かりやすく表示できるブロックです。
ステップを活用して
解説しています。
見出しで区切るのもいいですが、見出しが多くなりすぎてもゴチャゴチャします。
とおるステップで解説すると、スッキリするのでオススメです。
ステップの使い方
呼び出すと、こんなブロックが出てきます。
このデザインのままで良ければ、これで完了です。
タイトルデザインを変更したい場合
タイトル部分をクリックして、右のブロック設定で文字や色など変更できます。
ステップ全体のデザインを変更したい場合
ブロック右上の「親ブロックを選択」をクリックします。
全体的なデザイン変更ができます。
好みに応じて変更してみてください。
9.フルワイド
フルワイドは、 幅いっぱいにコンテンツを表示できるブロックです。
これがフルワイドです
こんな感じで、幅いっぱいに目立つコンテンツを簡単に設置できます。
こんな感じで背景画像も挿入できます
こんな感じの背景効果も可能（PCのみ）
これはFixed Background効果です。
背景画像を固定することで立体感を演出できます。
こんな感じの背景効果も可能（PCのみ）
これはパララックス効果です。
さりげない視差効果で立体感を演出できます。
通常の記事でも活用できますが、LPやTOPページで活用すると効果的です。
とおるオシャレなので、TOPページに設置しています。
フルワイドの使い方
呼び出すと、こんなブロックが出てきます。
このデザインのままで良ければ、これで完了です。
背景色のみでデザイン設定する場合
右のブロック設定でコンテンツサイズ・上下の余白・カラー・境界線の種類など好みで設定できます。
特に「境界線の形状」を変更すると、一気にオシャレ感が増すのでオススメです。
背景に画像を設定してデザイン設定する場合
背景色を設定せずに「背景画像の設定」から、背景画像を設定可能です。
境界線の形状を変更することができませんが、背景効果を追加することができます。
10.FAQ
FAQは、質問と回答を分かりやすく表示させることができるブロックです。
LPなどで活用できます。
とおるこういうQ&Aの表示は見やすくていいですね。
FAQの使い方
呼び出すと、こんなブロックが出てきます。
このデザインのままで良ければ、これで完了です。
質問を追加したい場合は、下の「+」をクリックします。
デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。
スタイルやアイコンの形・カラーを好みで設定できます。
11.説明リスト
説明リストは、タイトルと説明部分を分けて見やすく表示できるブロックです。
- ここにタイトル
-
ここに説明
- ここにタイトル
-
ここに説明
とおる僕は使っていませんが、見やすく何かを説明する時に活用してみてください。
説明リストの使い方
呼び出すと、こんなブロックが出てきます。
このデザインのままで良ければ、これで完了です。
説明を追加したい場合は、下の「+」をクリックします。
デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。
スタイルを好みで設定できます。
12.キャプション付きブロック
キャプション付きブロックは、タイトル付きのボックスを表示させてくれるブロックです。
ここにブロックを入れられる
このボックスは、当記事のリード文（冒頭文）にも使用しています。
リストを囲ったり何かの説明をする際に使用するなど、その部分を見やすく強調できます。
とおる個人的に使用頻度の多いブロックです。
キャプション付きブロックの使い方
呼び出すと、こんなブロックが出てきます。
キャプション部分にタイトル、ボックス内に好きなブロックを挿入すればOKです。
ボックスのスタイル・色・キャプション部分のアイコンを変更したい場合は、右のブロック設定を好みの設定にできます。
13.SWELLボタン
SWELLボタンは、テキストリンクの広告タグを直接入力でき、クリック率まで計測できるブロックです。
SWELLボタンは、当ブログでも使用頻度は高いです。
とおるアフィリエイトするなら、クリック率計測は必須なので重宝します。
SWELLボタンの使い方
呼び出すと、こんなブロックが出てきます。
ボタン部分に文章とリンクを入力すれば完了です。
SWELLボタンのスタイル・色・広告タグ・クリック率計測などを設定する場合は、右のブロック設定を好みの設定にしましょう。
とおる個人的にオススメのスタイルは、下記の「キラッと」です。
「クリック率を計測する」はONにすることをオススメします。
とおるこんな感じで計測してくれるので、 非常にありがたいですね。
テキストタイプの広告タグは「広告タグを直接入力」にコピーすれば直接反映されます。
14.バナーリンク
バナーリンクは、任意の画像を背景に設定できる簡易バナーリンクのブロックです。
自社商品など目立たせたい場合に活用できます。
バナーリンクの使い方
呼び出すと、こんなブロックが出てきます。
画像を追加すると、こんな感じです。
このままで良ければ、これで完了です。
バナーの高さ・Altテキスト・画像加工（ブラー・影・丸み）などを設定する場合は、右のブロック設定でおこなえます。
テキストやオーバーレイ（画像の上に重ねられるカラー）・不透明度も変更できます。
15.ABテスト
ABテストは、ランダムで任意のコンテンツを表示してくれるブロックです。
2つの案がある時に、反応を比べられます。
とおるページを更新すると、別の文字が見れるかも・・・
ABテストの使い方
呼び出すと、こんなブロックが出てきます。
これで完了です。
あくまでランダム表示だけであり、このブロックだけで計測はできません。
「SWELLボタン」や「広告タグ」など、計測できるブロックとの活用がベストです。
16.アコーディオン
アコーディオンは、メインテキストにサブテキストなどのコンテンツを格納できるブロックです。
なんらかの解説やQ&Aを、スマートに表示できます。
とおる個人的にはFAQより、Q&A表示はこちらのほうが好きです。
アコーディオンの使い方
呼び出すと、こんなブロックが出てきます。
このままで良ければ、これで完了です。
スタイルや右端のアイコン変更は、 右のブロック設定でおこなえます。
SWELLブロックを有効活用しよう
16個ご紹介してきましたが、ぶっちゃけ全部は使わないかも・・・
ですが、ふとした時に「あ、このブロック使えるやん」って、かゆいところに手が届くブロック達です。
ブロガー目線で素晴らしいブロックを実装してくれるSWELL・・・素敵やん。
コメント