定義リスト(dl)・用語(dt)・説明(dd)を組み合わせて利用できる定義リストを作成できるブロックです。
※このブロックは yStandard Toolbox v1.21.0から利用できます。
目次
ブロックの特徴
定義リストブロックでは「用語(dt)」、テキスト入力のみできる「説明(dd)シンプル」、任意のブロックを追加できる「説明(dd)入れ子」、dt・ddを横並びに表示できる「横並び」を組み合わせて利用できます。
柔軟な余白設定
用語(dt)・説明(dd)ブロックでは内側余白(padding)、外側余白(margin)を柔軟に設定できます。
また、モバイル・タブレット・PCごとに設定も変更できるため、様々なレイアウトに柔軟に対応できます。
横並びでの縦に並べるタイミング、dt幅の設定
横並びの定義リストでは、モバイル・タブレットの画面サイズで縦に並べるようにするか設定できます。
タブレット・PCでは横並びだけど、モバイルでは横並びを崩して縦に並べたり、モバイルでも横並びにしたままにすることもできます。
また、用語(dt)の幅も固定できるため、用語の幅が揃ったリストの作成も簡単にできるようになっています。
定義リストサンプル
シンプルなリスト
用語(dt)と説明(dd)を表示するシンプルなリストです。
説明(dd)にはテキストのみ入力できる「シンプル」版と任意のブロックを追加できる「入れ子」版があります。
- 説明タイトル
- 説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお
- 説明タイトル 背景色あり
- 説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお説明文あいうえお
-
説明(dd)入れ子であればテキスト以外のブロックも追加できます。
カスタマイズありきの一風変わったWordPressテーマ「yStandard」 「自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったテーマ…wp-ystandard.com
横並びの説明
- 横並び説明のタイトル
-
デフォルトではPC・タブレットで横並び、モバイル表示で縦に並びます
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお - 横並び説明のタイトル
-
デフォルトではPC・タブレットで横並び、モバイル表示で縦に並びます
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお
- 枠線付きの横並びリスト
-
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお
- 枠線付きの横並びリスト
-
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお
- 枠線付き&モバイルでも横並びのリスト
-
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお
- 枠線付き&モバイルでも横並びのリスト
-
横並びリストの説明文あいうえお 横並びリストの説明文あいうえお 横並びリストの説明文あいうえお
定義リストブロックの追加方法
定義リストブロックは「[ys]yStandard Toolbox」カテゴリーにある「定義リスト(dl)」を選択します。
定義リストブロックを追加すると、リスト内の用語・説明の組み合わせを選ぶ画面が表示されます。
作成したいリストのパターンをクリックします。
定義リストブロックの設定
設定一覧
定義リスト(dl)
- 設定
-
内容
- ■余白
-
- 外側余白(margin)
-
ブロック外側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能
定義リスト 用語(dt)
- 設定
-
内容
- ■背景色
-
- 背景色
-
背景色
- ■テキスト
-
- フォントサイズ
-
文字サイズ
※デスクトップ・タブレット・モバイルで別々の設定が可能 - 色
-
文字色
- 太さ
-
文字の太さ
- スタイル
-
文字のスタイル
- line height
-
line height (行高さ) ※上級者向け
- letter spacing
-
letter spacing (文字間隔) ※上級者向け
- ■余白
-
- 外側余白(margin)
-
ブロック外側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能 - 内側余白(padding)
-
ブロック内側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能
定義リスト 説明(dd)シンプル
簡単なテキスト入力ができるシンプルな説明(dd)のブロックです
- 設定
-
内容
- ■背景色
-
- 背景色
-
背景色
- ■テキスト
-
- フォントサイズ
-
文字サイズ
※デスクトップ・タブレット・モバイルで別々の設定が可能 - 色
-
文字色
- 太さ
-
文字の太さ
- スタイル
-
文字のスタイル
- line height
-
line height (行高さ) ※上級者向け
- letter spacing
-
letter spacing (文字間隔) ※上級者向け
- ■余白
-
- 外側余白(margin)
-
ブロック外側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能 - 内側余白(padding)
-
ブロック内側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能
定義リスト 説明(dd)入れ子
説明(dd)ブロック内に任意のブロックを追加できるブロックです。
- 設定
-
内容
- ■背景色
-
- 背景色
-
背景色
- ■テキスト
-
- 色
-
文字色
- ■余白
-
- 外側余白(margin)
-
ブロック外側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能 - 内側余白(padding)
-
ブロック内側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能
定義リスト(横並び)
用語(dt)と説明(dd)を横並びに表示できるブロックです。
- 設定
-
内容
- ■横並び設定
-
- モバイルで縦に並べる
-
モバイル表示でdtとddを縦に並べるかの設定
（初期値 – ON） - タブレットで縦に並べる
-
タブレット表示でdtとddを縦に並べるかの設定
（初期値 – OFF） - ■サイズ
-
- 用語(dt)の幅
-
用語(dt)の幅
※デスクトップ・タブレット・モバイルで別々の設定が可能 - ■枠線
-
- 太さ
-
枠線の太さ(px)
- スタイル
-
枠線のスタイル
- 色
-
枠線の色
- ■余白
-
- 外側余白(margin)
-
ブロック外側の余白
※デスクトップ・タブレット・モバイルで別々の設定が可能