myブログ
  • 関崎から
    佐渡島の関崎から撮った携帯写真を主に置いています。

テンプレートの <div id=“header”> の下に以下のソースを貼ります。

ポイントは、1行目です。ヘッダー部でのブログパーツの位置を決めています。1行目と8行目で囲まれた部分がブログパーツの本体です。

つまり、1行目と8行目で囲まれた部分を他のブログパーツにすげ替えることができるわけです。

<div style="top : 70px;left : 700px;position : absolute;z-index : 100;">
 <script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.php"></script>
 <script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic_a.js"></script>
 <script type="text/javascript">swfshow(80,80,0);</script>
 <noscript>
 <a href="http://sado-is.com/" target="_blank" title="佐渡島の次平">佐渡島の次平</a>
 </noscript>
</div>

1行目を生かすために、スタイルシートの変更が要ります。 id=“header” を定義しているところに、 position : relative; を追加します。
#header とか div#header とかなっているところに追加します。以下のように追加します。

div#header {
 margin-bottom: 9px;
 height: 999px;
 background-color: #ffffff;
 background-image: url(http://xxxxx.com/maya_header.gif);
 background-repeat: no-repeat;
 padding-top: 9px;
 padding-left: 99px;
 position : relative;
}

ポイントは、position : relative; と 最初のソースの1行目の position : absolute; 。
これでヘッダー部の左上隅を基準にtopとleftが指定できるのです。

コメント / トラックバック 3 件 ヘッダー部にブログパーツを貼るポイント(FC2ブログ) があります

  • Asunarowoods says:

    次平 様、

    諸事 御忙しいところ こんなにも 御心遣いを戴き、大変 どうもありがとうございました。
    本当に、お礼の言葉もございません。
    HTML や CSS を 自由自在に 操っていらっしゃるのを拝見し、まるで 魔法でも見ているような 心持ちが致します。
    わたくしも、少しずつ 学んでいきたいと思います。

    本日は もう 大晦日ですネ!!
    どうか おカゼなど 召しませぬよう、良いお年をお迎えください。
    では、失礼致します。

    改めまして、どうもありがとうございました。

  • Brooks Senegal says:

    Hey there, You’ve done an excellent job. I’ll certainly digg it and personally recommend to my friends. I am sure they’ll be benefited from this website.

コメントをどうぞ

2017年5月
« 2月    
 123456
78910111213
14151617181920
21222324252627
28293031