SWELL説明リストブロックの使い方｜3つのおすすめな活用例も紹介！

「商品やサービスを視覚的に分かりやすく説明したい…」

「説明リストブロックの設定方法は？」

「説明リストブロックの使い道ってある？」

この記事では、そんな方に向けて、SWELLで説明リスト(DL)ブロックの使い方を解説します。

説明リスト(DL)ブロックとは…用語や内容の説明を分かりやすく伝えることができるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• 説明リストブロックを上手に活用できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、商品やサービスの情報を分かりやすく伝えられています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELL説明リストブロックでできること3選

SWELLの説明リストブロックでは以下のようなことができます。

それぞれ詳しく解説します。

3種類のデザインから選べる

SWELLの説明リストブロックを以下のような3種類のデザインにカスタマイズできます。

シンプルなデザインからタイトル部分を色付けしたデザインまで好きなスタイルを選べますよ。

項目を横並びに表示できる

説明リストのタイトルと説明の項目を横並びに表示できます。

横並びではタイトルと説明の項目を区別するために、これら項目の間にグレーの横線が入ったり、タイトルが太字になったり工夫されています。

タイトルと説明の項目を分けて追加できる

SWELLの説明リストブロックでは、タイトルと説明の項目を分けて追加できます。

段落ブロックを増やすことで複数のコンテンツを配置できますが、説明の項目を増やすことでもできますよ。

SWELL説明リストブロックの使い方とカスタム設定2つ

SWELLの説明リストブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：ブロックエディターで使えるSWELLの専用機能まとめ

ちなみに、説明リストブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

説明リストブロックで設定可能な項目は2つあります。

それぞれ詳しく解説します。

4種類からスタイルを選ぶ

SWELLでは、説明リストブロックのスタイルを以下の4種類から選べます。

どのスタイルも、タイトルと説明の項目でテキストの太さが違うので区別がつきやすいですね。

「左に線」と「縦並び表」のスタイルは、サイトのメインカラーがタイトルに設定されているので統一感を出せます。

タイトルの横幅を調整する

説明リストブロックのスタイル「横並び」を選んだ場合のみ、タイトル欄の横幅を広げたり縮めたり調整できます。

例えば、タイトルの横幅を以下のように変えてみました。

※1em=16px、ちなみに本記事のテキストは16pxです。

タイトルの横幅は1~12emの間で設定できます。

タイトルに入力する文字が長くなる分だけ横幅も大きくすれば、1行に収めることができますよ。

デバイスにもよりますが、設定している文字サイズが16pxの場合、1emにつき1文字という認識でよさそうです。例：タイトルの文字数が5文字で設定が3pxの場合は3文字・2文字の2行に分かれる。

【実体験】SWELL説明リストブロックのおすすめな活用例3つを紹介

当ブログで使用しているSWELLの説明リストブロックのおすすめな活用方法を3つ紹介します。

それぞれ詳しく解説します。

商品やサービスの内容を項目ごとに説明する

SWELLの説明リストブロックは、主に商品やサービスの内容を説明します。

例えば、WordPressテーマ「SWELL」という商品を説明したい場合、以下の2通りの使い方ができます。

また、アコーディオンブロックと併用することで、説明の項目をクリックして商品の特徴の詳細を確認するという例①と②を組み合わせた使い方もできますよ。

手順説明に使う

SWELLの説明リストブロックを使って、以下のような作業の手順や購入の流れを説明できます。

ちなみに、似たような機能でステップブロックがありますが、こちらも以下のように作業の手順や購入の流れを説明するためのカスタムブロックです。

料金表やメニュー表を作成する

SWELLの説明リストブロックを使えば、料金表やメニュー表を作成することもできます。

説明リストブロックのスタイル「横並び」を使えば、右側に配置した料金がキレイに揃うのでおすすめですよ。

SWELL説明リストブロックまとめ

今回は、SWELLで説明リスト(DL)ブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。