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

ヘッダ編

ヘッダ編

No.H01 ヘッダ内に画像やテキストを表示したい　[☆☆☆]

  • 説明
    通常のおまじないでは、ヘッダー内にタイトル以外の文字や、画像を表示することはできませんが、以下の方法でスタイルシートを変更しないで文字や画像を表示できます。
    • #beforescriptと#htmlで全て対応します。CSSファイルは変更しません。
    • 基準とするBOXを#wrapperとし、position:relativeを指定します。
    • 新規クラス　headinfを作成し、　headinf 内に position: absolute を指定し、絶対座標で表示位置を決めます。
    • リンク文字を変更するために、.navix クラスを作成します。

以下のコードをナビ２の適当な場所に入れてください。全ページのヘッダーに表示されます。

  • コード 
    #beforescript{{
<style type="text/css">
<!--
#wrapper{
 position: relative;
}  
.headinf{
width: 400px;
height: 10px;
position: absolute;
top: 30px; 
left: 300px;
color: silver;
text-align: right;
}
.navix a {color: #00ffff; font-weight: bold;}
.navix a:hover {color: #00cccc}
--> 
</style>
}}

#html{{
<div class="headinf">
<span class="navix">
<a href="http://www.google.co.jp"  class="special">Google</a> ｜ <a href="http://www.yahoo.co.jp">Yahoo</a>
</span>
</div>
}}
  • 注意
    ブラウザによっては、ブラウザの拡大、縮小を行ったときに画像が変な位置に残ったりすることがあるかもしれません。
  • 情報源
    QHMユーザフォーラムで質問があり、私が考えた方式です。
  • 応用
    座標を変更することで、いろんな位置に表示できます。
  • 確認ブラウザとQHMの版数
    IE 8, Firefox 3.6 QHM 4.27
  • 確認デザイン
    　g_blue03

▲トップへ戻る

No.H02 ヘッダ内にスライドショーを表示したい　[☆☆☆]

ヘッダ内にスライドショーを表示します。QHM小技 No.H01 の方法を応用したものです。#slidshowのおまじないでスライドショーを表示します。
スライドショーをクリックすると、指定したページへ移動します。ただし、表示しているスライドとは関係なく指定したページへ移動します。

【作成方法】

  1. 設定→デザインの変更→ロゴの設定 を「テキストを使う」に指定する。
    （ただし指定したテキストは表示されない。）
  2. スライドショーの画像をSWFUでアップ。(サンプルは 横：750px　縦：180px)
  3. スライドショーと同じサイズで何も書いていない透過なgif画像を作成し、SWFUでアップ。(サンプルは 横：750px　縦：180px)
  4. 以下のコードをナビ２の適当な場所に入れる。
  5. 画像名のURLは使用する画像名に変更すること。
  6. 使用するデザインにより、.headinfと.headinf2の画像の高さ(height)、幅(width)のCSSの値を調整すること。
  7. #logo_text の高さ(height)も調整が必要かも。

【解説】

  • 基準とするBOXを#wrapperとし、position:relativeを指定する。
  • 新規クラス　.headinfを作成し、　.headinf 内に position: absolute を指定する。絶対座標で表示位置を決める。ここにスライドショーが表示される。
  • #logo_text の高さを画像の高さに調整。（#headcopy部分があるので、画像の高さから20px程度マイナスした値を設定。）
  • スライドショーの上に透明な画像を重ねそれにリンクを張る。（サンプルでは　headinf2というクラスを作成している。z-indexで重なりを指定しているところがポイント）
  • headinf2のtopの値がスライドショー(headinf)と異なるので注意。

スライドショーのサンプルサイト
スライドショーのサンプルサイト

【コード】

#beforescript{{
<style type="text/css">
<!--
#wrapper{
position: relative;
}  
.headinf{
z-index: 1;
width: 750px;
height: 180px;
position: absolute;
top: 0px; 
left: 0px;
}
#logo_text {
height:160px;
}
.headinf2{
z-index: 2;
width: 750px;
height: 180px;
position: absolute;
top: -12px; 
left: 0px;
}
--> 
</style>
}}
#html2(<div class="headinf2">)
[[&ref2(swfu/d/img750x180_transparent.gif,nolink,,透明な画像);>http://qhmtips.com/]]
#html2(</div>)

#html2(<div class="headinf">)
#slideshow(180,false,4){{
http://qhmtips.com/qhm_h02/swfu/d/img750x180_1.jpg,画像1
http://qhmtips.com/qhm_h02/swfu/d/img750x180_2.jpg,画像2
http://qhmtips.com/qhm_h02/swfu/d/img750x180_3.jpg,画像3
}}
#html2(</div>)

