僕は見ていた > >

背景画像はバナーにもある M+KBOX さんから頂きました。どうもありがとうございます。

あちこち物色していて M+KBOX さんをみつけたわけですが、ここの「もののけ君」が気に入ったのでした。一部ではときどき妖怪「ちゃん見た」というハンドルを使っていること、トップページの左上のアニメーション gif がこのサイトの名前にしっくりくることから採用決定です。「もののけ君」の背景画像にはピンク系統と水色系統の二種類があったのですが、このサイトのメインコンテンツの一つ「娘ちゃん」を念頭にピンク系統を選択しました。

ナビゲーションアイテムに何があるか分かりやすいように、ピンクとは系統の異なる色をアイテムのタイトル部分に付けポイントとしました。これに対してメインの部分は明度に差を付けることで焦点がはっきりするかなと思い、現在御覧のような配色になりました。

デザインに関して素養がないので、あまり自信はありませんが、一つだけこだわっていることがあります。それは装飾用の画像は使わないということです。自分がナローバンドユーザでブロードバンドへの以降を躊躇している事情があるのですが、同じようにナローバンドユーザの人にとってはあまり嬉しくないからです。なるべく多くの人にストレスを与えない構成のサイトにしたいのです。

以前は UnderDone さんの「うにゅうにゅナビゲーション」を BlogPeople とカレンダーに利用していたのですが、折角リンクしてくださった方々を隠してしまうのも申し訳ないですし、カレンダーは殆ど必要ありません。それでカレンダーは廃止し、BlogPeople や iBlog People は右サイドにまとめ、左には自サイトの案内にまとめました。つまり三段カラム構成にしたわけです。

別 blog に付けているアクセス解析によると、ArchivePage, YearPage, DayPage など iBlog が用意しているアーカイブ系統のページは殆どアクセスがありません。自分で開いてみても日付から探しているエントリを見つけだすには何度も DayPage を開かないと到底見つけられませんし、日付からエントリを探すという動機が殆どありません。使われないページやそれへのリンクはあるだけ邪魔です。

また RSS Feed のアイテムも内容がたったの一行です。RSS の小さいアイコンから辿るようにすれば好きなところにちょこっと置けば済みます。"Syndicate this site" という文言も日本人の私には目立ちません。いつも他所の blog の RSS Feed を探すときにどこかなぁと探してしまうのです。RSS Feed をこれから購読してくださる方のために一発でわかりそうなところに置きたいと思っていました。しかし RSS Feed は人が直接読むためのものではありませんから、出しゃばってもいけません。

統計情報は、自分を観察していると割と参照しています。この blog はどれくらい蓄積があるのだろうとか、どのカテゴリに力を入れているのだろうとか思ったときに見ているのです。RSS Feed もこのサイトに初めて来た人とかそれに準ずる人が参照するものだと考えました。ならばページの内部に埋もれさせるのではなく、開いてすぐに見つかるところに置いておいたほうがいいだろう、そう考えてヘッダー部の右端に置いたのです。

一方でカテゴリ毎のエントリ数では、カテゴリが一覧されますよね。カテゴリの一覧は既に各カテゴリへのリンクとして存在しています。エントリ数を出すためにカテゴリの一覧を出すのは無駄です。そこで JavaScript を工夫してこれらをまとめてしまいました。

水平型のカテゴリ一覧と普通のカテゴリ一覧は情報も機能も重複しますが、普通のカテゴリ一覧はナビゲーション項目に埋もれて多少目立ちません。初めて来た方にとってはヘッダーのところにある水平型のカテゴリ一覧でこのサイトにどんなコンテンツがあるのかすぐに伝えられそうです。ですから水平型のカテゴリ一覧は敢えて残しました。

順序が前後しますが、目立たないので実はこれが一番書きたかったんです。

前回、Web アクセシビリティ向上のためアンカーの配色をいじったのですが、これが大変でした。取り敢えず検査に OK となったのですが、Netscape 7.1 では CSS 上は同じものでもスタイルが異なるときがあって、満足いくようにできませんでした。複雑過ぎたのです。CSS もテンプレートも MT ライクな構成になっていて、恐らく色々なカスタマイズのために工夫されたものなのでしょうが、細かくできる分複雑です。しかしやりたいことはそんなに複雑ではないのです。どうにも我慢がならなくなりました。

そこで、まずモックのページを作成しました。XHTML の構成を必要最小限に簡素化(構成をです、一つ一つの内容はお作法に気を付けて複雑です)し、それに合わせてスタイルを付けたい部分に CSS でクラスを作成してスタイルを付けていきました。クラス名もオリジナルに捕われずに付けたのです。

アンカーの配色が前回うまく行かなかったし、リンクであることの示し方が場所によってことなるのもインストラクションとしては今一です。今回は多くのブラウザでデフォルトのアンカーのスタイルに多少手を加えただけにしたかったので、この手作りは成功でした。自分で構成したのでスタイルを付けたいものの CSS での指定の仕方も自分にとってとてもわかりやすくなりました。

自分で書いた iBlog カスタマイズガイド から大きく外れたテンプレートと CSS になり、内容的には iBlog サイトとは思えないものになりました。しかし、自分でわかりやすくなったのですからドキュメントから外れていても問題ではありません。