使い方など【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています投稿やページの中でリストを表示するタグとしてulタグがありますが、このリストの先頭が画像になっているものをよく見ますね?何も設定しないと「・」が表示されて、まさしく「リスト」ですよ!と言わんばかりの表示になってしまいますが、画像の後にリストが表示されるとちょっとカッコいい、それを実装する方法を紹介します。style="list-style:ここに条件">を使用します。普通にulタグだけを記述すれば「・」が表示されます。ここを別の記号にする場合には上記のulタグを使用して「ここに条件」となっている場所にnone/マーカー表示なしdisc/●circle/○square/■などが表示されます。その他の記号についてはマーカーの種類を指定するに詳しく記載されていました。↑のサイトではCSSを使って記述する方法として紹介されていますが、これらはそのままulタグの中に記述しても動作します。リストマークに画像を設定する方法さて、ここからが本題です。タグの中に記述しても動作しませんのでCSSを使って設定していきます。ulタグを使ったリスト全てに対して設定してしまうと、自動的に表示するウィジェットなどにもすべて適用されてしまい見栄えが悪くなってしまう場合がありますので、指定した場合にのみ画像をリストマークの代わりに表示します。id="id名"><li></li><li></li><li></li></ul>となります。右余白px;}.class名となっている場所にタグで指定したIDと同じものを記述します内容としてはリスト全体の設定とリストの中身の設定の2つになります。{list-style:none;padding:0;margin:0;}はリスト全体の設定で、list-style:none;は「リストのマークを表示しない」という意味padding:0;margin:0;は隙間を設けないという意味です。ここはそのままコピペで大丈夫です。例)テーマフォルダの中に「images」というフォルダがあり、その中の「01.jpg」を指定する場合にはimages/01.jpgと指定します。id="id名"><li></li><li></li><li></li></ul>[でリストを作れば画像が先頭に表示されるようになります。この方法を応用するとリストのIDで先頭に表示する画像を切り替えることができます。リストを作る度にいちいちセレクタを入力するのは面倒なのでWordPressなら定型タグや定型文をボタン1つで挿入できるプラグイン「AddQuicktag」でボタン化しておけば簡単にタグを挿入することができます。Regex」という便利なプラグインで一括変換できます。このプラグインは特定の文字列を一括変換するためのプラグインですから気を付けないと変更したくないものまで変更されてしまいますので使用には注意が必要です。BaseWordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです。