ホームページビルダー教室では、もうひとつワードプレス・テンプレートを使ってサイトをつくっています。 パソコン教室横浜.net というサイトです。今回は、そこにバナー(JALマイレージクラブ)を追加しました。 バナーの画像はJAL指定のものを利用しています。ワードプレス・ダッシュボードからウィジットの設定をして、サイドバーにバナーを設置しました。
アーカイブ
ホームページビルダー フルCSSテンプレートの使い方 バナーの追加
ホームページビルダー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); }