SWELLブロック&WordPressブロックの見た目･全21種類デザインパターン集

WordPressテーマ｢SWELL｣をベースにしてサイト制作をしていますが、そこで使うHTMLはほとんどSWELLブロックを使用しています。

たまに絞り込み検索やスライダー･独自のカードを作りますが、ほとんどSWELLで用意されたもので完結できます。

ページ単位のデザインではなく、サイトパーツ単位でのデザインもご依頼いただくので本記事にまとめてみました。

機能ではなくデザインのための見た目だけにフォーカスしています。

2024年4月更新

SWELLでのWordPressブロックの見た目･デザインパターン集

SWELLは通常のWordPressブロックの見た目も拡張しているので、SWELLブロックを紹介する前にこちらもまとめておきます。

段落

基本のテキスト。

テキストの装飾

様々な文字装飾が可能。

ここにテキストを記載。

code

ここにテキストを表示

 

インラインボタン

テキストのスタイル

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ここにテキスト

ボーダー

スタイル

グループ

グループブロック特有のスタイルもあります。

見出し

本来カスタマイズで表示を切り替えられる見出しのデザインを再現しました。

H2

H3

H4

リスト

番号なし、または番号付きのリストを作成します。

見た目は全部で8種類。

縦並びだけでなく、横並びも可能。

デフォルト

• リスト1
• リスト2
• リスト3

目次風+横並び

• リスト1
• リスト2
• リスト3

チェック

• リスト1
• リスト2
• リスト3

マル

• リスト1
• リスト2
• リスト3

三角

• リスト1
• リスト2
• リスト3

バツ

• リスト1
• リスト2
• リスト3

丸数字

• リスト1
• リスト2
• リスト3

注釈

• リスト1
• リスト2
• リスト3

引用

引用テキストを視覚的に強調します。

見た目は一種類のみ

ここに引用のテキスト

https://cg-method.com/

テーブル

行と列に構造化して情報を表示するコンテンツを作成します。

見た目の種類は4種類。

テーブル内の装飾も多数あり。

デフォルト

ヘッダーラベル	ヘッダーラベル
項目1
項目2
項目3
項目4
項目5
項目6
項目7
フッターラベル	フッターラベル

ストライプ

項目1	説明文1
項目2	説明文2
項目3	説明文3

シンプル

項目1	説明文1
項目2	説明文2

二重線

項目1	説明文1
項目2	説明文2

SWELLブロックの見た目･全21種類デザインパターン集

SWELLブロックの見た目･全21種類デザインパターンをまとめてみました。

機能の使い方というよりもデザインを考えるときの情報整理等に使えると思います。

1. リスト入りグループ
2. アコーディオン
3. バナーリンク
4. SWELLボタン
5. キャプションボックス
6. リッチカラム
7. 説明リスト (DL)
8. FAQ
9. フルワイド
10. ステップ
11. タブ
12. ABテスト
13. 広告タグ
14. ふきだし
15. ブログパーツ
16. リンクリスト
17. 投稿リスト
18. 関連記事
19. 制限エリア
20. 商品レビュー
21. RSS

リスト入りグループ

こちらはリストブロックにグループを装飾したものです。

WordPressの通常ブロックを組み合わせただけなので、SWELL固有のブロックではないです。

アコーディオン

クリックで展開できるアコーディオンコンテンツを作成できます。

表示方法は4種類。開閉のアイコンは3種類あります。

デフォルト

シンプル

囲い枠

メインカラー

バナーリンク

簡易的なバナー型のリンクを作成できます。

• 画像に高さの設定やブラーがつけられます。
• また枠は角丸や影をつけることも可能。
• もちろんリンクもつけられます。

デフォルト

ブラー効果をつける

影ををつける+角丸

SWELLボタン

SWELL専用の高機能なボタンブロックです。

• ボタンサイズの変更（大中小）
• フォントサイズの変更
• ボタンカラーの変更（パターンの3色）
• アイコンの付与（左右）

ノーマル

立体

キラッと

アウトライン

MOREボタン

このボタンは少し特殊で色やアイコンの設定変更ができません。

キャプションボックス

キャプション付きのボックスコンテンツを作成できます。

全部で7種類あります。

• 色（3種類）
• アイコン（左右）

デフォルト

小

枠上

枠上2

枠内

浮き出し

内テキスト

リッチカラム

SWELL用のカラムブロック。

通常のカラムから拡張されています。

見た目に関しては3種類用意されています。

スクロールできる設定もあり。

デフォルト

ボーダー

シャドウ

説明リスト (DL)

説明リストを簡単に使用できます。

見た目に関しては全部で4種類あります。

デフォルト

タイトル

説明文

タイトル

説明文

左に線

タイトル

説明文

タイトル

説明文

横並び

タイトル

説明文

タイトル

説明文

縦並び表

タイトル

説明文

タイトル

説明文

FAQ

Q&A形式のコンテンツを簡単に設置できます。

• 見た目に関しては全部で4種類
• アイコンの形は3種類
• QAのところは枠線と塗りつぶしの色の変更ができる

デフォルト

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

線あり

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

ボックス

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

ストライプ

質問のテキスト

回答のテキスト

質問のテキスト

回答のテキスト

フルワイド

フルワイド幅でコンテンツを配置できます。

見た目に関しては境界線が4種類変更できます。

デフォルト

境界線：斜線

境界線：円

境界線：波

境界線：ジグザグ

ステップ

ステップ形式で流れを説明できます。

見た目に関しては全部で3種類あります。

また各パターンでステップの表示を変更できます（2種類づつ）

デフォルト

ビッグ

スモール

タブ

タブ切り替えコンテンツを簡単に作成できます。

見た目の種類は3種類。

タブの表示幅は設定変更可能。

ノーマル

ふきだし

下線

ABテスト

2つのブロックをランダムに表示します。

特に表示のオプションは無し。

Bブロックのテキスト

広告タグ

広告タグのブロックの読み込みなので、特に固有の見た目は無し。

ふきだし

ふきだしの形は主に2種類。

枠有り無しなどの設定もできる。

ブログパーツ

ブログパーツのブロックの読み込みなので、特に固有の見た目は無し。

リンクリスト

見た目の種類は2つ。

ボーダーと塗りつぶし、角丸などのオプション表示あり。

デフォルト

• テキスト1
• テキスト2

• テキスト1
• テキスト2

ボタン

• テキスト1
• テキスト2

• テキスト1
• テキスト2

投稿リスト

投稿リストを好きな条件で呼び出すことができます。

見た目の種類は5種類

もっと見るボタン等もつけられる。

カード型

リスト型

リスト型（交互左右）

サムネイル型

テキスト型

関連記事

関連記事をブログカード型で表示します。

見た目の種類は3種類。

アイコンは2種類。

デフォルト

スリム

テキスト

制限エリア

特有の見た目は無し。

商品レビュー

見た目は一種類のみ。

RSS

見た目の種類は3種類のみ。

カード型

リスト型

テキスト型

まとめ

SWELLで表示できるブロックのまとめがなかったので作りました。

Webサイト制作等で参考になるとおもいます。