SWELL説明リストの使い方｜基本設定から活用例まで

SWELL説明リストブロックは、項目名とその説明文をセットで表示できる便利なブロックです。

HTMLの「dlタグ」をベースにしているため、専門知識がなくても整ったデザインでSEO効果の高いコンテンツを作成できます。

本記事では、説明リストの基本機能から設置方法、4つのスタイル設定、さらに商品紹介や料金表での活用例まで、実際の操作画面を使って詳しく解説します。

この記事を読めば、読者にとって見やすく整理されたコンテンツを簡単に作成できるようになり、情報をわかりやすく伝えられるサイト運営ができますよ。

それではさっそく始めましょう！

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。

SWELL説明リストとは

SWELLの説明リストブロックについて、以下の観点から解説します。

順番に見ていきましょう。

説明リストは「dl」タグを挿入できるブロック

説明リストブロックは、HTMLの「dlタグ」を基にして作られています。

【HTMLコードの例】

dlは「description list（説明リスト）」の略で、dtが「項目のタイトル」、ddが「項目の説明」を表します。

説明リストブロックを使えば、プログラミング知識がなくても整ったデザインで記事が書け、SEO効果も期待できるということです。

説明リストで、どんなことができるのか？

説明リストは、項目名とその説明文をセットで表示できるブロックです。

例えば「用語：意味」のように、何かを説明したい場面で使います。

ブログパーツ

「ブロックの集合体」をブログパーツとして登録しておく事で、自由に投稿画面で呼び出すことができる機能です

リッチカラム

WordPressの標準カラムブロックの上位互換であり画像やコンテンツのレイアウトを自由自在にデザインできる機能です

辞書のように情報を整理して表示するため、読者にとって分かりやすい形でコンテンツを作成できます。

スペック表や料金表など、項目ごとに説明が必要な場面でも威力を発揮します。

【MacBookの料金・スペック表】

※「項目の名前（DT）」の下に4つの「項目の説明（DD）」を設置。２つ目の「項目の説明（DD）」には画像ブロックを挿入

タイトル（DT）と項目の説明（DD）を別々に追加できる

SWELL説明リストは「項目のタイトル（DT）」と「項目の説明（DD）」を別々に追加することができます。

【タイトルと項目の説明を別々に追加できる】

通常のブロックではタイトルとコンテンツの入力欄を分けることができませんが、説明リストは切り離して追加が可能です。

他のブロックとの違い

説明リストは、テーブルブロックやリストブロックとは異なる特徴を持ちます。

テーブルは表形式で複数の項目を比較する際に適しており、通常のリストは順序や項目を羅列する場合に使います。

一方、説明リストは1つの項目に対して詳しい説明を付けたい場合に最適です。

また、スマホ表示でもテーブルより見やすく表示されるため、ユーザビリティの面でも優れています。

SWELL説明リストの使い方とカスタム設定

説明リストブロックの設置方法から、4種類のスタイル選択、タイトル幅の調整まで、実際の操作手順を詳しく解説します。

ブロックの設置方法

まずは 説明リストブロックの設置手順から見ていきましょう。

手順は以下の通りです。

スタイルの選定

説明リストブロックには4つのデザインスタイルが用意されています。

説明リストブロックを選択した状態で、サイドバーから「スタイル」を選択しましょう。

【説明リストのスタイル】

タイトルの横幅調整

「横並び」スタイルを選択した場合のみ、項目名（DT）の横幅を調整できます。

設定パネルの「DTの横幅」で1〜12emの範囲で設定可能です。

目安として、1em＝約1文字分です。

【タイトル幅の例】

スマホとPCの両方で表示を確認し、読みやすい幅に調整しましょう。

SWELL説明リストの活用例

説明リストブロックのおすすめの活用方法を4つ紹介します。

順番に見ていきましょう

商品・サービス紹介に活用

商品やサービスのスペック表として説明リストを活用できます。

【WordPressテーマ比較】

SWELL

価格

17,600円

ブロックエディター対応

完全対応

ライセンス

複数サイト利用可能

THE THOR

価格

16,280円

ブロックエディター対応

一部対応/公式非推奨

ライセンス

複数サイト利用可能

上記の例ように、説明リストの「項目の説明（DD）」の中に説明リスト（横並び）を設置することもできます。

レストラン料金表に活用

説明リストはレストランのメニューや料金プランの表示にも活用できます。

【レストランメニュー表】

「横並び」スタイルを選択すると、価格部分がきれいに右側に揃うため見た目も整います。

サービス業での料金表示にも活用できますよ。

【コンサルティング料金表】

手順説明・ステップガイドに活用

説明リストブロックは、作業手順や購入フローの説明にも使用できます。

【WordPressブログの始め方】

STEP1：レンタルサーバー契約

まずはエックスサーバーやConoHaでサーバーを契約します。

STEP2：独自ドメイン取得

ブログのURLとなるドメインを取得します。

STEP3：WordPressインストール

サーバーにWordPressをインストールして完了です。

SWELLには専用のステップブロックもありますが、SWELL説明リストを使えば他のSWELLサイトとは一味違う雰囲気を作り出せます。

Q&Aに活用

よくある質問とその回答をセットで表示する場合に利用しましょう。

【SWELLブログ運営Q&A】

 Q：SWELLは初心者でも使えますか？

 A：はい、ブロックエディター完全対応で直感的に操作できます。

Q：SWELLは複数のサイトで使用できますか？

A：ライセンス制限はないため、何サイトでも利用可能です。

Q：SWELLのカスタマイズは難しいですか？

A：専用ブロックが豊富なため、コード不要でデザインできます。

ステップブロックと同様に、SWELLにはFAQブロックがありますが、上記のように「よくあるQ&A」で説明リストを使えば、他のサイトとは一味違う雰囲気を作り出せます。

SWELL説明リストのまとめ

今回は、SWELL説明リストブロックの基本的な仕組みから使い方、活用術まで解説しました。

本記事の内容は以下のとおりです。

SWELL説明リストブロックは読者に分かりやすく説明する場合に役に立つブロックです。

ぜひ今回紹介した方法を参考に、あなたも説明リストを使ってみてください。

本ブログではWindowsテーマにSWELLを使用しています。

あなたも、直感的に操作できるSWELLにしませんか？

今回は以上です。

最後までお読みいただきありがとうございました。