WordPressで定義リストdlを使う

2列構成・サイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。
dl(定義リスト)のグリッド化で実装。

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

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

続きを読む WordPressで定義リストdlを使う

olの連番をcounter関数で表示

olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。

CSS追加

licounter-increment: カウンタ名
li::beforecontent: counter(カウンタ名)を指定する。

ol li
	position: relative
	list-style-type: none
	counter-increment: cnt
	&::before
			position: absolute
			width: 1em
			height: 1em
			left: -1.4em
			text-align: center
			content: counter(cnt)
続きを読む olの連番をcounter関数で表示

リンクにサイトアイコンを表示

CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。

アイコンDL

続きを読む リンクにサイトアイコンを表示

YouTubeの動画タイトルを全文表示

Pixivの作品タイトルと同様、全文読めないのでStylusで解決。
タイトル部分の幅を広く、フォントを少し拡大し、太字解除。
アイコンは無駄に空いているチャンネル名の横に移動。

適用前・適用後
続きを読む YouTubeの動画タイトルを全文表示