ホームページビルダー フルCSSテンプレートの使い方 バナーの追加

ホームページビルダー18 フルCSSテンプレートにはバナー画像があらかじめ用意されています。その使い方は簡単な面と、難しい面があります。

ホームページビルダー フルCSSテンプレートの使い方

  バナーの数を減らすことは簡単です。リスト項目の編集から削除することができます。画像の編集は背景画像の編集で可能です。 バナーの数を増やすことは簡単ではないようです。(以下にテンプレートのHMTL,CSSコードの抜粋を載せています。) バナーはリストで構成されています。バナー画像は各リスト項目の背景として、id ごとに指定されています。 任意の画像を持つバナーを増やすには、リスト項目を別のIDで増やして、そのIDに対するスタイルをCSSに追加する必要がありそうです。 ページ(HTML)

 <div id="banner">
 <h3 class="hpb-c-index">バナースペース</h3>
 <ul>
 <li><a href="access.html" id="banner-access">アクセス</a>
 <li><a href="#" id="banner-netshop">ネットショップ</a>
 <li><a href="itemlist.html" id="banner-category1">商品カテゴリ1</a>
 <li><a href="itemlist.html" id="banner-category2">商品カテゴリ2</a>
 <li><a href="itemlist.html" id="banner-category3">商品カテゴリ3</a>
 </ul>
 </div>

スタイル(CSS)
#banner a#banner-access{
 /* アクセスバナー */
 background-image : url(banner_2G_01.png);
}
#banner a#banner-netshop{
 /* ネットショップ */
 background-image : url(banner_2G_02.png);
}
#banner a#banner-category1{
 /* 商品カテゴリ1 */
 background-image : url(banner_2G_03.png);
}
#banner a#banner-category2{
 /* 商品カテゴリ2 */
 background-image : url(banner_2G_04.png);
}
#banner a#banner-category3{
 /* 商品カテゴリ3 */
 background-image : url(banner_2G_05.png);
}