本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー教室
ホームページ作成無料相談受付中(こちらをクリック!!)
TEL 045-567-8393 (平日11~20時 土11~17時 日祝休 留守電不可)
ホームページビルダー教室
ホームページ作成無料相談受付中(こちらをクリック!!)
TEL 045-567-8393 (平日11~20時 土11~17時 日祝休 留守電不可)
ホームページビルダー18 フル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); }