【注意】
ブラウザによっては、ブラウザの拡大、縮小を行ったときに画像が変な位置に残ったりすることがあるかもしれません。

  • 情報源
    QHMユーザフォーラムで画面横幅いっぱいの画像を表示したいという質問があり、私が考えた方式に naoさんがスライドショーを追加する方法でできた案です。
  • 応用
    headinfクラスで指定する領域内には、おまじないが何でもかけますのでいろいろと応用ができると思います。また座標を変更することでいろんな位置に表示できます。
  • 確認済ブラウザとQHMの版数
    • Win XP　(IE 8, Firefox 3.6, Lunascape+トリプルエンジン)
    • Win 2000 + IE6
    • QHM 4.27
  • 確認デザイン
    　g_green03

▲トップへ戻る

No.H03 ナビの上に画像を追加したい　[☆☆☆]

  • 説明
    jQueryを使用してヘッダのロゴとナビの間に画像を入れる領域を確保して、そこに画像を表示します。
    No.H02は、ヘッダ上に絶対座標指定で、他の画像を重ねてヘッダを隠していますが、これは既存のヘッダは見せたまま、ヘッダ画像の下に追加した画像を表示します。
    画像は横：750px　縦は自由サイズで作成して、事前にSWFUでアップしておいてください。縦のサイズは指定する必要はありません。自動で拡張されます。
    以下のスクリプトを画像を入れたいページに入れてください。
#beforescript{{
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").append('<a href="画像のリンク先"><img src="swfu/d/画像" /></a>')
});
</script>
}}

◆応用
スクリプトの　#header　を　#navigator に変更すると、ナビの下に画像が表示されます。

▲トップへ戻る

No.H04 ナビの上に時間により切り替わる画像を表示したい　[☆☆☆]

こちらのサイトを参照してください。

H04サンプル

▲トップへ戻る

No.H05 ヘッダの画像をページ毎に異なるものにしたい　[☆☆☆]

  • 説明
    QHM小技 No.H02 の方法を応用したもので、ヘッダ内に指定した画像を表示します。
  • 画像(横幅 750px)は事前にSWFUでアップしておいてください。
    (サンプルは 横：750px　縦：550px　と横：750px　縦：250px)

サンプルサイト
サンプルサイト

  • 注意
    ブラウザによっては正常に表示されないことがあるかも知れません。
  • 確認済ブラウザとQHMの版数
    • Win XP　(IE 8, Firefox 3.6, Lunascape+トリプルエンジン)
      Win 2000 + IE6　では画像が10px程度上にずれてしまいます。
      （対応を検討中）
    • QHM 4.53
  • 確認デザイン
    　g_green03

▲トップへ戻る

No.H06 ヘッドコピーの右端にリンク文字を書きたい[☆☆☆]

ページの一番上にあるヘッドコピーの右端にリンク文字を書きたいときは、以下のファイルを改造します。改造に失敗するとQHMが起動しなくなるので、必ずバックアップしてから実施してください。
FTPがよくわからない人はやらないでください。危険です。

　\skin\hokukenstyle\pukiwiki.skin.php

【改造前】

<body>
#{$toolkit_upper}
<!-- ◆ Head copy ◆ =====================================================  -->
#{$head_copy_tag}
<div id="wrapper"><!-- ■BEGIN id:wrapper -->

【改造後】★印がついているところが改造箇所

<body>
#{$toolkit_upper}
<div id="wrapper"><!-- ■BEGIN id:wrapper -->  ★ここへ移動(5)
<!-- ◆ Head copy ◆ =====================================================  -->
<div style="width:750px; "> 　　　　　　　　 ★追加(1)
<div style="float:left; width:85%;">　　　　★追加(2)
#{$head_copy_tag}
</div>　　　　　　　　　　　　　　　　　　　　　★追加(2)の終わり
<div style="float:right; width:14%; text-align:right;"> ★追加(3)
<a href="http://www.google.co.jp">Google</a>　★追加(4)ここにリンクを書く
</div>　　　　　　　　　　　　　　　　　　　　★追加(3)の終わり
</div>　　　　　　　　　　　　　　　　　　　　★追加(1)の終わり
  • 解説
    (1)ヘッドコピー全体が入る領域を囲む枠を作成する。この中に浮動枠を２つ入れる。
    (2)ヘッドコピーの領域を囲む浮動枠を作成し、左寄せとする。
    (3)リンク文字を入れる浮動枠を作成し、右寄せとする。
    (4)リンク先をHTMLで指定する。
    (5)wrapperの開始タグをヘッダの前に移動し、ヘッドコピーもwrapper内のデータとして管理する。これをやらないと、画面中央に文字が表示されないで、画面左端からの表示になる。
  • 注意
    g_widexxのテンプレートでは、この方法ではヘッドコピーが中央表示になりません。左端から表示されます。原因調査中です。

