かえでのWebログ

[album:adiary/theme:mizuho.jpg]
マルチサイドバー対応テーマ作成中。
このテーマを使うと、訪問者は強制的にお姉さまになれます（笑）
ちなみにゲストユーザーだとエルダー？

↑の画像の記事はCSS書いているときの愚痴です。
あまり気にしないで下さい。
あと、IE7(Trident Vエンジン)では透過PNG問題は解決されているらしい。

現在、素材待ち

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

<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.

ブラウザがどの程度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)版の記事を参照して下さい。

W-ZERO3専用テーマとして「つぐみ」を作成中です。
昨日リリースされた116:adiaryβ14にてPreview版が同梱されています。

[album:adiary/theme:tsugumi-m070prev.jpg] [album:adiary/theme:tsugumi-m070prev2.jpg]

主な特徴/仕様

• 何かの特設ページに多分に影響されたテーマ
• adiary default skelton system(Satsuki Skelton)専用テーマ
  • システムモード対応
  • テーブル拡張仕様(table.crub)に対応
  • adiary Ver1.00β13 snapshot061110で開発
• Opera Mobile on W-ZERO3での閲覧に最適化
  • VGA環境(480x640/640x480)でそれなりに利用できるように作成
    • 本文が読みやすいようにサイドバーは上部に配置
    • 表示できるサイドバーの項目を制限
  • ダイヤルアップ通信時(x1)でも快適に閲覧できるように画像は使用していません
• GPLライセンス
• 開発環境
  • Firefox 1.5.0.8 on Win2k
  • Opera 9.01 on Win2k
  • Opera Mobile 8.6 on WM5.0 (VGA)

Preview版とは

今回は開発期間が短かったため、実機(Opera Mobile)での十分なテストができていません。
現状で下記の項目を確認しています

• システムモードでの一部フォームがはみ出してしまう部分があること
• 実機(Opera Mobile 8.6 on W-ZERO3[es])でデザインが崩れてしまうことがあること
• 実機で意図したように表示できないこと

このあたりは追々対応していくつもりですが、adiaryβ14で搭載されたモバイルモードを体感して頂くための暫定版です。

今後の予定として

• システムモードの十分なテスト
• Opera Mobile 8.6への完全対応
• Internet Explorer Mobileへの完全対応対応しません(06/11/19)

を予定しています。

最後に

前々からOperaはdisplayプロパティでもともと要素の持つ表示形態を変更することが苦手だと思っていましたが、Preview版ではインライン要素をブロック要素に変更した部分でデザインが崩れてしまっています。
Opera 9.01 on Win2kでは正しく表示されていますのでOpera Mobileもそのうち対応するでしょうが、現状(Opera Mobile 8.6)で正しく表示できるように何とかしようと思います。

また、サイドバーを上部にまとめるというのは初めての試みでしたが、以外とうまくいき非モバイル環境でもそれなりに使いやすそうなので非モバイル向けにも対応させようかと考えています。

何にせよ現状では完成度はイマイチなので完成度を上げることが先決ですが（笑

メモ

• Opera Mobile 8.6はインライン要素→ブロック要素が微妙
• Opera Mbilee 8.6は:before/:afterセレクタには未対応