【list-style-image】の使い方
リストマークの画像も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【list-style-image】の書式
list-style-image: 値;
- リストマークに画像を指定する場合は、画像保存先URLで指定する。
- url(画像の保存先URL) リストマークに画像を指定
- キーワードはnone（リストマークなし（デフォルト））のみです。
- 対応していないブラウザもあるので注意すること！
- リストイメージ（list-style-image）を指定すると、リストタイプ（list-style-type）で指定でリストマークを指定していてもリストイメージが優先される。
- リストイメージが参照できなかった場合は、リストタイプ（list-style-type）で指定したリストマークが表示される。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【list-style-image】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
リストマークを<ul>で「list-image01.jpg」に指定
▼ 表示
・sample-image；
▼ HTML
<ul class="sample01"> <li>リストマークの画像は、画像の保存先URLで指定。</li> <li>対応していないブラウザもあるので注意！</li> <li>外部CSS指定すると、アクセスアップにお役立ちます。</li> </ul>
▼ CSS
.sample01 {
list-style-image: url(list-image01.jpg);
}
リストマークを<ol>で「list-image02.jpg」に指定
▼ 表示
※“<ol>”を指定しても“list-style-image”が優先されます。
・sample-image；
▼ HTML
<ol class="sample02"> <li>リストマークの画像は、画像の保存先URLで指定。</li> <li>対応していないブラウザもあるので注意！</li> <li>外部CSS指定すると、アクセスアップにお役立ちます。</li> </ol>
▼ CSS
.sample02 {
list-style-image: url(list-image02.jpg);
}
リストマークを<ol>で「none」に指定
▼ 表示
※“none”を指定するとデフォルトになります。
▼ HTML
<ol class="sample03"> <li>リストマークの画像は、画像の保存先URLで指定。</li> <li>対応していないブラウザもあるので注意！</li> <li>外部CSS指定すると、アクセスアップにお役立ちます。</li> </ol>
▼ CSS
.sample03 {
list-style-image: none;
}