ulタグを使ったリストでマーカー記号の代わりに画像を表示するには

投稿やページの中でリストを表示するタグとしてulタグがありますが、このリストの先頭が画像になっているものをよく見ますね?何も設定しないと「・」が表示されて、まさしく「リスト」ですよ!と言わんばかりの表示になってしまいますが、画像の後にリストが表示されるとちょっとカッコいい、それを実装する方法を紹介します。

スポンサーリンク

単純にリストマークを変更する方法

リストマークに表示される「・」を単純に非表示にしたり、他のものに変更したりする場合は

<ul style=”list-style:ここに条件”>
を使用します。普通にulタグだけを記述すれば「・」が表示されます。ここを別の記号にする場合には上記のulタグを使用して「ここに条件」となっている場所に

  • none/マーカー表示なし
  • disc/●
  • circle/○
  • square/■

などが表示されます。その他の記号については
に詳しく記載されていました。↑のサイトではCSSを使って記述する方法として紹介されていますが、これらはそのままulタグの中に記述しても動作します。

リストマークに画像を設定する方法

さて、ここからが本題です。さすがにタグの中に記述しても動作しませんのでCSSを使って設定していきます。ただ、ulタグを使ったリスト全てに対して設定してしまうと、自動的に表示するウィジェットなどにもすべて適用されてしまい見栄えが悪くなってしまう場合がありますので、指定した場合にのみ画像をリストマークの代わりに表示します。
基本的なタグの書き方は

<ul id="id名">
	<li></li>
	<li></li>
	<li></li>
</ul>
となります。「ID名」となっているところは適当な英数字で指定します(これをCSSセレクタと言い、ulタグでIDが「ID名」の場合」はそれに沿ったCSSを適用するという意味になります)

このセレクタが指定されたときに適用するCSSを追記していきます

/* 画像付リスト */
#id名 {
list-style:none;
padding:0;
margin:0;
}
#id名  li {
  background-image: url("テーマの中の相対参照");
  background-size:幅px 高さpx;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 右余白px;
 }

.class名となっている場所にタグで指定したIDと同じものを記述します
内容としてはリスト全体の設定とリストの中身の設定の2つになります。

#id名 {
list-style:none;
padding:0;
margin:0;
}

はリスト全体の設定で、

  1. list-style:none;は「リストのマークを表示しない」という意味
  2. padding:0;margin:0;は隙間を設けないという意味

です。ここはそのままコピペで大丈夫です。

#id名  li {
  background-image: url("テーマの中の相対参照");
  background-size:幅px 高さpx;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 右余白px;
 }
はリスト1行1行に対する指示になり

  1. background-image: url(“テーマの中の相対参照”);「テーマの中の相対参照」にテーマフォルダから見た画像の場所を指定します
  2. background-size:幅px 高さpx;は表示するマークの幅と高さです
  3. background-repeat: no-repeat;はマークを1回だけ表示しますという意味です
  4. padding: 0px 0px 0px 右余白px;は文字の表示を開始する位置です

注意点は

  1. 「テーマの中の相対参照」 例)テーマフォルダの中に「images」というフォルダがあり、その中の「01.jpg」を指定する場合にはimages/01.jpgと指定します。
  2. 4の文字開始位置よりも2のマークの幅が大きいとマーク画像と文字が重なってしまいます

これで、リストに画像を使いたいところに

<ul id="id名">
	<li></li>
	<li></li>
	<li></li>
</ul>
でリストを作れば画像が先頭に表示されるようになります。

この方法を応用するとリストのIDで先頭に表示する画像を切り替えることができます。

しかし、リストを作る度にいちいちセレクタを入力するのは面倒なのでWordpressなら

定型HTMLタグや定型文をボタン1つで挿入できる、Wordpressプラグイン「Add quick tag」は昔からある定番のプラグインですが、本当に便利でどんどんボタンを増やしたくなってしまうほどシンプルかつ高機能な無料追加プラグインなので、あえてご紹介

でボタン化しておけば簡単にタグを挿入することができます。

1つ面倒なのは過去の投稿などに適用させたい場合、過去記事を1つ1つ修正する必要があることですが、これもWordpressなら「Search Regex」という便利なプラグインで一括変換できます。ただし、このプラグインは特定の文字列を一括変換するためのプラグインですから気を付けないと変更したくないものまで変更されてしまいますので使用には注意が必要です。

トップへ戻る