【background-image】の使い方
背景画像も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【background-image】の書式
background-image: url(画像の保存先URL);
background-image: none;
- 背景画像を指定する時は、画像の保存先URLまたは、キーワードで指定する。
- キーワードは、noneのみで背景画像の表示なし（デフォルト）。
- 背景に画像を指定するとタイル状に画像を繰り返して表示する。
- background-repeatで背景画像の並び方を指定できる。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【background-image】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
<body>背景画像を指定
▼ 表示
・sample-image；
▼ HTML
<body> <p>「<body>」の設定は、基本セレクタで指定しています。HTMLのコピペは不要で、CSSのみコピペすると指定できます。</p> </body>
▼ CSS
body {
background-image: url(back-sampleimage01.gif);
}
<ul>背景画像を指定
▼ 表示
・sample-image；
▼ HTML
<ul class="sample02"> <li>SEO対策に必要な、</li> <li>HTML,CSSのタグ辞典です。</li> <li>コピペしてお使い下さい。</li> </ul>
▼ CSS
.sample02 {
background-image: url(back-sampleimage02.gif);
}
<p>背景画像を指定
▼ 表示
・sample-image；
▼ HTML
<p class="sample02">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>
▼ CSS
.sample03 {
background-image: url(back-sampleimage03.gif);
}
<table>背景画像を指定
▼ 表示
・sample-image；
▼ HTML
<table class="sample03"> <p>SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p> </table>
▼ CSS
.sample04 {
width: 400px;
text-align: left;
border: 3px solid #FF9900;
padding: 10px;
margin: 20px auto;
background-image: url(back-sampleimage03.gif);
}