2006/11/29(水)両サイドバー対応のテーマ

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

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

2006/11/17(金)Acid2

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

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

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

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

*1 : Opera9のcontentプロパティのすばらしい実装とかからFirefoxの方が準拠していると思っていました。ちなみに、スタイルでhtml { content: "Rendering by Opera"; }とすると非常に楽しいことになります(笑

参考

2006/11/16(木)モバイルテーマ つぐみ 0.90beta リリース

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)版の記事を参照して下さい。

2006/11/16(木)つぐみ 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セレクタには未対応

2006/11/13(月)みつき 0.91betaリリース

adiary用テーマ「みつき」Rev0.91betaをリリースしました。

ダウンロードはこちらから

更新履歴

Rev0.90betaでの不具合を修正しました。

具体的には以下の点を修正しました

  • カレンダーが日曜日かつ当日の場合に見にくくなる
  • リンクのホバー時の文字色を変更

関連記事

このテーマの利用規約や特徴などは下記の記事を参照して下さい。

その他

相変わらずIEでのテストが不十分です。
何か気になる点などがありましたらこの記事にコメントなりTBなりを飛ばして頂けると助かります。