こんにちは "osaboo"
です。"@osaboo_Bot"
SWELL説明リスト（DL）の使い方｜設定方法と活用例を初心者向けに解説
SWELLの説明リスト（DL）ブロックの使い方を初心者向けに解説します。基本的な設定方法からデザイン変更、活用例までわかりやすく紹介します。
QuestionSWELLの説明リスト（DL）って何？
どうやって使うの？
FAQブロックやテーブルとの違いも知りたい。
SWELLには、項目名と説明文をセットで表示できる「説明リスト（DL）」ブロックが用意されています。
用語解説やサービス紹介、料金表などを見やすく整理できるため、読者に情報をわかりやすく伝えたいときに便利です。
この記事では、SWELL説明リスト（DL）ブロックの使い方を初心者向けに解説します。挿入方法や設定項目、活用例まで画像付きでわかりやすく紹介するので、ぜひ参考にしてください。
こんな人におすすめ！
- SWELLの説明リスト（DL）を使いたい
- 用語解説を見やすく表示したい
- 商品やサービスの情報を整理したい
- SWELLのブロック機能を活用したい
この記事でわかること！
- SWELL説明リスト（DL）ブロックの特徴
- 説明リスト（DL）の挿入方法
- 各設定項目とスタイルの違い
- おすすめの活用例
- FAQブロックやテーブルとの使い分け
それではご覧ください。
迷ったら“使いやすさ”で選ぶのが正解です。
目次 "Contents"
SWELL説明リスト（DL）とは？
SWELLの説明リスト（DL）ブロックは、「項目名」と「説明文」をセットで表示できるブロックです。
例えば、用語解説やサービスの特徴、プロフィール情報などを整理して見やすく表示したい場合に役立ちます。
通常のリストブロックよりも情報を分かりやすく分類できるため、読者が内容を理解しやすくなるのが特徴です。
ここでは、説明リスト（DL）ブロックの特徴や活用シーンについて解説します。
説明リスト（DL）の特徴
説明リスト（DL）は、見出しのような項目名と、その内容をセットで表示できるブロックです。
箇条書きリストでは表現しにくい「用語と説明」「項目と詳細情報」のような内容を整理して掲載できます。
主な特徴は以下のとおりです。
- 項目と説明をセットで表示できる
- 情報を整理しやすい
- 読者が内容を理解しやすい
- コード不要で作成できる
- スマホでも見やすく表示される
ブログ記事の可読性向上にも役立つため、情報を分かりやすく伝えたい場合におすすめです。
DL・DT・DDの意味
説明リストはHTMLの「DLタグ」をもとに作られています。
それぞれの意味は以下のとおりです。
| タグ | 意味 |
|---|---|
| DL | 説明リスト全体 |
| DT | 項目名（タイトル） |
| DD | 説明文（内容） |
例えば、
- おすすめWordPressテーマ
- SWELL
-
WordPressテーマの説明
- AFFINGER6
-
WordPressテーマの説明
というように、項目名と説明文をセットで整理できます。
HTMLの知識がなくても利用できますが、意味を理解しておくとブロックの役割が分かりやすくなります。
どのような場面で活用できる？
説明リスト（DL）はさまざまな用途で活用できます。
例えば次のようなケースにおすすめです。
- 用語解説
-
SEO
検索エンジンで上位表示を目指す施策
- サービス紹介
-
SWELL
ブロックエディター対応のWordPressテーマ
- プロフィール情報
-
運営歴
ブログ運営歴5年以上
- 商品・サービスの特徴紹介
-
料金や特徴、対象ユーザーなどの情報整理
SWELL説明リスト（DL）の使い方
SWELL説明リスト（DL）の挿入手順と、挿入後に行えるカスタマイズ（表示設定）について解説します。
手順は次の通りです。
- SWELL説明リスト（DL）の挿入手順
- SWELL説明リスト（DL）の設定
❶ SWELL説明リスト（DL）の挿入手順
- 投稿（エディター）画面での作業になります。
説明リスト（DL）ブロックの挿入手順をご紹介します。
STEP
投稿（エディター）画面を準備
Menu『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
説明リスト（DL）ブロックを挿入する箇所をクリックします。
STEP
ブロック挿入ツールを切り替え
『＋（ブロックインサーター）』をクリックします。
STEP
ブロックタブメニューから『説明リスト（DL）』を選択
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
テキストから『説明リスト（DL）』を選択して投稿（エディター）画面に挿入します。
『説明リスト（DL）』をクリックします。
STEP
説明リスト（DL）ブロック挿入完了
投稿（エディター）画面に『説明リスト（DL）』ブロックが挿入されます。
挿入直後では、以下のように表示されます。
- 項目名（DT）と説明文（DD）を入力できる状態になります。
STEP
タイトル（DT）と説明文（DD）を入力する
説明リスト（DL）ブロックを追加したら、各項目の内容を入力します。
上段には項目名（DT）、下段には説明文（DD）を入力します。
例えば以下のように設定できます。
- 項目名→SWELL
- 説明文→ブロックエディター完全対応のWordPressテーマ
このように入力することで、項目と説明をセットで表示できます。
- SWELL
-
ブロックエディター完全対応のWordPressテーマ
STEP
項目を追加する方法
項目を追加するには、まず親ブロックを選択します。次に、❶『＋（ブロックを追加）』をクリックしてポップアップメニューを開き、❷『項目のタイトル（DT）』または『項目の説明（DD）』を選択します。
STEP
項目を削除する方法
不要な項目は個別に削除できます。
項目を削除するには、削除したい項目を選択し、ブロックツールバー右端のオプションメニュー（︙）から『削除』をクリックします。
説明リスト（DL）ブロック全体を削除する場合は、親ブロックを選択した状態でオプションメニュー（︙）を開き、『削除』をクリックします。
STEP
挿入後の表示を確認する
入力が完了したら、プレビュー画面で表示を確認しましょう。
特に以下のポイントを確認するのがおすすめです。
- 項目名が長すぎないか
- 説明文が読みやすいか
- スマホ表示で崩れていないか
- 他のブロックとの余白が適切か
公開前に確認しておくことで、読者にとって見やすいレイアウトに仕上げられます。
❷ SWELL説明リスト（DL）の設定
SWELLの説明リスト（DL）ブロックでは、スタイルや文字サイズ、配色などを変更できます。
デフォルトのままでも十分使いやすいですが、記事デザインに合わせて調整することで、より見やすい説明リストを作成できます。
ここでは主な設定項目について解説します。
まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。
各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。
設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
説明リスト（DL）の設定方法（設定）
詳細設定項目
- 説明リスト（DL）
- デバイス制御
-
- 表示するデバイスサイズ
- SP / PC / クリア（選択 / 切替）
- 表示するデバイスサイズ
- ブロック下の余白量
-
- ドロップダウンメニューから選択
- 高度な設定
-
- HTML アンカー
- 今回は省略します。
- 追加 CSS クラス
- 今回は省略します。
- 追加 CSS
- 今回は省略します。
- HTML アンカー
説明リスト（DL）の設定方法（スタイル）
詳細設定項目
- 説明リスト（DL）
- スタイル
-
- デフォルト
- 左に線
- 横並び（DTの横幅の調整が可能）
- 縦並び表
- 4種類のスタイルが選べます。
説明リスト（DL）のスタイル一覧
ここでは、4種類のスタイルの特徴と、それぞれのスタイルに適した活用例をサンプル付きで紹介します。
デフォルト
- 用語解説・サービス紹介・プロフィール情報
-
シンプルなレイアウトで情報を整理しやすいため、用語解説やサービス紹介、プロフィール情報の掲載に向いています。どのような記事にも合わせやすく、迷った場合はデフォルトを選ぶのがおすすめです。
- テキストを入力…
-
ブロックを選択するには「/」を入力
左に線
- 用語集・機能一覧・重要なポイント
-
項目名を強調したい場合に向いています。用語集や機能一覧、重要なポイントの解説など、読者の視線を項目名へ集めたい場面で効果的です。
- テキストを入力…
-
ブロックを選択するには「/」を入力
横並び
- プロフィール情報・商品スペック・サービス概要
-
項目名と説明文を横並びで表示するスタイルです。プロフィール情報や商品スペック、サービス概要など、項目数が少なくコンパクトに情報をまとめたい場合に向いています。
- テキストを入力…
-
ブロックを選択するには「/」を入力
縦並び表
- 料金情報・商品仕様・ブログ運営環境
-
表形式に近い見た目で情報を整理できるスタイルです。料金情報や商品仕様、ブログ運営環境など、複数の項目を見やすく一覧表示したい場合に向いています。
- テキストを入力…
-
ブロックを選択するには「/」を入力
補足
- 文字サイズを変更する
-
説明リスト内の文字サイズは、タイポグラフィ設定から変更できます。
文字サイズを大きくすると視認性は向上しますが、記事全体とのバランスも重要です。
一般的には以下を目安にすると見やすくなります。
- 項目名：標準～やや大きめ
- 説明文：標準サイズ
- 強調したい部分のみ太字
サイズを統一することで、記事全体に一体感が生まれます。
- 文字色・背景色を変更する
-
説明リスト（DL）はカラー設定にも対応しています。
例えば、
- 項目名をブランドカラーにする
- 背景色を薄いグレーにする
- 説明文を落ち着いた色にする
といったカスタマイズが可能です。
ただし、色を使いすぎると読みにくくなるため、2〜3色程度にまとめるのがおすすめです。
- 余白を調整する
-
説明リストの前後に適切な余白を設定すると、記事が読みやすくなります。
特に以下のようなケースでは余白が重要です。
- 見出し直下に配置する場合
- ボックスブロック内で使用する場合
- テーブルやリストの近くに配置する場合
余白が狭すぎると窮屈な印象になり、広すぎると間延びした印象になるため、適度なバランスを意識しましょう。
- レスポンシブ表示について
-
SWELLの説明リスト（DL）はレスポンシブ対応のため、スマホやタブレットでも見やすく表示されます。
ただし、以下の点には注意してください。
- 項目名を長くしすぎない
- 説明文を1段落に詰め込みすぎない
- 必要に応じて改行を入れる
公開前にはスマホ表示も確認し、読者が快適に閲覧できる状態になっているかチェックしましょう。
SWELL説明リスト（DL）の活用例
説明リスト（DL）ブロックは、項目名と説明文をセットで表示できるため、さまざまな場面で活用できます。
単なるリストでは伝わりにくい情報も整理して表示できるので、読者の理解を助ける効果があります。
ここでは代表的な活用例を紹介します。
用語集・専門用語の解説
説明リスト（DL）が最も活躍するのが用語解説です。
例えばSEO関連の記事では、専門用語を以下のように整理できます。
- SEO
-
検索エンジンで上位表示を目指すための施策
- CTR
-
検索結果でクリックされた割合
- CV
-
商品購入や問い合わせなどの成果
サービスや商品の特徴紹介
商品やサービスの特徴をまとめる際にも便利です。
- SWELL
-
ブロックエディター完全対応のWordPressテーマ
- AFFINGER6
-
SEO対策と収益化機能が充実したWordPressテーマ
- Cocoon
-
無料で利用できるWordPressテーマ
プロフィール情報の整理
プロフィールページや運営者情報ページにも活用できます。
- 運営歴
-
5年以上
- 使用テーマ
-
SWELL
- 主な発信内容
-
WordPress・SEO・ブログ運営
ブログ運営情報の掲載
ブログに関する情報をまとめる場合にもおすすめです。
- サーバー
-
エックスサーバー
- 独自ドメイン
-
取得済み
- SSL化
-
設定済み
商品スペックやサービス概要の紹介
商品の基本情報を掲載する用途にも向いています。
- 販売価格
-
14,800円
- 対応環境
-
WordPress 6.0以上
- サポート
-
メールサポート対応
比較表ほど項目数が多くない場合は、説明リスト（DL）の方が読みやすくなることもあります。
よくある質問の簡易表示
FAQブロックを使うほどではない簡単な質問集にも活用できます。
- SWELLは有料ですか？
-
はい、有料テーマです。
- 複数サイトで利用できますか？
-
利用規約の範囲内で使用できます。
活用例のまとめ
説明リスト（DL）は以下のような用途で特に活躍します。
- 用語解説
- 商品紹介
- サービス紹介
- プロフィール情報
- ブログ運営情報
- FAQの簡易表示
- スペック表記
「項目」と「説明」をセットで伝えたい場合は、説明リスト（DL）を活用すると記事の可読性を高められます。
SWELL説明リスト（DL）と他ブロックとの違い
SWELLには説明リスト（DL）以外にも、FAQブロックやテーブルブロック、リストブロックなど情報を整理できるブロックが用意されています。
どれも似た用途で使えますが、それぞれ得意な使い方が異なります。
目的に応じて使い分けることで、読者にとって分かりやすい記事を作成できます。
FAQブロックとの違い
FAQブロックは、質問と回答を表示することに特化したブロックです。
一方で説明リスト（DL）は、質問以外の情報整理にも幅広く利用できます。
| 比較項目 | 説明リスト（DL） | FAQブロック |
|---|---|---|
| 用途 | 項目と説明の整理 | 質問と回答 |
| 用語解説 | ||
| 商品紹介 | ||
| よくある質問 | ||
| 構造化データ |
よくある質問を掲載する場合はFAQブロック、用語解説やサービス紹介には説明リスト（DL）がおすすめです。
テーブルブロックとの違い
テーブルブロックは、複数の項目を比較する場合に適しています。
一方で説明リスト（DL）は、1つの項目に対して説明を付ける用途に向いています。
| 比較項目 | 説明リスト（DL） | テーブル |
|---|---|---|
| 情報整理 | ||
| 比較表示 | ||
| スマホ表示 | ||
| 入力の手軽さ |
例えば、
- 用語集
- プロフィール
- 商品スペック
などは説明リスト（DL）が向いています。
一方、
- WordPressテーマ比較
- サーバー比較
- ASP比較
などはテーブルブロックの方が見やすくなります。
リストブロックとの違い
リストブロックは箇条書きを表示するためのブロックです。
項目を並べるだけならリストブロックでも十分ですが、説明を加える場合は説明リスト（DL）の方が分かりやすくなります。
例えば、
リストブロック
- SWELL
- AFFINGER6
- Cocoon
説明リスト（DL）
- SWELL
-
ブロックエディター完全対応テーマ
- AFFINGER6
-
SEO・収益化機能が豊富なテーマ
- Cocoon
-
無料で利用できるテーマ
どのブロックを選べばよい？
ブロック選びに迷った場合は、以下を目安にしてください。
| 目的 | おすすめブロック |
|---|---|
| 用語解説 | 説明リスト（DL） |
| サービス紹介 | 説明リスト（DL） |
| プロフィール情報 | 説明リスト（DL） |
| 質問と回答 | FAQブロック |
| 商品比較 | テーブルブロック |
| 箇条書き | リストブロック |
用途に合わせて使い分けることで、記事の可読性や情報の伝わりやすさが向上します。
SWELL説明リスト（DL）を使うメリット
説明リスト（DL）ブロックを活用すると、情報を整理して分かりやすく伝えられます。
特に用語解説やサービス紹介など、「項目」と「説明」をセットで掲載したい場合に便利です。
ここでは主なメリットを紹介します。
情報を整理して見やすく伝えられる
説明リスト（DL）は項目名と説明文がセットになっているため、読者が内容を理解しやすくなります。
例えば用語集やプロフィール情報なども、見やすく整理して表示できます。
情報が整理されることで、記事全体の可読性向上にもつながります。
スマホでも読みやすい
SWELLの説明リスト（DL）はレスポンシブ対応のため、スマホやタブレットでも見やすく表示されます。
テーブルのように横スクロールが発生しにくいため、モバイルユーザーにも優しいレイアウトを実現できます。
- コード不要で簡単に作成できる
-
HTMLやCSSの知識がなくても、ブロックを追加して入力するだけで利用できます。
初心者でも簡単に導入できるため、ブログ運営を始めたばかりの方にもおすすめです。
- 記事の可読性向上につながる
-
文章だけが続く記事は読みにくくなりがちです。
説明リスト（DL）を適度に活用することで、読者が必要な情報を見つけやすくなり、離脱防止にも役立ちます。
SWELL説明リスト（DL）を使う際の注意点
便利な説明リスト（DL）ですが、使い方によっては逆に読みにくくなることもあります。
以下のポイントに注意して活用しましょう。
項目数が多すぎると読みにくくなる
説明リスト内の項目が多すぎると、かえって視認性が低下します。
項目数が増える場合は、見出しで分割したり、テーブルを利用したりする方法も検討しましょう。
比較表にはテーブルの方が向いている
複数の商品やサービスを比較する場合は、説明リスト（DL）よりもテーブルブロックの方が見やすくなります。
用途に応じて使い分けることが大切です。
説明文を長くしすぎない
説明文が長くなりすぎると、説明リスト本来の見やすさが失われます。
できるだけ簡潔にまとめ、詳細な説明は別の段落で補足するのがおすすめです。
SWELL説明リスト（DL）に関するよくある質問
まとめ！SWELL説明リスト（DL）の使い方｜設定方法と活用例を初心者向けに解説
SWELLの説明リスト（DL）ブロックは、項目名と説明文をセットで表示できる便利なブロックです。
用語解説やサービス紹介、プロフィール情報など、さまざまな用途で活用できます。
この記事のおさらいです。
- 説明リスト（DL）は項目と説明を整理できる
- HTMLのDL・DT・DD構造を簡単に利用できる
- コード不要で作成できる
- スマホでも見やすく表示される
- FAQやテーブルと使い分けることで効果的に活用できる
情報を分かりやすく整理したい場合は、ぜひSWELLの説明リスト（DL）ブロックを活用してみてください。
