SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

SWELLでできることを画像や名称から探せる機能一覧まとめ

  • URLをコピーしました!
みにしん

SWELLでよく見かける機能やブロックがあるけど、機能の名称が分からないから調べられない。。。

SWELLはとても多機能なテーマなので、機能が把握しきれず上記のような思いを感じている方も多いと思います。

ただ、せっかくSWELLを使うのなら、ぜひとも知っておきたい便利な機能がたくさんあります。

そこでこの記事では、SWELLの機能を探しやすいように、以下のような複数の視点でまとめて紹介します。

以下の視点でSWELLの機能を紹介!
  • 機能の見た目の画像
  • 機能名・ブロック名
  • 機能ごとのできること

ブロックエディター機能を画像で探す

ブロックエディター機能を一覧表から探す

さとしん

ぜひこの記事をブックマークしてカタログのようにご活用ください…!


執筆時の環境 ※初回執筆:2023/1/9
WordPress

v.6.1.1

SWELL

v.2.7.2.1

記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。

読者の方へおしらせ

現状、第一弾としてブロックエディター機能のみをまとめています。もしたくさんの方に見てもらえる場合は、その他SWELLの機能にも範囲を拡大していこうと思います。


SWELLのデザインが見たい方は、当サイトWebNote+の「SWELLサイト集」で300サイト以上のSWELL使用事例が見れるのでおすすめです。

目次

デザインで探すSWELL専用のブロック機能一覧

SWELLのブロックエディター機能を画像で紹介していきます。気になる機能があれば画像下のテキストリンクから詳細の解説記事にアクセスしてみてください。

記事執筆でよく使う装飾系のブロック機能

SWELLの段落ブロック-1
SWELLの段落ブロック-2
SWELLの段落ブロック-3

文字に装飾をする

詳細SWELLの段落ブロックの使い方

SWELLのキャプションブロック-1
SWELLのキャプションブロック-2
SWELLのキャプションブロック-3

タイトルが付いたボックスで装飾する

詳細SWELLのキャプションブロックの使い方

SWELLの見出しブロック-1
SWELLの見出しブロック-2
  • 見出しを作る
  • デザインに適した見出しを作る

詳細SWELLの見出しブロックの使い方

SWELLのリストブロック-1
SWELLのリストブロック-2
SWELLのリストブロック-3

箇条書きで表現する

詳細SWELLのリストブロックの使い方

SWELLボタンブロック-2
SWELLボタンブロック-3
SWELLボタンブロック-1
  • クリック率の計測ができるボタンリンクを設置する
  • アフィリエイトコードをボタンリンクにする
  • ボタンの上にマイクロコピーを書く

詳細SWELLのボタンブロックの使い方

SWELLのグループブロック-1
SWELLのグループブロック-2
SWELLのグループブロック-3
  • 任意のブロックに枠線や背景装飾をする
  • 複数のブロックをまとめて装飾する

詳細SWELLのグループブロックの使い方

SWELLのふきだしブロック-1
SWELLのふきだしブロック-2
  • ふきだしで表現する
  • 良く使うふきだしを登録して効率化する

詳細SWELLのふきだしブロックの使い方

SWELLの画像ブロック-1
SWELLの画像ブロック-3
SWELLの画像ブロック-2
  • 画像を挿入する
  • 画像をデスクトップやブラウザ風に装飾する

詳細SWELLの画像ブロックの使い方

SWELLのマーカー装飾
SWELLのフォントサイズの変更
SWELLの文字色と背景色の変更
  • 文字にマーカーを引く
  • 文字サイズを変える
  • 文字色や背景色を設定する

詳細SWELLの文字装飾の使い方

SWELLのアイコン挿入用のショートコード
SWELLの星評価挿入用のショートコード
  • 文中にアイコンを挿入する
  • 星評価を挿入する

詳細SWELLのショートコードの使い方

SWELLの書式セット機能
SWELLのカスタム書式
  • 良く使う装飾の組み合わせを登録する
  • オリジナルの文字装飾をCSSで作る

詳細SWELLのカスタム書式と書式セット機能の使い方

記事を更に見やすくする高機能なブロック機能

SWELLのテーブル-1
SWELLのテーブル-2
SWELLのテーブル-3
  • 表を作る
  • 背景色や記号を使って比較表を作る

