WordPressで定義リストdlを使う

2カラム・内容に応じてサイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。

dl(定義リスト)のグリッド化で実装。

肉
食べる
野菜
食べない
<dl class="grd">
  <dt>肉</dt>
  <dd>食べる</dd>
  <dt>野菜</dt>
  <dd>食べない</dd>
</dl>
dl.grd
	display: grid
	grid-template-columns: max-content 1fr
	column-gap: .5em

シンプルで理想的だが、WordPressで使えるリストブロックはol、ulのみ。
dlを作成出来るプラグインを探す。

プラグイン

  • Simple Definition List Blocks
    1カラムのみ。シンプルなコード。項目の増減が面倒。
    更新されていないが簡素な為大丈夫そう。
  • Description List Block
    2カラム対応。コードが汚い。項目数が入力可能。
    鋭意更新中だが、レビュー3件中2件が★1で「WordPressが壊れた」と言われている。
  • Jetpack
    Markdownブロックを追加し、: 詳細の形式で書く。
    他にも多数機能がある重いプラグインなので避けたい。

少し試した限りではDescription List Blockでエラーは出なかったが、インラインスタイルが鬼のように書かれて耐え難かったのでSimple Definition List Blocksにする。

設定

再利用ブロック化

  1. definition listブロックを追加
  2. 設定 > ブロック > 高度な設定でグリッドレイアウト用に追加CSSクラスを設定
  3. dt、ddブロックをいくつか作成
  4. definition listブロックを選択した状態で再利用ブロックを作成
  5. 呼び出しやすい名前を付けて保存

運用

新規ブロックに/名前を入力して再利用ブロックを呼び出し、通常のブロックに変換して使用する。

関連記事