SWELL(スウェル)

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

SWELLの完全オリジナルブロック 全22個を紹介!

有料テーマSWELLの購入をお考えの方へ。SWELLではどんな記事パーツがあるか気になると思います。そこで今回はSWELLに搭載された記事パーツのうちSWELLの完全オリジナルのもの全22個を紹介します!

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

解説!

ブロックには3つの種類があります。

  1. 機能とデザインがWordPressが用意したもの
  2. 機能はWordPress、デザインはテーマ側が用意したもの
  3. 機能もデザインもテーマ側が用意したもの

(採点競技で例えると、2は「規定演技」、3は「自由演技」みたいなイメージです)

今回紹介するのは3番目の機能もデザインもテーマ独自の「テーマオリジナルのブロック」についてです。完全オリジナルなのでテーマの独自性が最も出る部分であります。

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

分類は当サイトによるものです。

タグ

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

定番系のブロック

まずは定番系のブロックです。他のテーマでもおなじみのブロックですが当然SWELLにも用意されています。

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

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

デザインは4種類!

デザイン(スタイル)はシンプル線ありボックスストライプの4種類があります。

HTMLタグを変更可能!

SWELLのFAQブロックは質問のHTMLタグをh2、h3、h4、dtに変更できます!これはとてもありがたい配慮だと思います!

構造化データに対応!

さらに構造化データにも対応しています。普通は手作業でコードを作って貼り付けなきゃいけないところを自動で行ってくれるのです。楽ちん。

ステップブロック

STEP1、STEP2、STEP3....といった装飾です。何かの手順を説明するときに便利!

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

デザインは3種類!

デザイン(スタイル)はデフォルトビッグスモールの3種類があります。

HTMLタグを変更可能!

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

ふきだしブロック

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

デザインは2種類!

デザイン(スタイル)は発言心の声の2種類があります。

AFFINGERとの比較

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

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

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

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

題名(キャプション)が付いている枠線です。題名は変更可能。枠線で段落や画像などなんでも囲めます。

デザインは7種類!

デザイン(スタイル)はデフォルト枠上枠上2枠内浮き出し内テキストの7種類があります。

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

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

デザインは8種類。

ボタン・リンク系のブロックを紹介します。

バナーリンクブロック

画像の上に文字を載せて擬似的にバナーを作ってくれます。わざわざ画像編集ソフトでバナー画像を作る必要がありません!

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

WordPresss側にもボタンパーツは用意されていますがそれよりもハイスペックなボタン機能です。

SWELLのボタンは表示された回数やクリック率を測定することができます。また、初心者には挿入方法がわかりにくいアフィリエイトコードをまるごとペーストできる機能も備わっています(とてもありがたい!)。

デザインは7種類!

デザイン(スタイル)はノーマル立体(カーソルを合わせるとボタンを押したような演出)キラッとアウトラインMOREボタンの5種類があります。

SWELLボタンブロック:デザイン(MOREボタン)
MOREボタン

関連記事ブロック

一般的にブログカードと言われたりするカード状の記事リンクです。合わせて読みたいような記事を紹介するときに便利です。

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

デザインは3種類!

デザイン(スタイル)はデフォルトスリムテキストの3種類があります。

AFFINGERとの比較

AFFINGERにもブログカードはあります。しかし内部リンクにしか対応していません。外部リンクをブログカードで表示するには別売りのプラグインを購入する必要があります。

ギミック系のブロック

ギミック(仕掛け)系のブロックを紹介します。

アコーディオンブロック

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

デザインは4種類!

デザイン(スタイル)はデフォルトシンプル囲い枠メインカラーの4種類があります。

HTMLタグを変更可能!

タイトル("詳しく見る"の部分)のHTMLタグをh2h3h4spanなどに変更できます。

タブブロック

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

デザインは3種類!

デザイン(スタイル)はノーマルふきだし下線の3種類があります。

ABテストブロック

ある人にはAのコンテンツ、ある人にはBのコンテンツというようにコンテンツが2パターンのうちからランダムでユーザーに表示されます。クリック率を計測できるSWELLボタンブロックや広告タグブロックと組み合わせることでどちらのコンテンツが反応がいいか実験できます。

AFFINGERとの比較

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

制限エリアブロック

コンテンツの表示、非表示を条件(時間、ログイン状態、ページ単位など)で指定することができます。例えばキャンペーンが終わった瞬間に非表示なるキャンペーン紹介文など。

呼び出し系のブロック

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

広告タグブロック

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

ブログパーツ

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

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

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

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

デザインは2種類!

デザイン(スタイル)は標準塗りの2種類があります。

リンクリストブロック

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

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

デザインは2種類!

デザイン(スタイル)はデフォルトボタンの2種類があります。

レイアウト系のブロック

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

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

コンテンツを横並べにする機能です。WordPress本体にも似た機能がありますがそれより高機能です!細かい指定ができます。

フルワイドブロック

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

記事一覧系のブロック

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

投稿リストブロック

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

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

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

RSSブロック

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

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

デザインは3種類!

デザインはカード型リスト型テキスト型の3種類があります。

その他ブロック

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

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

デザインは4種類!

デザイン(スタイル)はデフォルト左に線横並び縦並び表の4種類があります。

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

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

-SWELL(スウェル)