詳細SWELLのテーブルブロックの使い方

SWELLのFAQブロック-3
SWELLのFAQブロック-5
  • Q&A形式の良くある質問欄を作る
  • FAQ構造化データを出力する

詳細SWELLのFAQブロックの使い方

SWELLのアコーディオンブロック-1
SWELLのアコーディオンブロック-2
SWELLのアコーディオンブロック-4

クリックで折りたためるコンテンツを挿入する

詳細SWELLのアコーディオンブロックの使い方

SWELLのタブブロック-1
SWELLのタブブロック-2
SWELLのタブブロック-3

クリックで表示を切り替えられるコンテンツを作る

詳細SWELLのタブブロックの使い方

SWELLの関連記事ブロック
SWELLの関連記事ブロック
SWELLの関連記事ブロック

内部リンクや外部リンクをブログカードにする

詳細SWELLの関連記事ブロックの使い方

SWELLのステップブロック-1
SWELLのステップブロック-2
SWELLのステップブロック-3

手順や時系列に沿った表現をする

詳細SWELLのステップブロックの使い方

SWELLのリッチカラム-1
SWELLのリッチカラム-2
  • ブロックを横並びに配置する
  • コンテンツをスライダー風に横スクロールで表示する

詳細SWELLのリッチカラムブロックの使い方

SWELLの商品レビューブロック-1
SWELLの商品レビューブロック-2
  • 商品レビューやメリット・デメリットをまとめる
  • レビュー用の構造化データを出力する

詳細SWELLの商品レビューブロックの使い方

SWELLの制限エリア-1
SWELLの制限エリア-2
  • ブロックを任意の期間内のみ表示させる
  • ブロックを任意のカテゴリーの記事でのみ表示させる

詳細SWELLの制限エリアブロックの使い方

SWELLの説明リスト-1
SWELLの説明リスト-2
SWELLの説明リスト-3

項目のタイトルと説明分を表示する

詳細SWELLの説明リストブロックの使い方

SWELLのブロック下の余白量-1
SWELLのブロック下の余白量-2
SWELLのブロック下の余白量-3

ブロックの下側の余白の大きさを調整する

詳細SWELLのマージンコントロール機能の使い方

記事の執筆を効率化するブロック

SWELLのブログパーツ-1
SWELLのブログパーツ-2

繰り返し使うブロックを登録しておき効率化する

詳細SWELLのブログパーツの使い方

SWELLの広告タグ管理-1
SWELLの広告タグ管理-2

アフィリエイトリンクを一括で管理する

詳細SWELLの広告タグ管理機能と広告タグブロックの使い方

SWELLのABテスト-1
SWELLのABテスト-2

ABテストをして表示を最適化する

詳細SWELLのABテストブロックの使い方

トップページデザインでよく使うブロック

SWELLのフルワイド-1
SWELLのフルワイド-2
SWELLのフルワイド-3
  • 横幅いっぱいに広がる背景を設定する
  • 背景に画像や動画を設定する
  • 背景の境界線をいろいろな形状にアレンジする

詳細SWELLのフルワイドブロックの使い方

SWELLの投稿リスト-1
SWELLの投稿リスト-2
SWELLの投稿リスト-3

記事を日付やカテゴリーごとに並べて表示する

詳細SWELLの投稿リストブロックの使い方

SWELLのボックスメニュー-1
SWELLのボックスメニュー-2

ナビゲーションに適したボックス型のリンクを作る

詳細SWELLのボックスメニューブロックの使い方

SWELLのリンクリスト-1
SWELLのリンクリスト-2
SWELLのリンクリスト-3

複数のリンクを箇条書き形式で表示する

詳細SWELLのリンクリストブロックの使い方

機能名称とできることで探すSWELLのブロック機能一覧

SWELLのブロックエディター機能の名称と機能内容を一覧表としてまとめました。気になる機能があれば表の左の列にあるテキストリンクから詳細の解説記事にアクセスしてみてください。

主要な機能のみを表内に記載しています。”できること”を全て確認したい場合はリンク先から詳細の解説記事を参照してください。

記事で良く使う装飾系のブロック機能

