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

%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8a%e3%81%ae%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e4%bd%9c%e3%82%8a

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

  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
  • 並び項目
CSS
 解 説 

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

html

check_1

  • リスト1
  • リスト2
  • リスト3

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント

お名前 *

ウェブサイトURL