クイックホームページメーカーやWebサイト作成に関する情報サイト。QHM専門のリンク集・デザインカスタマイズを中心に情報を公開中!

Top / infomation / 2009-12-27

Tag:  ■ ナカーマさんのブログ

 ブログ  

ロゴ画像の上に画像を乗せる 2

まずはサンプルを見てください ↓
ロゴ画像の上に画像を乗せる2
 
tomzoさんのソースをさらに応用してみました。
具体的には#html2を使うことでQHMのおまじないで対応できるようにしました。
HTMLとCSSを勉強すればさらに表現の幅は広がります。
 
ロゴの上にボタンを置くだけでなく、
このテクニックを駆使すればよりレベルの高いものも作れるでしょう。
 
以下のソースはテストサイトかなにかで一度試してみてください。
実際に行動に移すのが一番勉強になります。
 

ソースの表示

1・「設定」→「サイト情報の設定」→「その他のタグ」に以下のコードをコピペ

 

<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 p {
margin:0px;
}
.navix a:hover {
color: #00cccc;
}
-->
</style>

 

2・「メニュー管理」→「ナビ2」→ナビ2のどこでも良いので以下をコピペ

 

#html2(<div class="headinf"><span class="navix">)
 
[[&ref2(swfu/d/google.gif,nolink,,画像の説明);>http://www.google.co.jp]]  [[Google>http://www.google.co.jp]] |   [[Yahoo>http://www.yahoo.co.jp]]
 
#html2(</span></div>)

 

CSSソースの解説 (特に重要なもの)

#wrapper{
position: relative;
}

  ↓
  座標値の設定を#wrapper上で行うためにする
 

.headinf{
width: 400px;
height: 10px;
position: absolute;
top: 30px;
left: 300px;
color: silver;
text-align: right;
}

  ↓
  座標値の設定を行っているdiv class
  1・width div classの幅
  2・height div classの高さ
  3・position: absolute; 絶対位置への配置となります。
    親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、
    親ボックスの左上が基準位置となります。
  4・top #wrapper上の上から何pxにdiv classを設置するか
  5・left #wrapper上の左から何pxにdiv classを設置するか
 

.navix a {
color: #00ffff;
font-weight: bold;
}
.navix p {
margin:0px;
}
.navix a:hover {
color: #00cccc;
}

  ↓
  spanタグの設定(あってもなくてもOK)
 

#html2の解説

#html2(<div class="headinf"><span class="navix">)
 
[[&ref2(swfu/d/google.gif,nolink,,画像の説明);>http://www.google.co.jp]]  [[Google>http://www.google.co.jp]] |   [[Yahoo>http://www.yahoo.co.jp]]
 
#html2(</span></div>)

  ↓
  #html2で<div class="headinf">をはさむことでその間のソースは
  QHMのおまじないが使えるようになっています。
 

なぜナビ2にソースを記述してロゴの上に表示されるか

 
結論 → CSSで.headinfというdiv classの座標値を設定しているから。
 
下記の画像の青枠が.headinfというdiv classになります。

div class

 
CSSでどこに設置するかを決めているため、
ナビ2にhtmlソースを記述してもロゴの上に表示されます。
 
これで解説になったでしょうか。。。
なかなか分かりやすく説明するのは難しいです(><)



コメントYahoo!ブックマークに登録Yahoo!ブックマークに登録 はてなブックマークに追加はてなブックマークに追加
  • こんにちは。ナビとpositionを使う方法、すばらしいですね!
    私もロゴ部分にリンクや検索を入れられないか…と考えたのですが、phpをいじらないと無理だろうかと諦めていました。この方法ならそこまでしなくてもできますね。

    私のテストページでロゴ部分にテキストリンクとサイト内検索を入れてみました。
    http://ryuseisha.com/qhmsample/
    (.headinfの他にもう一つclassを設定。ナビ1でテキストリンク、ナビ2で検索を記述して振り分け。#html2のおかげで#searchが使えます。)
    #html2は初めて見る技法です。こんなこともできるんですねぇ〜。
    とても勉強になります。ナカーマさん、tomzoさん、ありがとうございました。 -- kiriko(流星舎) 2010-01-26 (火) 11:13:17
  • すみません。上のコメント中のリンク、最後に改行が入ってしまい、クリックしてもアクセスできません。http://ryuseisha.com/qhmsample/をコピーしてアドレスバーに貼り付けてください。どうも申し訳ありません。 -- kiriko(流星舎) 2010-01-26 (火) 11:21:04
  • </wwww>
    </span>
    </img>
    </base>
    </code>タグです。
    WWWJDICには、諸橋大漢和辞典が、張っています。 -- 電車ザード 2010-01-28 (木) 21:26:06

#comment3

a:5554 t:2 y:4

ロゴ画像の上に画像を乗せる2