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

メニュー編

メニュー編

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

jQueryを使用したアコーディオンメニューをQHMのメニューと本文に設置する方法です。メニューに設置するときは、プラグインの改造が必要です。
以下のサイトを参照してください。

http://qhmtips.com/qhm_n03/index.php?%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC

この方法は、QHMの#accordionプラグインは使用していません。

#accordionプラグインNo.M07を参照してください。

  • 確認ブラウザとQHMの版数
    IE 8, Firefox 3.6 QHM 4.27
  • 確認デザイン
    g_green03

アコーディオンメニュー

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で正常に動作するかちょっと気になります。誰か確認できませんか?

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

2通りの方法があります。方法1が簡単です。

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

<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>

◆方法2

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

1)以下を追加

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

2)以下の4箇所を修正。それぞれ2行づつ追加。

#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 特定のページだけメニューを表示したい[☆☆]

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

1.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;
}

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

コード

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

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

コード

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

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

QHM 4.5.3からアコーディオンメニューが追加されました。おまじないで簡単にアコーディオンメニューが利用できます。
アコ-ディオンメニューの中に、スクロール付きボックスとカレンダーを入れてみました。
詳細はこちらへ

  • 確認ブラウザとQHMの版数
    IE 8, Firefox 3.6 QHM 4.5.3
  • 確認デザイン
    g_wide07

アコーディオンメニュー

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

 QHMユーザフォーラムで、メニューを追従させたいという希望がありましたので作成してみました。この方法は、北研のQHM Proのサイトの方法とは異なります。
 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ指定した位置に戻ってくる方法です。CSSとjQueryを使用します。
詳細はこちらへ

  • 確認ブラウザとQHMの版数
    IE 8, Firefox 15 QHM 4.5.3
  • 確認デザイン
    g_wide07

スクロール追従メニュー

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

 No.M08 スクロールしても追従するメニューを作成しましたが、ちょっと仕様に気に入らないところがありましたので作り直しました。この方法は、北研のQHM Proのサイトのものとは異なりますが、同じ動作をします。
 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ指定した位置に表示する方法です。CSSとjQueryを使用します。
設置は簡単です。
詳細はこちらへ

  • 確認ブラウザとQHMの版数
    IE 8, Firefox 15 QHM 4.5.3
  • 確認デザイン
    4種類

スクロール追従メニュー 改良版

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

通常、メニューは左側にあってどのページでも共通ですが、トップページ以外は右側にメニューを表示し、北研のQHMマニュアルのサイトのようにします。
https://ensmall.net/p/qhmpro/

【考え方】

  • トップページ専用のメニューのページを作成し、それをトップメージのメニューに組み込む。これでトップページだけ他ページと異なるメニューになる。
  • 通常のメニューを右側に移動させる。これはCSSのfloat属性を変更すればよい。
  • さらにブログのメニューも右にしたい場合は、同様にCSSのfloat属性を変更するばよい。

詳細はこちらへ

  • 確認ブラウザとQHMの版数
    IE 8, Firefox 15 QHM 4.9.1
  • 確認デザイン
    g_wide03

トップページ以外を右メニューにしたい

ご意見箱

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

  • 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

認証コード(6676)

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

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

powered by QHM 6.0.8 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional