QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

メニュー編

No.M01 アコーディオンメニューを表示したい　[☆☆☆]

No.M02 ページ毎に異なったメニューを表示したい　[☆]

QHMの標準のメニューはMenuBarという名前のページです。これを入れ替えることで、ページ毎に自由にメニューを入れ替えることができます。

1. 新規作成で新しいメニュー（ページ）を作成する。
2. 作成したメニューを以下のプラグインでページに取り込む。ページの先頭に記述してください。

   #menu(新しいメニュー名)

◆注意
メニューはあまり頻繁に入れ替えたりすると、ユーザが戸惑うので気をつけましょう。

No.M03 メニューに画像を表示したい　[☆☆]

#htmlプラグインで .bar h3 クラスに画像を指定する。
編集画面で以下をメニューの先頭に入れる

#beforescript{{
<style type="text/css">
<!--
.bar h3{
background-image:url("./skin/hokukenstyle/g_blue03/cube01-07.gif");
}
-->
</style>
}}

No.M04 メニューの背景を画面下まで表示したい

【注意】
このTipsは環境により、メニューの動作がおかしくなることがあるようです。原因不明のため利用の中止をお願いします。このTipsを採用された方は、利用をやめることをお奨めします。
また、環境を元に戻す必要があるため情報はそのまま公開しておきますが、利用しないようお願いします。
このTipsを利用された方、ご迷惑をおかけしました。

メニュー部に背景色が付いているとき、コンテンツ部が長いページでは、メニューの背景色が途中で切れてしまい、少しかっこ悪いかなと思ったことがありませんか？
そんなときは、以下のおまじないをメニューに入れたら画面下までメニューの背景色が伸びま～す。

以下の環境で確認しました。
・QHM 4.2.7
・デザイン：g_blue06、g_flower01, g_green03
・ブラウザ：Win XP上で IE8, Firefox 3.5.8, Lunascape 6.0.2(IE, Chrome)
　IE6で正常に動作するかちょっと気になります。誰か確認できませんか？

コンテンツが縦に長くなってもメニューの背景はコンテンツと同じ長さになり、
ナビ２の上まできっちりとメニューの領域が広がります。

２通りの方法があります。方法１が簡単です。

◆方法１
以下をコピペして設定画面の「その他のタグ」に入れる。これだけです。

<style type="text/css">
<!--
#main{
overflow:hidden;
}

#main:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

#menubar {
padding-bottom:32768px;
margin-bottom:-32768px;
}

#sidebar {
padding-bottom:32768px;
margin-bottom:-32768px;
}

#wrap_content {
padding-bottom:32768px;
margin-bottom:-32768px;
}

#wrap_sidebar {
padding-bottom:32768px;
margin-bottom:-32768px;
}
-->
</style>

◆方法２

スタイルシート　main.css を変更する。

１）以下を追加

#main{
overflow:hidden;
}
#main:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

２）以下の４箇所を修正。それぞれ２行づつ追加。

#menubar {
line-height:1.2em;
color:#666;
background-color:#EEE;
border:1px solid #E5E5E5;
font-size:.9em;
margin:8px 0 0;
padding-bottom:32768px;　　←追加
margin-bottom:-32768px;　　←追加
}

#sidebar {
color:#666;
margin:0;
padding-bottom:32768px;　　←追加
margin-bottom:-32768px;　　←追加
}

#wrap_content {
width:80%;
float:right;
overflow:hidden;
margin:0;
padding-bottom:32768px;　　←追加
margin-bottom:-32768px;　　←追加
}

#wrap_sidebar {
width:19%;
float:left;
overflow:hidden;
margin:0;
padding-bottom:32768px;　　←追加
margin-bottom:-32768px;　　←追加
}

＜余談＞
これは技術的なことですが、調査して気になったことがあります。

#main はどのスタイルシートに定義してあるのでしょうか？
どこにも見当たりませんでした。
使っているのは確かなのですが、わかる人いませんか？

No.M05 メニュー上の画像をマウスオーバで入れ替えたい　[☆]

マウスオーバーで画像を入れ替えるには、右のような2枚の画像を上下に張り合せた画像を用意しておきます。
初期状態では画像の上半分を表示しておいて、マウスオーバー時にY座標を変更することで画像の下半分を表示すれば、画像の入れ替えが実現できます。
この画像のサイズは 横：160px　縦：48px です。
表示する領域を縦 24pxにして半分だけ表示します。

QHMにはこのような機能はないので、CSSで実現するのが一番簡単かと思います。#beforescript　と#htmlプラグインを使用します。

↓この画像の上にマウスを置くと画像が入れ替わります

