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

メインビジュアル

FrontPage

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

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. 以下のコードをリンクを張りたいメインビジュアルがあるページに入れてください。全ページにメインビジュアルがあり、リンク先が同じときはこのコードを ナビ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>)

powered by Quick Homepage Maker 4.91
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional