かえでのWebログ

みたいのを作りたくなってきた。
で、どうやって実現するかというと、デフォルトのデザインだとサイドバーこんな感じになっているはず。

<div class="sidebar">
<@s.text_side0>
<module name="infomation" title="Infomation">
<module name="calendar" title="カレンダー" 
Sunday="日" Monday="月" Tuesday="火" Wednesday="水" 
Thursday="木" Friday="金" Satday="土">

<module name="recent_diary">
<module name="recent_comment">
<module name="recent_trackback">
<module name="category_list">

<module name="search" title="検索" size="12" submit="検索">
<@s.text_side1>
<module name="system-info" title="System info">
</div> <!-- End of sidebar -->

これに新たにdiv.sidebar-rightとdiv.sidebar-leftというDIVで括ることで実現しようと思う。

具体例

<div class="sidebar">

<div class="sidebar-left">
<module name="calendar" title="カレンダー" 
Sunday="日" Monday="月" Tuesday="火" Wednesday="水" 
Thursday="木" Friday="金" Satday="土">
<module name="recent_diary">
<module name="recent_comment">
<module name="recent_trackback">
</div> <!-- end of sidebar-left -->

<div class="sidebar-right">
<@s.text_side0>
<module name="infomation" title="Infomation">
<module name="search" title="検索" size="12" submit="検索">
<module name="category_list">
<@s.text_side1>
<module name="system-info" title="System info">
</div> <!-- end of sidebar-right -->

</div> <!-- End of sidebar -->

この場合サイドバーは以下のように表示される

左サイドバー

• カレンダー
• 最近の記事
• 最近のコメント
• 最近のトラックバック

右サイドバー

• サイドバー上部拡張(@s.text_side0)
• Infomartion
• 検索
• カテゴリ一覧
• サイドバー下部拡張(@s.text_side1)
• System Info.

試してみた。これまで日記帳の説明部分に張っていたリンクやカウンタなどをサイドバー下部に表示させることに。
だいぶすっきりしました。

バグ報告？

• システムモード対応テーマでもシステムモードでテーマがsatsukiとなってしまっています
• デザイン変更機能でインライン要素中に改行が入ると半角スペースが挿入されてしまいます。
  これは期待された動作なのでしょうか
• デザインIDに利用できる文字が半角英数＆_くらい。これ以外の文字を入力すると削除されてしまう。
  例：「Kaede's Style」→「aedetyle」
• <!-- -->でのコメントが許可されていません。

システム的な考察

デザインの編集での<@s.text_side0>, <@s.text_side1>, <@s.text_main0>, <@s.text_main1>部分でそれぞれデザイン埋め込みテキストの編集で記述したタグが挿入される模様。

一応役割的には
<@s.text_side0>：サイドバー上部
<@s.text_side1>：サイドバー下部
<@s.text_main0>：記事部上部
<@s.text_main1>：記事部下部
に挿入されることになっているが、デザインの編集で<@s.text_○○>の場所を変えることにより、上記の役割に縛られることなく配置することができる模様。

サイドバーにモジュールのように要素を追加する方法

<div class="hatena-module">
<div class="hatena-moduletitle">サイドバー項目のタイトル</div>
<div class="hatena-modulebody">
要素の内容
</div></div>

で要素がモジュールのようになります。

これまでの日記帳の説明部のソース（個人的メモ）

マイニングしても知識は抽出できません<br><a href="http://kaede.homedns.org/blog/album" target="_blank">かえでのアルバム</a>, <a href="http://jp.last.fm/user/Kaede_/" target="_blank">Last.fm</a><span class="cheer">リトルバスターズ 激しく応援ちぅ～</span> <a href="http://key.visualarts.gr.jp" target="_blank"><img class="banner" src="http://kaede.homedns.org/blog/album/top/image/lb_large.jpg"></a><br><hr>現在プレイちぅ～<br><a href="http://shchara.co.jp/" target="_blank"><img src="http://kaede.homedns.org/blog/album/top/image/sh_chara.gif"></a><br><hr><a href="http://kaede.blog.abk.nu/0343">Since 2006/06/08</a><br><img class="counter" src="http://kaede.homedns.org/blog/cgi-bin/daycount.cgi?gif"><br><img src="/album/image/kaede/adiary/t.gif"><img src="http://kaede.homedns.org/blog/cgi-bin/daycount.cgi?today"><img src="/album/image/kaede/adiary/s.gif"><img src="/album/image/kaede/adiary/yesterday.gif"><img src="http://kaede.homedns.org/blog/cgi-bin/daycount.cgi?yes"><br>

ユーザー定義タグ設定

sup	= html:sup
sub	= html:sub

実際に使用してみる

上付き文字記法

2[sup:10]=1024

2¹⁰=1024

下付き文字記法

H[sub:2]Oは水の化学式です

H₂Oは水の化学式です

ブラウザがどの程度W3C勧告のCSSやHTMLに準拠しているかをテストするAcid2というものがあるのですが、意外なことにOpera9はこのAcid2テストに合格しているということを知りました*1。

ちなみに、Firefox3.0の開発版は合格したようですが、正式版ではまだ合格していません。IEは当然(ry

ということで、テーマの開発ターゲットとしてOpera9を積極的に利用しようと考えています。Safariも合格しているようなのでOpera9で正しく表示できればSafariも問題ないでしょう。多分。

#Opera Mobileの非公式版はテストに合格しているらしい。早くAcid2に合格したOpera Mobileを公開してくれないかな……。

参考

• Wikipedia Acid2
• Acid2 Test

adiary on Opera Mobileなテーマ「つぐみ」をリリースしました。
[album:adiary/theme:tsugumi090beta.jpg]

ダウンロードはこちら

Rev0.70(Preview)→0.90beta 変更点

Opera Mobile 8.6上で意図したように表示できるように修正

その他、以下のブラウザとの親和性を高めました

• Firefox 1.5.0.8 (on Win2k)
• Opera 9.02 (on Win2k)
• Internet Explorer 6SP1 (on Win2k)

テーマでsatsuki-mobile/tsugumiを選択して頂くことでPC環境でもつぐみテーマが利用できます。
ただし、ユーザースタイルシートは有効になりません。

注意点

Opera Mobileで利用する場合、PCモードで表示しないとサイドバー部分が正しく表示されないことがあります。
現在、「ログイン」画面でこの現象を確認しています。通常の閲覧では現在問題は起きていません。

Opera Mobileの最小フォントサイズは16pt(デフォルト)で確認しています。このサイズより大きい場合表示が崩れてしまう可能性があります。

その他

Internet Explorer Mobileではadiary側の問題か、利用できません。きっとそのうち対応するでしょう。
WM5.0のIE Mobileには永遠に対応しません
不具合とか感想や(このテーマに関する)要望はこの記事にコメントなりトラックバックなりして下さい。
できる限り対応させて頂きます。

Opera Mobile on W-ZERO3[es]で見たときにサイドバーが窮屈な感じがしたのでもうちょっとすっきりしたデザインにしようと思います。

ライセンスなどはRev0.70(Preview)版の記事を参照して下さい。