• 手順
  • 画像を用意しSWFUでアップします。
  • 以下のコードを編集で必要な場所へ貼り付けます。メニューに表示したいときは、メニューの編集画面で貼り付けます。

コード

#beforescript{{
<style type="text/css">
<!--
a.mOver{
background-image: url(./swfu/d/bg.gif);
width: 160px;
display: block;
background-position: 0px 0px;
height: 24px;
}
a.mOver:hover{
background-position: 0px 24px;
}
-->
</style>
}}

#html{{
<a href="#" class="mOver"></a>
}}

※注目
QHM 4.50からはとても簡単に画像切り替えができるようになりました。こちらを参照してください。
↓　↓　↓　この画像は QHM 4.50の方法で試しましたがやはりQHM 4.27では無理でした。

No.M06 特定のページだけメニューを表示したい[☆☆]

例えば、トップページだけメニューの位置にバナーやメニューを表示して、他のページはメニューなしにしたいときは以下のようにすればできます。

１．main.cssの変更
　使用しているデザインのフォルダ内にある　main.css　を以下のように修正します。
これで全ページのメニューが表示されなくなります。検索結果でもメニューは表示されません。

main.css内のコード（一部のみ）

#wrap_content {
width:100%;　　<--- ここを　80%から100%に変更
float:right;
overflow:hidden;
border:none;
}

#wrap_sidebar {
width:0%;　　<--- ここを 20%から0%に変更
float:left;
overflow:hidden;
border:none;
}

２．CSS定義だけのページを作成
　新規作成で "メニューあり" というページを作成します。名前は別のものでもOKです。

コード

#beforescript{{
<style type="text/css">
<!--
#wrap_content {
width:80%;
}
#wrap_sidebar {
width:20%;
}
-->
</style>
}}

３．メニューを表示したいページの先頭に以下を記述します。

コード

#include(メニューあり,notitle)

No.M07 QHMのアコーディオンメニューを使いたい　[☆]

No.M08 スクロールしても追従するメニュー　[☆☆☆]

No.M09 スクロールしても追従するメニュー(改良版)　[☆☆☆]

No. M10 トップページ以外を右メニューにしたい　[☆☆]

ご意見箱

皆様のご意見をお待ちします。

• IE6での結果報告です。方法1でメニューの背景画面は問題なく下まで表示できました。 -- スーさん 2010-05-04 (火) 16:40:52
• 追加情報です。方法1ではナビ2が表示されなくなっていました。 -- スーさん 2010-05-04 (火) 17:58:08
• スーさん　IE6の報告ありがとうございます。方法1では、ナビ2が表示されないときがあるようですね。多分これ以上の改造は無理のような気がします。自己責任での使用をお願いします。 -- tomzo 2010-05-05 (水) 01:32:10
• ☆マウスオーバー機能 -- yumeyutaka 2010-05-16 (日) 00:51:49
• ☆マウスオーバー機能：素晴らしい出来ですね。Ver4.5以前から挑戦していたのですが、スクリプトが長文の為なかなか採用に踏み切れませんでした。今回、アップして頂いた方法は、本当に簡単ですね。早速使わせて頂きました。ありがとうございました。これからも新たな試みに期待しております！ -- yumeyutaka 2010-05-16 (日) 00:55:05
• yumeyutaka さん　いつもご利用ありがとうございます。お役に立ててなによりです。これからもよろしくお願いします。 -- tomzo 2010-05-17 (月) 08:35:14
• * 営業カレンダー[#c3bf6c6b] #calendar2(営業日,201009,off) #clear -- yunahana 2010-09-23 (木) 11:06:53
• tomzoさん、こんにちは。 -- yunahana 2010-09-23 (木) 11:08:12
• tomzoさん、こんにちは。書き込み何度も失敗してすみませんm(_ _)m改行しようとEnterキーを押してしまいました…それも続けて2回も…（^^；いつもフォーラムではお疲れ様です。フォーラムもこちらのサイトもとても参考にさせて頂いています。フォーラムでのｱｺｰﾃﾞｨｵﾝ機能についての質問の回答で、「すみません。質問の意味がよくわかりません。 見出しの後のアンカーとは何のことですか？」なんですが、こちらにあるhttp://qhmtips.com/qhm_l00/　メニューに設置したアコーディオンメニューのコード にある 【* 営業カレンダー[#c3bf6c6b] 】のアンカーをそのままコピペで貼り付けた為、アンカーが表示されてしまったみたいですね。 -- yunahana 2010-09-23 (木) 11:23:35

お名前: 認証コード(4658)

当ページは役に立ちましたか？

選択肢	投票
たいへん役に立った	21
ちょっとだけ役に立った	1
普通	0
あんまり	0