かえでの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で指定します。
サイドバーより大きい値を指定すればいいでしょう。

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

現在、管理メニュー部は以下のような感じになっているけど、

<span class="adminmenu">日記を書く</span>
<span class="adminmenu">管理</span> 
<span class="adminmenu">ログアウト</span> 

管理メニューへのリンク部全体をspanで括って欲しい。
以下のような感じに

<span class="adminlinks">
	<span class="adminmenu">日記を書く</span>
	<span class="adminmenu">管理</span> 
	<span class="adminmenu">ログアウト</span> 
</span>

サイドバーにバナーを設置したい場合などで、サイドバーの幅を変更したい場合があると思われます。
そのような場合に、ユーザースタイルシートを弄る必要がありますが、どこを弄ればいいか判らないという方に。

ユーザースタイルシートの定義

サイドバーが左配置の場合にサイドバーの幅を変更する場合の例を以下に示します。この場合、だいたい200pxくらいのバナーを貼ることができるようになります。
#テーマ、ブラウザによって異なりますので適当に調整して下さい。

div.main { margin-left: 225px; }
div.sidebar { width: 215px; }

adiary用テーマ「うみ」Rev1.00RC1をリリースしました。
ダウンロードはこちら

更新履歴 (Rev0.90test2 -> 1.00RC1)

• SVGAに完全対応(width: 800px -> 780px)
• 管理メニューでのIE問題の解決
• 管理メニュー微調整
• その他、微調整

関連記事

詳細は以下の記事をご覧下さい

• うみ 0.90test1リリース
• うみ 0.90test2リリース
• うみテーマのIEでの問題

その他

うみテーマはFirefoxでの表示をお勧めします。

私、かえでは悩んでいます。
なぜ、うみテーマが管理メニューの「日記帳の削除」「日記の再構築」「パスワード／名前の変更」がIEでデザインが崩れるのかがわかりません。
ただひとつ判る事は、IEのバグと関係があるということです。
Firefox、Operaは無関係。
div.edit div.bodyを所有。
証拠のスクリーンショットはこれです。
[album:2006/08:umi_ie.jpg]

どうしてこんなことになるのか、私にはわかりません。
これをあなたが読んだなら、その時、私はIEのサポートを投げているでしょう。
…正式か、そうでないかの違いはあるでしょうが。
これを読んだあなた。どうか真相を暴いて下さい。それだけが私の望みです。

　　　かえで