2004-08-17 [長年日記]
_ 今にも雨が降りそうな天気 (11:36)

IE系だと
写真付きの段落は表示がおかしくなるなー。レイアウトは崩れないけど、文字部分がレンダリングされない。というか、されているんだけどレンダリング終了後に、いったんその部分だけ再描画(InvalidateRect)させないと、読めない状態になってしまう。Mozilla系だと大丈夫なんだけど。
と思ったら
このくらい文章量があるとちゃんと表示されるな。文章量との兼ね合いなのか。
文字欠け対策
MLの「[tDiary-theme] 文字が欠けるテーマ(http://www.tdiary.org/archive/theme/threads.html#00506)」から始まるスレッドに関連した情報があった(サンクスzoeさん)。ひとまず、default.cssのdiv.sectionの項目に、width: 100%;を追加して様子を見る方向で(一応手元の環境では文字欠けが出なくなったっぽい)。
これって結構古い話題みたいだけど、tDiary 2.0の標準テーマでも対策されていないってことは、何かほかの問題があるからなのかな?
_ blogツール/サービスサイドバーの判別 (13:00)
適当に見て回った範囲で書いたので、いろいろ間違いというか、デフォルトではないものを参考にしていたりする場合があるかも。それにしてもまだまだえぐいtableデザインのところが多いなー。tableデザインでもいいから、論理要素をDOMで判別できるようにしてくれると、ありがたいんだけど。
今回はサイドバー周りしか見なかったけど、一通りのデザイン要素をチェックしてみるのも面白そうだな。ある程度共通のアプローチってのもあるみたいだし。一応サイドバーはdiv class="sidebar"ってのが多数&主流派かな? ただ、tDiaryではclass="sidebar"で表示位置まで決まっちゃうけど、blogツール系ではさらに外側にdivをかぶせて表示位置を指定することで、3ペインとかを表現している模様。
個人的には一番ロジカルなtDiaryのデザインをベースに、もうちょっと日記(日付ベース)以外でも使いやすい標準デザインを作って、各blogツール/サービスもできる限りそれに準拠するようにするといいんではないか、とか思ったりした。
訂正・追加等のツッコミ歓迎。
blogツール系
| tDiary | div class="sidebar" | ※その他tDiary互換テーマを利用しているツール/サイトも同様。 |
| IBLOG | div class="side" | |
| movable type | div id="links" | ※これが2.661以前の標準だったらしい |
| movable type | div id="frame-left" | ※本家 |
| movable type | div class="side" | ※というパターンもある模様 |
| Nucleus | div id="stuffbar" | ※本家 |
| WordPress | div id="sidebar" | ※本家 |
| lily | div class="menu" | ※本家 |
| P_BLOG | div id="menu-box" | ※本家 |
| blosxom | div id="links" | ※かなー? |
| HNS | ※tableだよね | |
| その他 | ※サイドバー要素を判別できるツールはあるかな |
blogサービス系
| はてなダイアリー | div class="sidebar" | ※tDiary互換 |
| JUGEM | div class="links" | ※サイドバーじゃないけど、サイドバーのリンク一覧文字要素はこれにしている模様 |
| livedoor Blog | div id="links" | |
| Excite Blog | ※DIV ID=LEFT/RIGHTは、その中身がメニューだろうが本文だろうがかまわず、純粋に表示位置だけのために指定されるらしい | |
| goo Blog | div class="leftblock" | ※こっちが標準か? |
| Yaplog | ※tableオンリー | |
| Doblog | div class="menu" | ※だと思う |
| WebryBlog | ※サイドバー的な表示はないのかな? | |
| Seesaa blog | div id="links" | |
| My Profile | * class="side_text" | ※えぐいtableデザインだけどサイドバー相当に表示する文字はspanやtdのclass="side_text"に統一されているっぽい |
| Blogzine | div class="sidebar" | |
| AOL Diary | div class="sidebar" | |
| melma! blog | div class="sidebar" | |
| チャンネル北国 | div id="links" | |
| MyPress | div class="menubody[\d]?.*?" | ※とかになるのかなー |
| BLOCKBLOG | div id="menu" | ※のような気がする |
| 2log | ※table | |
| ココログ | div class="sidebar" | ※movable type |
| TypePad | div class="sidebar" | ※movable type |
| LOVELOG | div id="links" | ※なんだろうな |
| DI:DO | div class="freespace" | |
| News-Handler | div class="sidebar" | |
| Diary Note | div class="menu" |
_ データ収集対象からサイドバーを除去 (16:27)
↑を参考にサイドバーおよびコメントやtrackback一覧表示部をデータ収集対象外に変更。あとその他大手サービスに関しても、正規表現で対応できそうなものはそれなりに対応した。これでずいぶんREFERER SPAM、trackback SPAMに対する耐性が強くなった&常設リンクの影響を受けにくくなったんじゃないかな。あとは目立つものについてぼちぼち対応していこう。
_ コメントちょっとだけ表示 (17:59)
トップにまったく最近のコメントが表示されないのも寂しいんで、最新10件だけtrackbackの下に表示するようにした。
_ 充電一直線 for CDMA (18:41)
相変わらずバッテリーが持たない(ふつうに通勤の往復で使うと途中で切れる)こと以外は文句がないW21Sだけど、純正充電器&バッテリーを買おうかと思ってauショップに行ったら、取り寄せになると冷たく言われて面倒くさくなってしまい、手近なところで「KBC-CDMA/U 充電一直線 for CDMA」を買って妥協してしまった。会社にいるときはこれを使う方針。純正以外の充電器を使うとよくないと聞くけれども、ひとまずどのくらいよくないのか実地で確認してみることにしよう。


DI:DOはdiv class="freespace"となります。ご参考まで。
↑ありがとうございます。追加しておきました
livedoor Blog も div id="links" です。
その中の1個ずつの要素が div class="sidetitle" とか class="side" ですね。
# HTMLテンプレートがカスタマイズできるのでその場合はその限りではありません。。
http://bookmarklet.daa.jp/
にある「DIVの id部を表示」「DIVにclassが定義されているものだけを表示」が便利です。
↑ありがとうございます。
このbookmarkletはいいですね。というか、HTMLを目で追った努力のほとんどは無駄だったってことか……orz
Movable Typeは2.661以前だとデフォルトは「div id="links"」です。JUGEMやivedoor Blogも同じなのでMovable Typeに影響されたのではないかと。
↑ありがとうございます。
なるほど、元々movable typeはdiv id="links"だったんですか。ってことはdiv id="links"なツールたちは、きっと開発者がその頃のバージョンのMTをベースにデザインしたんでしょうね。
ただ、ちらっと見た限りでは、古いMTの(CSS周りの)デザインってあんまり筋がよくないっぽいから、最近MT系自体もdiv class="sidebar"方向に移行しつつあるって感じなのかな。
http://www.tdiary.org/archive/theme/msg00506.html
このスレッドが参考になると思います。>文字消えの件
↑ありがとうございます。ひとまず上記MLを参考に、div.sectionにwidth: 100%;を追加して様子を見てみます。
チャンネル北国tvも div id="links"です。
HTMLのテンプレートは今のところ1種類だけなので、全ブログ共通です。
↑あ、本当ですね。class="sideblock"なのは、チャンネル北国のトップページ(blogじゃなく)でした。修正しておきました。ありがとうございました。