かえでのWebログ

サイドバーに収まりきらないような大きいバナーを記事上部に貼り付ける方法について。

バナーの貼り付け

まず、サイドバーにバナーを貼り付けます。

<a href="http://key.visualarts.gr.jp" target="_blank">
<img class="banner" 
src="http://example.com/image/lb_large.jpg">

ポイントは貼り付けるバナーにクラス指定をすることです。
今回は"banner"というクラスを貼り付けるバナーに与えています。

ユーザースタイルシートの編集

ただ貼り付けただけではサイドバーからはみ出してしまいますのでバナーの表示位置を指定します。
ユーザースタイルシートで以下のように指定します。

div.main { margin-top : 130px; }
img.banner { position: absolute; top: 0px; left: 245px; } 

これで表示してみると以下のような感じになると思われます
[album:adiary:bigbanner.jpg]

解説

div.main

まず、div.mainのmargin-topを指定して記事部全体を下方向に下げます。
貼り付けたいバナーの縦サイズより若干大きめに指定するといいでしょう。

img.banner

貼り付けたバナーに関する指定です。
まず、貼り付ける場所をabsolute(絶対指定)とし、top: 0px;でサイドバーの最上部に持っていきます。
そして、サイドバーの左端からのどれくらい空けてバナーを配置するかをleftで指定します。
サイドバーより大きい値を指定すればいいでしょう。

この手法が適用できるかはテーマに依存しますが、多くのテーマで適用可能だと思われます。