佐渡島の次平

2009 年 12 月 31 日 のアーカイブ

テンプレートの <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が指定できるのです。