スクロールできます
ブロック・機能名機能内容・できること
段落文字を入力する
文字に装飾をする
キャプションタイトル付きの枠線で囲った装飾をする
グループ複数のブロックをひとつにまとめる
まとめたブロックに枠線や装飾を設定する
見出し見出しを作る
デザインに適した見出しを作る
リスト箇条書きを作る
ふきだしふきだしを作る
良く使う吹き出しのアイコンや設定を登録する
SWELL
ボタン
ボタンリンクを設置する
アフィリエイトコードをボタンリンクにする
ボタンの表示回数、クリック回数を計測する
画像画像を挿入する
画像をデスクトップやブラウザ画面風に装飾する
SWELL
装飾
フォントサイズを変更する
フォントカラーを変更する
文字の背景カラーを変更する
マーカー線風の装飾をする
ショートコード記事内に広告を挿入する
デバイスサイズごとに改行を指定する
アイコンを挿入する
星評価を挿入する
カスタム書式良く使う文字装飾の組み合わせを登録しておく
CSSを書いてオリジナルの文字装飾を登録する

記事を更に見やすくする高機能なブロック機能

スクロールできます
ブロック・機能名機能内容・できること
テーブル表を挿入する
〇や×の記号を挿入して比較表を作る
横長の表は横にスクロールして表示する
FAQ良くある質問(Q&A)欄を作る
FAQ構造化データを出力する
アコーディオンクリックで開閉するコンテンツを作る
タブクリックで表示を切り替えられるコンテンツを作る
関連記事内部リンクや外部リンクをブログカード化する
ステップ手順や時系列に沿った表現をする
リッチカラムブロックを横並びに配置する
列数をデバイスサイズごとに指定する
横にスクロールして複数のカラムを表示する
商品レビュー商品の評価やメリット・デメリットを表示する
レビュー用の構造化データを出力する
制限エリアブロックを表示する期間を指定する
ブロックを表示するユーザー権限を指定する
ブロックを表示するカテゴリーやタグを指定する
説明リストある項目について説明を記載する
デバイス
コントロール
デバイスサイズごとにブロックの表示・非表示を指定する
マージン
コントロール
ブロックの下の余白の大きさを調節する

記事の執筆を最適化・効率化するブロック機能

スクロールできます
ブロック・機能名機能内容・できること
ブログパーツ繰り返し使うコンテンツを保存しておく
コンテンツをショートコード化してウィジェットなどに表示する
広告タグアフィリエイトリンクなどを登録し一括で管理する
広告のクリック率を計測する
ABテストブロック内の表示をABテストする
AとBの表示比率を調整できる

トップページデザインで主に使うブロック

スクロールできます
ブロック・機能名機能内容・できること
フルワイド横幅いっぱいに広がるコンテンツを作る
背景に画像や動画を設定する
ブロックの上下の境界線形状をアレンジする
投稿リスト記事を日付やカテゴリーなど条件に合わせて表示する
RSSRSSフィードをSWELLになじむデザインでリスト表示する
バナーリンク画像の上にテキストを重ねて入力する
バナー広告風に画像にリンクを設定する
ボックスメニューリンクをボックス形式で表示する
リンクリストリンクを箇条書き形式で表示する

SWELLの機能や使い方を効率良く覚えたい方へ

このページでは、SWELLの機能を機能名以外からも探せるようにいろいろな視点から紹介してきました。

当サイトでは、効率よくSWELLの機能や使い方をマスターできるようにガイドも作成しています。

これからSWELLを使い始める方、すでにSWELLを使っているけどイマイチ使いこなせていない方には以下の記事をゆっくりでも読み進めてもらえたら嬉しいです。

SWELLの始め方ガイド|SWELLのインストール方法や知っておきたい情報まとめ!

SWELL始め方ガイド

これからSWELLを使い始める全ての方向けに、SWELLの導入完了までの流れと、SWELLの基礎知識をまとめています!

WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELL使い方ガイド

SWELLの便利な機能や設定、使い方をまとめています。SWELLの公式マニュアルと一緒に読んでほしいおすすめの記事です!

SWELLブロックエディターガイド|使い心地抜群のエディターで楽しく記事を書こう!

SWELLブロックエディターガイド

SWELLのブロックエディターを快適に使うための情報をまとめています。最高のエディターで楽しく快適に記事を書きましょう!


はこちらからどうぞ…!

SWELLでできることを画像や名称から探せる機能一覧まとめ

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次