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

当ページのリンクには広告が含まれています。
初心者ブロガー

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

  • 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

テキストやブロック(例えば画像)

ランキング

1位

テキストやブロック(例えば画像)

2位

テキストやブロック(例えば画像)

3位

テキストやブロック(例えば画像)

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容