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

FrontPage

ページ単位でヘッダのロゴを変更したい

画像の説明

トップページは画像サイズ 横:750px 縦:550px
ページ2ページ3は画像サイズ 横:750px 縦:250px

編集メニューの設定→デザインの設定で、テキストを使うに設定してください。

コードは以下の通りです。他のページもほぼ同じです。
画像の高さと画像ファイル名の2箇所が違うだけです。
ページ2ページ3は同じコードです。
同じコードを何ページにも貼り付けるのはお薦めしません。
以下のようにページを新規作成して、そのページ名を#includeプラグインで読み込むとコードの修正がとても楽です。

手順
1. 新規ページ作成で headerimg1 を作成し、以下のコードを貼り付け保存します。

コード

#beforescript{{
<style type="text/css">
<!--
#wrapper{
position: relative;
}  
.headinf{
width: 750px;
height: 180px;
position: absolute;
top: -14px; 
left: 0px;
}
#logo_text {
height:550px;
}
--> 
</style>
}}

#html2(<div class="headinf">)
&ref2(swfu/d/img750x550.jpg,nolink,,画像の説明);
#html2(</div>)

2. トップページの先頭に以下の #includeを記入して保存します。

#include(headerimg1,notitle)

説明

  • #beforescriptと #html2で全て対応します。CSSファイルは変更しません。
  • 基準とするBOXを#wrapperとし、position:relativeを指定します。
  • 新規クラス .headinfを作成し、 .headinf 内に position: absolute を指定します。絶対座標で表示位置を決めます。
  • #logo_text の高さを画像の高さに調整します。

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

最新の更新 RSS  Valid XHTML 1.0 Transitional