●ページ準備

1.メニュー挿入

HTMLソースを開くと、コメントがありますので
<!--ここから-->〜<!--ここまで-->と書かれている部分をコピーしビルダーへ挿入します。
<HEAD>への挿入と<BODY>内への挿入がありますのでコメントに従い、タグの貼り付けを行なってください。
タグの貼りつけ方はこちらを参考にしてください。

<BODY>内への挿入は、メニューバーを設置したい個所へカーソルを持っていきコピーしたタグの貼りつけを行ないます。
その際、「ページ編集」画面では、サブメニュー部分が上の方に残っていますが、決して位置を移動しないでください。
プレビュー画面で表示される位置を確認してください。

※ 注意

メニューバーは「ページ編集」画面上では他のテキストと重なって表示されてしまうので編集がやりにくくなります。
メニューバーを挿入したいページをある程度完成させた後に、メニューバーの設定を行なったほうが作成しやすいと思います。

2.JavaScript挿入

テンプレートにはスクリプトタグが挿入されていないため、そのままではエラーが起こります。
ビルダーに用意されているJavaScriptを挿入します。

「ページの属性」または、「ページのプロパティ」にある「その他」タブをクリックし、「スクリプトの編集」ボタンをクリックしてスクリプトの挿入を行ないます。

挿入の方法は、左側にある「オブジェクトを表示します」と「オブジェクトを隠します」の2つのライブラリをそれぞれドラッグし、右側へ移します。
その際、パラメーターの設定画面が表示されますが何も入力しないままOKをクリックしてください。
_HpbShowObj(lId)と_HpbShowObj(lId)という関数名のスクリプトが挿入されます。

※追加 05/01/26

パラメータの設定画面で何も入力しなくても、HEAD内に空白のパラメーターが挿入されるようです。
下の画像を参考に、必要のない部分を削除してください。
「//左のウィンドウからアイテムをドラッグして・・・・」という行を右クリックし、削除を選択します。 プレビュー画面で確認の際、「オブジェクトがありません」とメッセージが表示される場合はこの部分が挿入されている可能性があるので、確認し、削除してください。

スクリプト挿入の画像

●テキスト変更・リンクの挿入方法

フォーカス枠を目印に「レイアウト枠の属性」を表示しよう。
テンプレートをダウンロードし、ビルダーで開くと左図のような画面が表示されます。
ピンクの枠がフォーカス枠です。

左の図ではフォーカス枠になっているのは「レイアウト枠」です。
この状態で右クリック→レイアウト枠の属性を選択します。
レイアウト枠の属性が表示されない時は、ビルダー編集画面の右にある
←このボタンをクリックします。
(この時、フォーカス枠はレイアウト枠の個所を囲むようにしてください。)
ボタンをクリックして表示される中にレイアウト枠の属性があるので選択します。
レイアウト枠の属性が表示されたら。。
レイアウト枠の属性が表示されたら、サブメニューを変更したいIDのレイアウト枠を一番上に移動します。

例えば、
「menu1」の上にマウスポインタを乗せたとき表示されるサブメニュー(menu1_2)を編集したいときは、レイアウト枠の重なり部分を一番上に移動します。
*サブメニューのIDはメインメニューに「_2」の番号を加えたものになっています。
(menu3の場合は、menu3_2というように。)

移動の方法は
左図のように「重なり方」の個所を操作します。
menu1_2をクリックし、赤い丸で囲んでいるボタンの▲ボタンををクリックして重なり方を一番上に移動します。
ページ編集画面に戻ると、レイアウト枠内のサブメニューがmenu1_1の内容を表示していますのでテキストの変更やリンクの挿入が「ページ編集画面」から行なえます。
 サブメニューには5つづつの項目が設定できるように用意していますが、必要ない場合は削除してください

※注意 レイアウト枠内でmenu1_2_1〜menu1_2_5までそれぞれ1行づつフォーカス枠で囲まれます。
テキスト修正やリンクの挿入(1行分)を行う時、フォーカス枠内でテキストの変更やリンクの挿入を行なってください。
(図1)
●サブメニュー項目の追加
左の図を参考に操作してください。
  1. 「menu1_2_5」をフォーカス枠にします。(図1)
  2. キーボードの矢印キーで下方向キー(↓)を押します。(図2)
  3. 挿入→その他→HTMLタグ→DIVを選択→挿入(V7の場合)
  4. DIVタグが挿入され、項目を追加できるフォーカス枠で囲まれたスペースが現れます。(図3)
  5. フォーカス枠内にテキストを入力し、リンクの挿入を行ないます。
●サブメニューのサイズ
サブメニューの横幅は「最小サイズ」の「幅」部分の数値で変更できます。
しかし、メインメニューのサイズはページ編集画面では変更できません。
(HTMLソースで修正できる方はご自由に変更してください。ただし、修正した場合、レイアウト枠の位置を修正しないと設定しているイベントが動かなくなる可能性があります。タグを触ることが苦手な方はこのままお使い頂くことをオススメします。タグを修正後、表示されなくなったり、イベントが実行されなくても質問は受け付けません。)

※注意・・・「位置」の部分は変更しないように気をつけてください。
(テンプレートの初期値は、「左 100ピクセル」、「上 0ピクセル」に設定しています。)

●メインメニュー背景色の設定
セル背景色を設定していますので、セルの属性やカラーパレットから変更可能です。
また、枠線については、スタイルシート「.tsen」というClass名で設定しています。好みの色や太さに変更してください。
スタイルシートについては、こちらをクリック

●フォントサイズ、色の設定
スタイルシート「DIV」で一括設定しています。
メニュー、サブメニュー各々設定したい場合は、「DIV」へのスタイルを削除し、IDでのスタイルを設定してください。

メインメニューID名・・・・menu1〜menu5
(スタイルシートマネージャーでは設定していませんので各々の設定が必要な場合はID名をmenu1〜menu5で作成し、設定を行なってください。)

サブメニューID名・・・・・menu1_2〜menu5_1
(スタイルシートマネージャーで表示されます。
初期値・・IDスタイルではサブメニューの枠線のみ設定しています。)

その他、リンク設定等もスタイルシートで設定している部分もあります。
「スタイルシートマネージャー」を利用し、どのようなスタイルを設定しているのか確認の上、変更してください。
(図2)
(図3)