SWELLの記事パーツ一覧紹介 | SWELLオリジナルブロック編

SWELLでどんな記事パーツが使えるか気になる人へ。ここではSWELLに搭載された記事パーツの中からSWELLのオリジナル記事パーツ(ブロック)全22個を紹介します！

記事パーツのことをWordPressで"ブロック"と呼びます。

解説！

定番系のブロック
FAQ	質問(Q)と答え(A)のセット。「よくある質問」のような場所で活躍。構造化データに対応。
ステップ	STEP１、STEP２、STEP３....という装飾。何かの手順を説明するときに便利。
ふきだし	アイコンとふきだしを表示。キャラクターが喋っているような演出ができる。
枠線・ボックス系のブロック
キャプションボックス	段落や画像などを囲む枠線。上部にキャプション(タイトル)を付けることができる。
リスト入りグループ	リスト(箇条書き)を囲む枠線。
ボタン・リンク系のブロック
バナーリンク	画像からバナー風のリンクが作れる。わざわざバナーを作る必要がない！
SWELLボタン	高機能のボタン機能。クリック率を計測することができる！
関連記事	ブログカード(=カード状の記事リンク)
ギミック系のブロック
アコーディオン	クリックすると隠れていたコンテンツが伸びて登場する仕掛け。記事が長くなるときに使うと便利。
タブ	表示するコンテンツをクリックで切り替えることができる仕掛け。
ABテスト	２パターンのコンテンツをランダムで表示する仕掛け。SWELLボタンブロックや広告タグブロックと組み合わせて使うことでどちらの反応がいいか計測できる。
制限エリア	特定の条件下のみで表示されるコンテンツ。ログイン状態、期間、ページ単位などいろんな条件を指定できる。
呼び出し系のブロック
広告タグ	あらかじめ作成しておいた広告用のパーツ(広告タグ)を呼び出す。
ブログパーツ	あらかじめ作成しておいたパーツ(ブログパーツ)を呼び出す。
ナビゲーション系のブロック
ボックスメニュー	アイコンをタイル状に並べたリンク一覧。よくサイドバーで使われる。
リンクリスト	リンクをリスト状(箇条書き状)に表示する。リンクは自動作成も可能(カテゴリ一覧やタグ一覧など)。
レイアウト系のブロック
リッチカラム	コンテンツを横並べにする。WordPress本体の同機能よりハイスペック！
フルワイド	背景を横幅いっぱいにするデザイン。トップページを作るときに活躍！
記事一覧系のブロック
投稿リスト	記事の一覧を自動で作って挿入。記事の並べ方はいろんな指定ができる。
RSS	他サイトの更新情報を記事一覧で挿入。
その他ブロック
説明リスト(DL)	(WordPress本体には備わっていない)HTMLの記述リスト(DL)が使用できる。
商品レビュー	商品の名前、写真、メリット、デメリットなどをセットで表示してくれる。レビュー記事で活躍。構造化データに対応。

タグの見方

• 構造化データ対応：構造化データに対応
• 上位互換：WordPress本体に似た機能があるがそれより機能が上のブロック

定番系のブロック

まずは定番系のブロックを紹介します。いろんなテーマで見かけるブロックですがSWELLでももちろん用意されています。

FAQブロック構造化データ対応

質問(Q)と答え(A)をセットで表示するブロックです。「よくある質問」のような場所で活躍します。

デザインは４種類あります。

SWELLのFAQブロックのいいところは質問のHTMLタグをh2、h3、h4、dtに変更できるところです。

さらに構造化データにも対応。質問と答えのセットを自動で構造化データに変換してくれます(普通は手作業でコードを作り貼り付ける)。

ステップブロック

STEP１、STEP２、STEP３....という装飾です。何かの手順を説明するときに便利です。

デザインは３種類あります。

「STEP」という箇所は好きな文字に変更可能です。

STEPに続くタイトル部分のHTMLタグをh2、h3、h4、divなどに変更できます。これはうれしい配慮です！

ふきだしブロック

アイコンの横にふきだしを表示。キャラクターが喋っているような演出ができます。アイコンを互い違いにすれば会話の演出もできますね。

デザインは２種類あります(発言 心の声)。

AFFINGERとの比較

AFFINGERにもふきだしブロックはあります。ただし登録できるアイコン画像は10個まで。それ以上登録したい場合は別売りプラグインを購入しなければなりません。

枠線・ボックス系のブロック

