【SWELL】説明リスト（DL）の使い方【事例付き】

2024/01/022024/07/04

悩む人

SWELLブロックで用意されている説明リスト（DL）の使い方について教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

説明リストとは
説明リストの使い方
説明リストを使った事例

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

【SWELL】説明リスト（DL）の使い方

説明リストとは

「項目のタイトル」と「項目の説明」をセットで表示できるブロックです。

説明リストの完成版

※ テキストだけでなくブロック（例えば画像）を入れることもできます。

創作者: マーベル・スタジオ
初作品: アイアンマン（2008年）
所有者: ウォルト・ディズニー・カンパニー
期間: 2008年–現在

完成版のコード


<dl>
    <dd>創作者</dd>
    <dt>マーベル・スタジオ</dt>
    <dd>初作品</dd>
    <dt>アイアンマン（2008年）</dt>
    <dd>所有者</dd>
    <dt>ウォルト・ディズニー・カンパニー</dt>
    <dd>期間</dd>
    <dt>2008年–現在</dt>
</dl>

DL・DD・DTの意味

DL（description list）= 説明リスト
DD（description term）= 項目のタイトル
DT（definition / description）= 項目の説明

説明リストの使い方

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「説明リスト（DL）」を選択します。

説明リスト（DL）を選択後、（ブロックを追加）をクリックします。

表示された下記の赤枠から「項目のタイトル（DT）」「項目の説明（DD）」を選択します。

または、「すべてを表示」を選択します。

「項目のタイトル（DT）」「項目の説明（DD）」を、選択もしくはドラッグ＆ドロップで追加することもできます。

スタイルの変更は、（設定）の「ブロック」＞「スタイル」から行うことができます。

スタイル

創作者: マーベル・スタジオ
初作品: アイアンマン（2008年）
所有者: ウォルト・ディズニー・カンパニー
期間: 2008年–現在

【SWELL】説明リスト（DL）を使った事例

英単語帳

英単語: 意味

各国の首都

国名: 首都

商品紹介

商品名: 商品の説明

Q&A

質問: 回答

調味料

ニンニク: 1片
生姜: 5g
しょうゆ: 大さじ3
みりん: 大さじ1
酒: 大さじ1

ステップ

ステップ 1: テキストやブロック（例えば画像）
ステップ 2: テキストやブロック（例えば画像）
ステップ 3: テキストやブロック（例えば画像）