かえでのWebログ

私が今後作成するテーマで採用しようと思っているテーブル関連のクラスです。

テーマ側でこれらのクラスが定義されていなくても害にはならないと思われますので、従来との互換性も問題ないと思われます。
独自拡張ですが、将来的にadiaryでオフィシャルに採用されるといいのですが。

table.no-stripe

β8以降でサポートされた奇数行と偶数行で背景色を変えることができるテーマで、あえて変えたくない場合に明示的にno-stripeクラスを指定することで従来のようなテーブルを描くことができるようにする。

table.curb

テーブルの外周をボーダーで囲いたい場合に指定する。

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

バナーの貼り付け

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

<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での表示をお勧めします。