枠線・ボックス系のブロックです。重要な部分や主張したい部分を目立たせたいときに活躍します！

キャプションボックスブロック

キャプション(題名)付きの枠線です。段落や画像などコンテンツを囲めます。

デザインは７種類(デフォルト 、小、枠上、枠上２、枠内、浮き出し、内テキスト)。

リスト入りグループブロック

リスト(箇条書き)専用の枠線です。

デザインは８種類。

ボタン・リンク系のブロック

ボタン・リンク系のブロックです。

バナーリンクブロック

バナーとは文字入りの画像のことです。このバナーリンクブロックは素の画像の上に擬似的に文字を載せることで手軽にバナー風の画像を作ってくれます。わざわざバナー画像を作る必要はありません！

SWELLボタンブロック上位互換

高機能なボタン機能です(WordPresssにもボタン機能が用意されていますがそれよりもはるかに高機能！)。

ボタンが表示された回数やクリック率を測定することができます。また、挿入がめんどくさいアフィリエイトコードもまるごとペーストできる機能も備わっています(とてもありがたい！)。

デザインは５種類。

関連記事ブロック

カード状の記事リンク(ブログカード)です。合わせて読みたい記事を紹介するときに便利です。

URLをペーストするだけでサムネイル画像やタイトルなどを拾ってきて表示してくれます。内部リンクはもちろんのこと外部リンクにも対応しているのが嬉しいところ！

ギミック系のブロック

ギミック(仕掛け)系のブロックです。

アコーディオンブロック

クリックすると隠れていたコンテンツが伸びて登場する仕掛け。記事が長くなるときに使うと便利。

タブブロック

表示するコンテンツをクリックで切り替えることができる仕掛け。

ABテストブロック

２パターンのコンテンツをランダムで表示する仕掛け。SWELLボタンブロックや広告タグブロックと組み合わせて使うことでどちらの反応がいいか計測できる。

AFFINGERとの比較

AFFINGERでABテストを行うには別途でプラグインを購入する必要があります。

制限エリアブロック

特定の条件下のみで表示されるコンテンツ。ログイン状態、期間、ページ単位などいろんな条件を指定できる。

呼び出し系のブロック

呼び出し系のブロックです。あらかじめ他の場所で作っておいたパーツを呼び出します。

広告タグブロック

あらかじめ作成しておいた広告用のパーツ(広告タグ)を呼び出す。

ブログパーツ

あらかじめ作成しておいたパーツ(ブログパーツ)を呼び出す。

ナビゲーション系のブロック

ナビゲーション系のブロックです。読者が目的地までたどり着く手助けをします。

ボックスメニューブロック

アイコンをタイル状に並べたリンク一覧です。よくサイドバーで使われます。

デザインは２種類。

リンクリストブロック

リンクを箇条書き風に表示します。たくさんリンクを紹介したいときに便利です。

箇条書きはカテゴリ一覧やタグ一覧などから自動生成することもできます。

デザインは２種類。

レイアウト系のブロック

レイアウト系のブロックです。サイトの見た目をよくしたいときに活躍！

リッチカラムブロック上位互換

コンテンツを横並べにする機能です。WordPress本体にも似た機能がありますがそれよりハイスペックです！

フルワイドブロック

背景を横幅いっぱいにするデザインです。トップページを作るときに活躍します！

記事一覧系のブロック

記事を一覧で表示する系のブロックです。

投稿リストブロック

サイト内の記事から一覧を表示します。どんな記事を表示するかはとても細かい指定ができます。

記事のタイトル部分はh2、h3、h4、divに変更できる神仕様！

デザインは５種類(カード型 、リスト型、リスト型(左右交互)、サムネイル型、テキスト型)。

RSSブロック

RSSを発行している他サイトの記事を一覧で表示します。

こちらも記事のタイトル部分をh2、h3、h4、divなどに変更できます！

こちらのデザインは３種類(カード型 、リスト型、テキスト型)。

その他ブロック

説明リスト(DL)ブロック

HTMLの記述リスト(DL)が使えるブロックです。会社概要などで使われます。記述リスト(DL)はWordPress本体には用意されていないHTMLなので使いたい人にはありがたいブロックです。

こちらのデザインは４種類(デフォルト 、左に線、横並び、縦並び)。

商品レビューブロック構造化データ対応

商品の名前、写真、メリット、デメリットなどをまとめて表示できるブロックです。レビュー記事で活躍します。構造化データに対応。