シーサーブログカスタマイズ超入門！

シーサーブログ、カスタマイズしてますかぁ？

　きょうは、バナーに自分の好きな画像を貼る方法を紹介しますよ。

　ここでは、テンプレート ブルー（両サイドバー）のバナーエリアに、自分が用意した画像を貼る方法を紹介します。

　このページの一番右上のウルトラマン・マックスを貼る方法だよ。

◆「ブログ説明」の「挿入テキスト（下部）」に画像を貼る◆

　「デザイン」→「コンテンツ」→「ブログの説明」で、「挿入テキスト(下部)」に

<div style="position:relative;top:-80px;left:700px;">
<img src="http://xxx.up.seesaa.net/image/UltramanMax.jpg" height="74" border="0" />
</div>

って入力するんだ。

　赤い部分の数値は、張りたい画像の高さと同じくらいの値を指定するといいよ。だたし、値がマイナスになっていることに注意！

　マックスの画像の場合、高さ７４ピクセルなので、−８０（マイナス８０）に設定したんだ。

　青い部分の値は、８００から張りたい画像の幅を引いた値くらいにするんだ。

　テンプレート「ブルー」の場合はブログの幅が８００なので、８００から画像の幅を引いた値にしたんだけど、他のテンプレートでは、それぞれの幅から画像の幅を引いた値を指定するんだよ。

　マックスの画像の場合は、幅が６０ピクセルなので、８００から１００引いて、７００にしたんだ。

緑の部分は、自分がバナーに貼りたい画像の URL に変更してね。

◆スタイルシートでブログ説明の右端を調整する◆

　上の手順で画像を張ると、「ブログの説明」の右側が画像の下側に隠れちゃうので、それを防ぐために「スタイルシート」で「ブログ説明」の右端を調整する必要があるんだ。

　「デザイン」→「スタイルシート」で、.descripsion のセクションの padding を、貼りたいバナーに合わせて、次のように変更するんだよ。

　下の例は、テンプレート「ブルー（両サイドバー）」なので、他のテンプレートの場合は、width 行とpadding 行以外は無視してね。

.description {
color:#FFF;
font-size:12px;
font-family:sans-serif;
font-weight:bold;
line-height:140%;
padding-right:115px;
width:800px;
}
　赤い字の部分を、貼りたい画像の幅よりも少し大きくするんだよ。

　基本的には、画像を貼るときに８００から引いた値より少し大きいを指定するんだ。マックスの例であれば、８００から１００引いたので、１１５ピクセルを指定したんだよ。

　ここで、またしても FireFox と IE（Internet Explorer） で表示に違いが出たんだ。だから、なんとか表示を近づけるため、width 行を追加したんだよ。この width 行がないと、IE では意図したように表示されなかったんだ。

以上で、きょうのシーサーブログのカスタマイズを終わるよ！

　どうかな？　参考になったかな？




もしこの記事があなたの参考になりましたらランキングの応援お願い致します。
seesaaカスタマイズ職人の元気の源・人気ブログランキング