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で使えるリストブロックはol、ulのみ。dlを作成出来るプラグインを探す。
olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。
liにcounter-increment: カウンタ名、li::beforeにcontent: 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)CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。
Pixivの作品タイトルと同様、全文読めないのでStylusで解決。
タイトル部分の幅を広く、フォントを少し拡大し、太字解除。
アイコンは無駄に空いているチャンネル名の横に移動。
タイトルが15字程度で切れ、カーソルを合わせてもツールチップは出ない。
ユーザビリティが最悪なのでStylusで解決する。
.cTvdTb,
.dpYXxb {
white-space: normal;
}
