一歩先を行くQHMユーザのためのTips

メインビジュアルにリンクを追加したい

QHM 4.6からメインビジュアル機能が追加になりました。

デザイン：simple05

このページのコード

#main_visual(swfu/d/img750x180_2.jpg,メインビジュアル,center)

たったこれだけで表示できます。
私は苦労してこんなものを作っていました。
↓↓↓↓↓
No.N03 ナビの下にスライドショーを表示したい
http://qhmtips.com/index.php?%E3%83%8A%E3%83%93%E7%B7%A8#lc068d94

メインビシュアルに対しリンクを張る方法

これだけでは、おもしろくないので、このメインビジュアルの画像にリンクを追加します。
プラグインの先頭に#が付くものは、ブロックタイプでありそのままではリンクはできません。
そこで、メインビジュアル画像の上に透明な画像を重ねて、その画像に対しリンクを設定します。
以下のテクニックをメインビジュアルに対して行います。
↓↓↓↓↓
No.H02 ヘッダ内にスライドショーを表示したい
http://qhmtips.com/index.php?%E3%83%98%E3%83%83%E3%83%80%E7%B7%A8#s6e5ed79

手順

1. メインビジュアルで指定してある画像と同じサイズの透明な画像(gif)を作成し、SWFUでアップします。例では　img750x180_transparent.gif　というファイル。
2. 以下のコードをリンクを張りたいメインビジュアルがあるページに入れてください。全ページにメインビジュアルがあり、リンク先が同じときはこのコードを　ナビ２　に入れてください。
   ◆コード

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