お客さまのアメブロで告知記事を
作成していたとき、
チェックマークを使って
箇条書きにしたいけど、
良い素材がなかったので、
アメブロアプリのタイトルの装飾で
使われいた画像でHTML表記を
工夫してみました。
アメブロアプリのタイトル装飾に使われていた
この装飾
のチェック画像を利用しています。
標準のアメブロのリストの位置は
- この位置
なのでちょっと右寄りにはなります。
- りすと
- 途中で改行しても
ちゃんと画像は一行目についたまま
上で使っている
ピンク色のチェックマーク使った
リストのHTML表記はこちらです。
<ul><li style="list-style-type: none; background-image:url(https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/limited009_check.png); background-repeat: no-repeat; background-size: 1em;padding-left: 1.5em; background-position: left top;">りすと</li></ul>
解説すると…
ただリストタイプを画像指定するだけだと
元画像がちょっと大きくて文字サイズと
合わなかったので、liの背景に指定する
形を取っています。
よかったらお使いくださーい
