eclucifer

昨日 『 『 TINAMI 』 に登録しての良かった点まとめ 』 を書き終えたあと、何とはなしに クリエイタープロフィールの最新の更新情報 を見てみたら、投稿時間が9時間ズレていました。

11:42 となっていますが、本来の投稿時間は 20:42 でした。
また、それ以前の時刻もすべて-9時間になっていました。

何が原因か判らず Twitter にてヘルプしたところ、 WordPress のフィード側の問題のようでした。
WordPress のフィードは GMT（グリニッジ標準時）で配信されますが、日本は+9時間のため JST（日本標準時）に修正する必要があるとのこと。

『 WordPress 2.5 のフィードの時間修正 - karu.jp 』 を参考に、以下のとおり修正しました。

ご利用のバージョンによって修正箇所などが異なりますのでご注意ください。
また、必ず事前のバックアップを忘れないようにしてください。

続きを読む

今さらながら 『 TINAMI 』 に登録してみました。
昔むかしの検索サイトだった頃は大変お世話になっていたのですが、時代の流れからか全く新しいコミュニケーションサイトへと生まれ変わることとなったとき、どうしても心がついていかず離れてしまっていたのでした。 が、ちょっとしたキッカケで登録してみたのですが ･･････ これはいい！

続きを読む

先日公開された、Twitter のつぶやきをブログ形式で保存・閲覧できるサービス 『 Twilog 』 を利用始めてしばらく経ちましたが、これがもうあまりに便利すぎて最早手放せない！

こちらはただの何の変哲もない Twitter。 ただ Tweets が羅列されるだけです。
これでも充分、垂れ流しのつぶやき場としては流れるに任せる風情が結構なのですが、一覧性に欠けます。 メモとして残したいものは取り敢えずふぁぼるものの、通常の Favorites に埋もれてしまうのが難でした。

そしてこちらが話題の Twilog。

自分の Tweets からキーワード検索出来る。

カレンダー表示で日付別の Tweets が一覧出来る。

毎日の Tweets 数が判る。

Reply 先のユーザーごとに一覧出来る。
降順になっているので、誰とよく会話しているのかも可視化される。

ハッシュタグごとに一覧出来る。 PUSH !!
メモや特定の話題などにタグ付けすることで、あとから見返すことが出来るようになる。

などなど、欲しかった機能がぎゅぎゅっと詰まった 『 Twilog 』 、今イチオシの Web サービスです。

関連リンク

• Twitter
• Twilog
• lynx (eclucifer) on Twitter
• lynx (@eclucifer) - Twilog

• web 屋が主張する 「 リキッドレイアウト 」 に騙されないために - 鍵っ子ブログ
• 「 サイトの横幅 」 再論:950px 時代のウェブデザイン - 絵文録ことのは

これらを読んで、改めて Web サイトの横幅とリキッドデザインについて考えてみました。

Before

わたしも以前は 100% 幅のリキッドデザイン （ 可変幅 ） を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高！ と。

ところがあるとき、「 ブラウザを最大化すると広がりすぎて見にくい 」 とのご指摘があり、その当時は 「 見にくいならウインドウ幅調節すれば良くね？ そのためのリキッドなんだから 」 と、特に問題視していませんでした。 わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、［ ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る ］ ことと ［ 横スクロールバーが表示される ］、どちらも ［ 普段の環境で快適に見られないことに対するストレス ］ という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし ･･････ という訳で出した結論は、

• 要素の幅の最小値と最大値を指定する CSS プロパティ ［ min-width ］ ［ max-width ］
• 上記に対応していない IE6 には IE 独自のダイナミックプロパティ ［ expression ］

これらを採用する、というものです。

After

わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値 （ 600px ） を基準にします。 余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。

モダンブラウザ用 CSS

div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }

• 最小幅は 672px （ 600px ＋ 余白 60px ＋ ボーダー 12px ）
• 最大幅は 912px （ 840px ＋ 余白 60px ＋ ボーダー 12px ）
• その中間では、ブラウザの表示領域の 82% の幅にする

IE6 用 CSS

* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }

• ブラウザの表示領域が 691px 以下の場合は 671px に
• ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px" と > 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。 幅を変えるたびにブラウザが落ちて危険です。 なんというブラクラ。 少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

• モダンブラウザ向け CSS ハック - ウェブネタブログ
• IE6 で min-width, max-width を実装する CSS - Tech de Go

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と 140px 240px しか違わないのは、［ 広すぎても読みにくい ］ ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。 サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。 意味が無いような ･･････。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その ［ 僅かな差 ］ で横スクロールバーが出る Web デザインになったりするので、［ 僅かな差 ］ というのは重要な問題。 と思ったけれど、考えてみれば ［ max ］ なのだからもう少し広げても良い気がする ･･････ という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況 （ Google Analytics 調べ ） は以下のとおりです。

ブラウザ利用状況

Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。 やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度

ちなみに画面解像度の結果はこのとおり。 横幅だけでなく、縦幅も考えさせられる感じ。 ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。

Firefox で現在使用しているアドオンをまとめてみました。
不要なものを整理していて思い立った自分用のまとめヽ（ゝω・）ノ

• 2009年1月11日11時20分　コピーした URL をワンクリックで開く 『 pastego 』 追加
• 2009年2月12日21時52分　サイトごとにリファラを設定する 『 RefControl 』 追加　NEW

アドオン

All-in-One Gestures

マウスジェスチャー機能を追加する。

ColorZilla

Web ページの任意の場所から色情報を取得するカラーピッカー。

Gmail Notifier

Gmail の新着メッセージを通知する。

Html Validator

リアルタイムに HTML の文法をチェックする。

Link Widgets

link 要素のナビゲーションリンク があるページの、prev / next / top などのリンクを辿れる。

Make Link　push!!

閲覧中のページのタイトルや URL を、リンク用 HTML としてクリップボードにコピーする。

Organize Status Bar

拡張機能によって追加されたステータスバーのアイコンを並べ替える。

Parent Folder

上のディレクトリに移動するためのツールボタンを設置。

pastego　push!!

クリップボードにコピーした URL を、ボタンをワンクリックするだけで開ける。

RefControl　NEW

サイトごとにリファラを設定する。 RSS リーダー で画像が表示されない場合などに役立ちます。

removetabs

タブをまとめて閉じるためのメニューとボタンを追加する。

Screengrab!

Web ページをキャプチャする。

Tab Mix Plus

タブ機能を拡張する。

はてなブックマークカウンタ

Web ページの はてなブックマーク 数とコメントを表示する。

Greasemonkey

Greasemonkey

公開されているさまざまなスクリプトを使用して、Web ページの見た目や機能をカスタマイズ出来る。

AutoPagerize　push!!

Google の検索結果や対応したサイトでページをスクロールした際に、自動的に次のページを読み込み下にどんどん表示していってくれる。

どんどんカユいところがなくなっていくのが快感でたまりませんね！
あとは 『 クリップボードにコピーした URL を一発で開く 』 系があれば最強なのだけれど。
ご紹介いただいた 『 pastego 』 で解決しました！ ありがとうございました！