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

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

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

【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の意味

説明リストの使い方

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

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

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

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

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

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

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

スタイル

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

英単語帳

英単語

意味

各国の首都

国名

首都

商品紹介

商品名

商品の説明

Q&A

質問

回答

調味料

ニンニク

1片

生姜

5g

しょうゆ

大さじ3

みりん

大さじ1

酒

大さじ1

ステップ

ステップ 1

テキストやブロック（例えば画像）

ステップ 2

テキストやブロック（例えば画像）

ステップ 3

テキストやブロック（例えば画像）

ランキング

1位

テキストやブロック（例えば画像）

2位

テキストやブロック（例えば画像）

3位

テキストやブロック（例えば画像）

今回は以上です。