▲トップへ戻る

No.H07 ヘッダのリンク先を変更したい[☆☆☆]

QHMのヘッダ部分をクリックすると、トップページ(FrontPage)へリンクするようになっていますが、このリンク先を変更したいときは、以下のようにQHMのソースを改造します。
FTPでソースをダウンロードし、改造して元の位置にアップします。
間違って修正すると、QHMが最悪立ち上がらなくなることも考えられます。
必ずバックアップをしてから改造してください。

  • 改造するソース
    lib\qhm_init_main.php　　（ここで改造したQHMソースは少し古い版数です）
  • 改造内容
    以下の ★$link_top★ にリンクしたいURLを書き込む。
//generate header logo
$_qhm_values['logo_header'] = "error01";
if($style_type == "image"){
    $_qhm_values['logo_header'] = <<<EOD
<div id="logo"><a href="★$link_top★"><img src="{$qhm_dir}/$logo_image" alt="$page_title" /></a></div>
EOD;
}
else{
    $_qhm_values['logo_header'] = <<<EOD
<div id="logo_text"><a href="★$link_top★">$page_title</a></div>
EOD;
}
  • 注意
    　QHMのバージョンアップ時は、ソースが元に戻るので再度修正すること。
  • サンプルページ
    以下のページは、実際にphpのソースを修正して、ヘッダのリンク先を変更したサンプルのサイトです。このTipsに書かれている内容とそのページの内容は全く関係ありません。ヘッダ部分のソースだけが関係あります。
    「方法２．QHMのCSSをWordpressのCSSに入れ替える」　というヘッダ名
    http://qhmtips.com/qhm_l08b
    このページ(サンプルページ)のヘッダをクリックすると、上位のQHM(当サイト）のトップページにリンクするようになっています。

▲トップへ戻る

ご意見箱

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

  • 大変参考になりました。スライドショーを設置できる場所と、色んなデザインテンプレートでの可能性が広がったと思います。こちらでもそれぞれのケースに合わせた検証をしたいと思いますがよろしいでしょうか？ -- nao 2010-03-31 (水) 14:23:23
  • いつも検証ありがとうございます。よろしくお願いします。 -- tomzo 2010-03-31 (水) 15:09:57
  • テストをする前に、本サイトで試しました。ごらん下さい。 -- nao 2010-03-31 (水) 15:36:32
  • CSSは#beforescriptプラグインで書かないと文法エラーになります。#htmlでCSSを書くのを止めました。 -- tomzo 2010-04-06 (火) 12:58:00
  • いつも役に立つ情報、ありがとうございます。ところで、このスクリプトを使うと編集画面で添付画像がマウスオーバーで表示されない（後ろに隠れた状態）になってしまいます。何か解決策はありますか？ -- jun 2010-05-17 (月) 23:22:27
  • junさん　すみません。どのスクリプトのことでしょうか？　編集画面で添付画像がマウスオーバーで表示されないの意味もよくわかりません。
    Win XP+IE8の環境ではそのような現象がおきたことがないのでちょっと何のことかよくわかりません。できれば、その状況のハードコピーをメールしてもらうとわかるかも知れません。 -- tomzo 2010-05-18 (火) 00:47:15
  • 編集メニューの設定→デザインの設定で、テキストを使うを設定 -- yuu 2010-08-22 (日) 18:38:36
  • デザインテンプレート「g_wide07」を使用しております。このページトップの「ヘッダ内にテキストを表示」を導入したのですが、ウィンドウ幅を画面いっぱいにしたときと縮小したときで、挿入したテキストの位置が大きくずれてしまいます。（当方23インチワイドモニター使用）　解決策がございましたら、ご教授いただければ幸いです。 -- illy 2010-10-15 (金) 11:10:45
  • illyさん　g_wide07で調査してみますので、少しお待ちください。 -- tomzo 2010-10-18 (月) 02:18:07
  • ありがとうございます。ヘッダ内にスライドショーを設置することができました。この状態でスライドショー画面をクリックして他サイトへリンクするにはどうすればいいのでしょうか？よろしくお願いいたします。 -- ippo 2010-10-30 (土) 21:37:07
  • ippoさん　スライドショーをクリックしてリンク先へ飛ぶようにしました。No.H02を参照してください。 -- tomzo 2010-10-31 (日) 00:56:44
  • illyさん　調査が遅くなってすみません。wide系のテンプレートは作りが少し違っていてなかなか思うようにいきません。できましたらwide系以外のテンプレートを使用して、横幅を広げた方が早いかもしれません。No.Y01 画面幅を変更したい　を参照してください。 -- tomzo 2010-10-31 (日) 01:25:37
  • お返事が遅くなり申し訳ありませんでした。wide系テンプレート・・残念です。他のデザインで試してみます。ありがとうございました。 -- illy 2010-11-15 (月) 15:39:16
  • すごい。スライドショーのリンクたしかにできています。ありがとうございます。難しいとは思いますが、猫の写真をクリックすると猫のページに、うさぎの写真をクリックするとうさぎのページに行くこともできますでしょうか？ -- ippo 2011-01-08 (土) 22:32:01
  • ippoさん　表示しているスライドショーの内容により、リンク先を変更したいということですか？これは非常に難しいと思いますが、ちょっと調査してみます。時間がかかるかも知れません。あまり期待しないで待っていてください。 -- tomzo 2011-01-09 (日) 01:44:13
  • No.H03 ナビの上に画像を追加したい <--できましたが、編集ツールボックスが表示されなくなります。 -- まどろみ 2011-03-21 (月) 13:27:06
  • まどろみさん　　編集ツールボックスはまったく見えませんか？OS、QHMの版数、ブラウザを教えてください。 -- tomzo 2011-03-22 (火) 08:23:21
  • WindowsXP Home SP3、　QHM4.75、　　IE8.06 です。　ナビ編集、一般ページで試しましたが、やはり編集ツールボックスが消えてしまします。 -- まどろみ 2011-03-22 (火) 11:01:27
  • まどろみさん　　もうひとつお聞きします。使用しているデザインは何ですか？ -- tomzo 2011-03-23 (水) 01:14:04
  • 「g_wide08」です. -- まどろみ 2011-03-23 (水) 09:18:53
  • 私の環境に何か問題があるのでしょうね。今回は諦めます。フォローどうもありがとうございました。( ´ ▽ ` )ﾉ☆ -- まどろみ 2011-03-23 (水) 10:53:24
  • tomzoさま、いつも参考にさせていただいております。ありがとうございます。 ロゴにスライドショーを使わせて頂いています。何時もは上手くいっているのですが、今回「g_wide04」のデザインを使うと画面左によってしまい上手く行きません。 このデザインは「#wrapper」が100%に指定されていて、そこを横幅850pxに変更すると、ロゴのスライドショーも上手くいくのですが、 フッターの背景色を画面いっぱいに横に伸ばしているのも850pxで表示されてしまいます。 ヘッドコピーとフッターの背景を横に伸ばしているデザインが好きなので使っているのですが、「main.css」を色々触ってみましたが、どちらかを諦めないといけない状態です。 ヘッドコピーとフッターの背景を画面いっぱい横に伸ばして、なおかつロゴにスライドショウが左寄せじゃなく表示できる方法はあるのでしょうか？ お時間あるときでいいのですがご教授頂けるとありがたいです！宜しくお願い致します。 -- yamap 2011-07-21 (木) 05:32:40
  • yamapさん　　調査してみますので、少し時間をください。 -- tomzo 2011-07-21 (木) 08:30:56
  • お手数をおかけしますが宜しくお願い致しますm(_ _)m -- yamap 2011-07-22 (金) 04:41:08
  • yamapさん　いろいろと挑戦してみましたが、うまくいきませんね。
    最初、この方法(No.H01 ヘッダ内に画像やテキストを表示したい)をみつけるのにたしか１ヶ月以上かかりました。その応用で、いろんなことができるようになりました。しかし、デザインを変えるとうまくいかないケースもあります。申し訳ありませんが、別のデザインをご利用ください。 -- tomzo 2011-08-11 (木) 02:20:30
  • tomzo さん、こんばんは。お忙しいところ色々と挑戦して頂きありがとうございましたm(_ _)m tomzoさんが出来ないとわかればあきらめがつきました。今後もご活躍楽しみにしています。 -- yamap 2011-08-17 (水) 20:16:01

認証コード(7632)

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

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

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

最新の更新 RSS  Valid XHTML 1.0 Transitional