【WordPress SWELL】簡単!!サイトに使えるブロックエディター13選

この記事では、WordPressテーマ「SWELL」で、WEBサイトを作る時に役に立つブロックエディターをご紹介します。

目次

①フルワイドブロック

フルワイドブロックは、ページいっぱいに広がるデザインが簡単に作れるブロックです。 特に、フロントページを作る際に大活躍します。
背景色を変えてコンテンツのメリハりをつけることができるので、セクションの区切りとして大活躍します。
特に視線を引きつけたい部分に使うのがおすすめです!

STEP
ブロックエディターでフルワイドブロックを追加
STEP
画像やテキストを配置
STEP
パディングや背景画像を設定し、透明度を調整


②投稿リスト

投稿リストブロックは、ブログの記事を簡単に表示できる便利な機能です。
ホームページの場合は、特にお知らせのセクションで大活躍します。

投稿リストの例

STEP
ブロックエディターで投稿リストブロックを追加
STEP
表示する記事のカテゴリーやタグを選択
STEP
 表示やレイアウトを調整

③ブログパーツ

ブログパーツは、1度作ったコンテンツを使い回せる便利な機能です。

よく使うデザインや情報を登録しておけば、お問い合わせボタンを統一する時や、複数のページで同じ情報を表示する時など、何度でも簡単に呼び出せます。
1つのブログパーツを更新すれば、全ての挿入箇所が自動で更新されるので、修正の手間も1回で済みます。

ブログパーツの例

お申込みボタン

メニュー

STEP
ダッシュボードのブログパーツで新規作成をクリック

STEP
繰り返し使いたいコンテンツを作成して保存

STEP
編集ページでブログパーツブロックを追加し、保存したものを選択

④リッチカラム

リッチカラムブロックは、複数のカラムを使って、
画像やテキストを美しく並べることができるブロックです。
リッチカラムによって、デザイン性の高いレイアウトが作成可能になります。

リッチカラムの例

サービスメニューの案内

サービスプランの案内

STEP
ブロックエディターでリッチカラムブロックを追加
STEP
カラムの数を選択し、各カラムに画像やテキストを配置
STEP
レイアウトを調整

PC、タブレット、 スマホで何列表示させるかも選ぶことが できます


⑤タブ

タブブロックは、複数の情報をコンパクトにまとめ、クリックで切り替えられる便利な機能です。
ページが縦長になるのを防ぎ、すっきりと整理されたデザインを作ることができます。
タブの数は自由に増減でき、内容に応じてカスタマイズ可能。
情報量が多くなりがちなページで、ユーザーが見やすい形にまとめることができます。

STEP
ブロックエディターでタブブロックを追加
STEP
タブの見出しを設定し、各タブの中にテキストや画像を配置する

⑥ステップ

ステップブロックは、手順や流れを分かりやすく整理して伝えるためのブロックです。
順番に沿って情報を見せることで、ユーザーの理解を深めることができます。
サービスの利用手順の説明や、購入までの流れの案内などの説明をする場面で役立ちます。

ステップの例

STEP
ブロックエディターで ステップブロックを追加

STEP
ステップの タイトルや説明を入力

STEP
必要に応じてアイコンや画像を追加

STEP
ステップの数を増やして数を調整

⑦アコーディオン

アコーディオンブロックは、クリックで開閉できるブロックです。 
情報をすっきり表示できるのが特徴。
Q&Aを折りたみ形式で掲示 したり、商品やサービスの詳細情報を折りたんで整理することができます。
例えば、Q&A が大量にあるサイトの場合だと縦に長く なりがち。その場合に、アコーディオンブロックを入れると、必要な疑問だけを選択して回答を見ることができ、ユーザーがスクロールする負担を少しでも軽減できます。

アコーディオンの例

STEP
ブロックエディターでアコーディオンブロックを追加
STEP
見出し部分にタイトルを入力
STEP
開閉する部分に詳細情報を入力
STEP
編集バーで好みのデザインを選択

⑧FAQ

FAQブロックは、よくある質問とその回答をすっきりまとめられるブロックです。ユーザーの疑問を解決できるので、問い合わせ対応の手間を減らすことができます。

STEP
ブロックエディターでFAQブロック 追加
STEP
質問と回答を入力
STEP
必要に応じて質問を追加

⑨リンクリスト

リンクリストブロックは、複数のリンクを一覧で表示できる便利なブロックです。リンクリストを利用すると、メニューや関連ページへの誘導をスムーズ に行うことができます。
サービスが細かく分れているクライアントでは、このリンクリストを使ってサービスの目次のように使うことも可能です。

リンクリストの例

STEP
ブロックエディターでリンクリストブロックを追加
STEP
リンクのタイトルを入力
STEP
リンク先のURLを設定
STEP
必要に応じてアイコンや デザインを編集

⑩ボックスメニュー

ボックスメニューブロックは、画像やアイコンを使って視覚的に分かりやすいメニューを作ることができるブロックです。
画像も一緒に載せることができ、視覚的にアピールが可能です。ユーザーが 次にどこへ進めばいいか迷わないようにするのに効果的です。

STEP
ブロックエディターでボックスメニューブロックを追加
STEP
各ボックスにタイトルや説明を入力
STEP
アイコンや画像を設定
STEP
リンク先のURLを設定

⑪バナーリンク

バナーリンクブロックは、視覚的に目を引くバナーを設置できます。
バナーを置くことで、特定のページや外部サイトへ誘導することができます。
商品ページやサービスページへの誘導バナーを設置したり、期間限定キャンペーン・特集ページへのリンクを目立たせたりと、ユーザーの動線をスムーズにできます。

STEP
ブロックエディターでバナーリンクブロックを追加
STEP
画像や背景色を設定
STEP
リンク先のURLを指定

⑫ふきだし

ふきだしブロックは、ふきだし形式のデザインを簡単に作れるブロックです。 親しみやすさを演出したり、重要なポイントを強調するのに役立ちます。
説明記事でキャラクターを使って情報を分かりやすく伝えたり、レビューや体験談を対話形式で読みやくしたりでき、 よりも親しみのある記事を作ることができます。

ふきだしの例

STEP
ブロックエディターで吹き出し ブロックを追加
STEP
キャラクターのアイコンを設定
STEP
吹き出しのテキストを入力
STEP
色やデザイン、向きを調整

⑬SWELLボタン

SWELLボタンブロックは、デザイン性の高いボタンを簡単に作れるブロックです。

STEP
ブロックエディターでSWELLボタンブロックを追加
STEP
ボタンのテキストを入力
STEP
リンク先のURLを設定 
STEP
必要に応じて色やサイズを調整

まとめ

SWELLは、元々ブログ用に作られたテーマですが、ブロックをうまく組み合わせることで、企業サイトや個人事業主のサービスサイトを作ることができます。ウェブサイトは、作るだけではなく、しっかりと効果が出やすい構成コンテンツで作る必要があります。今回ご紹介したSWELLブロックエディター、ぜひ活用してみてください。

目次