【WordPress】定義リストdl,dt,dd用のスタイルを再利用ブロックへ登録する

WordPress標準エディターであるGutenbergには、2022年になっても定義リストが準備されていない。そこで、再利用ブロックとして登録し、いつでも定義リストをエディターから呼び出せるようにする。

完成見本はこちら。

---------------------------------------

語句
定義

---------------------------------------

実装手順

再利用ブロックを登録する

再利用ブロックのコードは下記のように登録し、ブロックの名称は「定義リスト」とした。


<dl class="dictionary">
  <dt>語句</dt>
  <dd>定義</dd>
</dl>

スタイルシートにCSSを記述する


.dictionary {
  border: 1px solid #000;
}
.dictionary dt {
  display: inline-block;
  padding: 6px 30px 6px 35px;
  border-radius: 5px;
  text-indent: -20px;
  font-weight: bold;
  font-size: 0.9em;

}
.dictionary dt:before {
  content: "";
  font-weight: bold;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(icon/check.svg);
  background-size: contain;
  vertical-align: text-bottom;
  margin-right: 15px;
}
.dictionary dd {
  padding: 10px 10px 10px 48px;
  margin-left: 0;
  font-size: 0.9em;
}

ブロックエディターで再利用ブロックタブの「定義リスト」を選択し挿入する。

「定義リスト」のHTMLソースを編集する。

完成

text-underline-offset
CSS のプロパティで、 text-decorationを使用して適用された下線のオフセット距離を設定する。

再利用ブロックを使用するときは、通常ブロックへ変換を行わずに記事を保存をすると親ブロックが書き換わってしまうので注意する。

もし親ブロックを書き換えてしまったときは、再利用ブロックの管理にてブロックの再編集を行う。

注意

エディターに再利用ブロックを挿入したら、すぐに通常ブロックへ変換を行うこと

以上により、WordPressでも定義リストを楽に使用できるようになった。

Related Tags