hpb18 徹底解説 ! HPをちょっとリッチにする方法【リッチメニュー】

hpb18 徹底解説 ! HPをちょっとリッチにする方法【リッチメニュー】 https://pasonal.com/wp-content/uploads/2014/09/Home-Page-Builder-18-Custamize-Thumbnailspsd.jpg 640 430 パソコン生活サポート Pasonal パソコン生活サポート Pasonal //pasonal.com/wp-content/uploads/2016/11/Pasonal-logo-default.png 2014年7月5日 2020年8月18日

前回はホームページビルダー18のサイトの画像を「LightBox風」にアレンジしました。今回は、グローバルメニューをちょっとリッチにカスタマイズしたいと思います。

※カスタマイズする前に必ず既存のファイルをバックアップしてください！
※hpb18の現在の作業データは「スタートメニュー > ドキュメント > mysite○○」です。（○○は番号）

グローバルメニューをリッチにカスタマイズ

画面をスクロールした時に、グローバルメニューを最上部に固定し、常に表示されるようにする。

サンプル

※画面下にスクロールすると本来隠れるはずのグローバルメニューが最上部に固定されます。

hpb18-custam-menufixedフォルダの中身

「css」…fixed.css
「js」…fixnav.js、jquery.rollover.js
「images」…空フォルダ

上記の「css」、「js」、「images」をhpb18の現在作業しているフォルダに入れます。

hpb18の作業ファイルの場所は、「スタートメニュー」 > 「ドキュメント」 > 「mysite○○（番号）」の中です。

この「mysite○○（番号）」の中に、上記の３つのファイルをそのまま入れます。

上記の場所に作業フォルダが見つからない場合

作業フォルダが見つからない場合は、以下の場所をお探しください。

hpb18を起動 > 上部メニュー「サイトの確認」 > ページを開く（どのページでもＯＫ） > 上部メニュー「ファイル」 > 名前を付けて保存

宣言部

<!--ナビゲーション上部固定-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="css/fixed.css" rel="stylesheet" type="text/css" media="all">
<script src="js/fixnav.js" type="text/javascript"></script>
<script src="js/jquery.rollover.js" type="text/javascript"></script>

hpb18を起動し、下記のコードを<head>～</head>内にコピーします。

２行目のコードは、すでに記述してある場合は不要になります。<head>～</head>内に一つしか記述できません。

グローバルメニュー部分

<div id="hpb-nav">
<h3 class="hpb-c-index">ナビゲーション</h3>
<div id="gnav">
<ul>
<li id="nav-toppage"><a href="index.html"><span class="ja">トップページ</span><span class="en">top&nbsp;page</span></a>
<li id="nav-concept"><a href="concept.html"><span class="ja">コンセプト</span><span class="en">concept</span></a>
<li id="nav-itemlist"><a href="itemlist.html"><span class="ja">商品紹介</span><span class="en">item&nbsp;list</span></a>
<li id="nav-company"><a href="company.html"><span class="ja">会社案内</span><span class="en">company</span></a>
<li id="nav-recruit"><a href="recruit.html"><span class="ja">採用情報</span><span class="en">recruit</span></a>
<li id="nav-access"><a href="access.html"><span class="ja">アクセス</span><span class="en">access</span></a>
<li id="nav-contactus"><a href="contactus.html"><span class="ja">お問い合わせ</span><span class="en">contact&nbsp;us</span></a>
<li><a href="gallery.html"><span class="ja">ギャラリー</span><span class="en">gallery</span></a>
</ul>
</div>
</div>

グローバルメニューがある場所<ul>～</ul>までのメニューの項目がある部分を<div id=”gnav”>～</div>で囲みます。3～14行目が該当部分です。グローバルメニューの場所がわからない場合は、hpb18にて「ページ編集」にしてから、メニューのどれか一つをクリックした後、「HTMLソース」にしてみましょう。

すると、クリックした該当箇所が黄色くハイライト表示されるハズです。

または、<!–navi–>というコメントアウトされた表示の箇所を探してください。

動きの確認

上記までで動きの部分は完成です。画面を下の方にスクロールさせると、上部メニューが画面最上部に固定されるはずです。

下記の見本のようになってますか？？

見本

もし思うように動かない場合は、再度見直してください。

確認のポイント

ダウンロードした「css」「js」「images」ファイルが正しくアップロードされているか？
宣言部が正しく記述されているか？
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”>が重複していないか？
宣言部分内である<head>～</head>内に記述されているか？
グローバルメニュー部分で<div id=”gnav“><ul>メニュー…</ul></div>で囲まれているか？