ショートコードを使って画像入りのリストの作り方

ショートコードを使って画像入りのリストの作り方

CSS
　解　説　

1行目はコード説明です。
2行目は ul で sample1 というクラス名を指定したときの、liタグ範囲内に適用される設定を開始するという意味になります。上のままではクラス名が sample1 なので、任意で変更してください。「s」の前のピリオドは消さないように気をつけてください。
3行目で箇条書きテキスト1文字目の開始位置を調整しています。画像は背景扱いなので、この指定がないと画像と1文字目が被ります。
4行目で表示させたい画像を指定しています。””は消さずに残します。
5行目で画像を繰り返し表示しない（1個だけ表示する）設定をしています。この設定がないと「li」～「/li」タグの範囲内が、何個もの同じ画像で埋まります。以下の表示画面であれば「リスト1」という文字範囲に双葉の画像が何個も並び、文字と重なって表示されることになります。（背景設定のため）
6行目は、その1個の画像を指定範囲内のどこに表示するか指示しています。マーカーとして使うものなので、左端に表示されるようにしてあります。
7行目は、初期設定のマーカーを非表示にする設定です。この設定がないと、画像とマーカーの両方が表示されてしまいます。うまく画像の下にマーカーが隠れて目には見えないこともありますが、必要ないので
非表示にしておきましょう。

html