ホームページビルダー匠ボタン（スタイリッシュエフェクト）

匠ボタン（スタイリッシュエフェクト）の使い方

匠ボタン

ホームページビルダーVer9から登場した、匠ボタン（スタイリッシュエフェクト）。
たくさんのスタイルが用意された、スタイルシートがテンプレートで用意されています。
使い方の秘訣は、スタイルの設定。つまり、class と id のタグ及び .ｃｓｓです。

最初にこのページを、「ファイル ⇒ 名前をつけて保存」してみましょう。
takumi1.html と takumi1_files が保存されます。
takumi1_files を開くと、hpb9tm10_7.css のファイルがあります。
これが、このページ（サイト）のデザインを決定しているスタイルシートです。
この hpb9tm10_7.css を、開いてみます。
メモ帳で開きますが、自称師範代の私は TeraPadで開いています。
（ TeraPad ；フリーソフトで、html cgi 等を書き換えるときに便利です。）

匠ボタン使い方のページで説明しているように、スタイルの編集画面で
TD タグに classを設定すると下記のように見えます。
（注意）直接、背景や文字色を設定するのではありません。

◆ ヘッダー部のclass；head

TDタグ； hpb-head-cell1

TDタグ； hpb-head-cell2

TDタグ； hpb-head-tb1-cell1

TDタグ； hpb-head-tb1-cell2

◆ リンクメニュー部のclass

TDタグ； hpb-vmenu1-head

TDタグ； hpb-vmenu1-hil

TDタグ； hpb-vmenu1-plain

TDタグ； hpb-vmenu1-idle1

TDタグ； hpb-vmenu1-idle2

TDタグ； hpb-vmenu1-foot

◆表のTDタグにそれぞれのclassを設定しました

TDタグ； hpb-lb-tb1-cell1

TDタグ； hpb-lb-tb1-cell2

TDタグ； hpb-lb-tb1-cell3

TDタグ； hpb-lb-tb1-cell4

TDタグ； hpb-lb-tb1-cell5

TDタグ； hpb-lb-tb2-cell3

TDタグ； hpb-lb-tb2-cell4

TDタグ； hpb-lb-tb3-cell3

>> 大きい表があるので次のページへ