ショートコードを使って画像入りのリストの作り方
- 並び項目
- 並び項目
- 並び項目
並び項目
並び項目
並び項目
並び項目
並び項目
並び項目
1 2 3 4 5 6 7 8 9 10 11 |
.infomartion{ overflow:hidden; margin:0 0 20px; } ul.sample1 li { padding-left: 1.5em; background-image: url("アップロードした画像URL"); background-repeat: no-repeat; background-position: 0 0.2em; list-style-type: none; } |
1行目はコード説明です。
2行目は ul で sample1 というクラス名を指定したときの、liタグ範囲内に適用される設定を開始するという意味になります。上のままではクラス名が sample1 なので、任意で変更してください。「s」の前のピリオドは消さないように気をつけてください。
3行目で箇条書きテキスト1文字目の開始位置を調整しています。画像は背景扱いなので、この指定がないと画像と1文字目が被ります。
4行目で表示させたい画像を指定しています。””は消さずに残します。
5行目で画像を繰り返し表示しない(1個だけ表示する)設定をしています。この設定がないと「li」~「/li」タグの範囲内が、何個もの同じ画像で埋まります。以下の表示画面であれば「リスト1」という文字範囲に双葉の画像が何個も並び、文字と重なって表示されることになります。(背景設定のため)
6行目は、その1個の画像を指定範囲内のどこに表示するか指示しています。マーカーとして使うものなので、左端に表示されるようにしてあります。
7行目は、初期設定のマーカーを非表示にする設定です。この設定がないと、画像とマーカーの両方が表示されてしまいます。うまく画像の下にマーカーが隠れて目には見えないこともありますが、必要ないので
非表示にしておきましょう。
1 2 3 4 5 6 7 8 9 |
.infomartion{ overflow:hidden; margin:0 0 20px; <ul class="sample1"> <ul class="sample1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>} |