検索ボックス
全ページに検索フォームを置くように戻したので、あまり主張し過ぎないような形にスタイルを書き直した。3カラム分消費する。右寄せにしたけど左寄せの方が良いかもしれない。そもそも下じゃなくて上に置いた方が……。
虫眼鏡アイコンはSVG。もちろんクリックできる。たまに思い出したように主張してるけど、虫眼鏡のアイコンを右に置くなら、クリックするとフォームを送信するようにするべき。左には置いてはいけない。
青をリンク以外、例えばボタンとかでも使わないようにして「青はクリックするところ」的な統一を行ったのが主な変更。他、余白とフォントサイズの調整でメリハリを付けるような感じに軌道を修正し終えたかなーという感じになったのでエントリーにした。
日付けがないとわかりづらいので、タイトルと日付けを左右に分割して置くようにした。よくある感じだけどフォントを変えたりして工夫もした。文字の大きさを小見出しと同じサイズにして普通のリストとは容易に識別できるようにも。トップページや月別アーカイブのページが見やすくなったはず。
狭い画面では左右に分けるとごちゃごちゃしてアレなので、日付けが先に来るようになる。更に狭い画面では日付けの後ろに改行が入るようにも。
全ページに検索フォームを置くように戻したので、あまり主張し過ぎないような形にスタイルを書き直した。3カラム分消費する。右寄せにしたけど左寄せの方が良いかもしれない。そもそも下じゃなくて上に置いた方が……。
虫眼鏡アイコンはSVG。もちろんクリックできる。たまに思い出したように主張してるけど、虫眼鏡のアイコンを右に置くなら、クリックするとフォームを送信するようにするべき。左には置いてはいけない。
フッターのアイコンはSVGで書き直した。合わせてサイズもpx単位ではなくem単位で指定するようにしたので、フォントサイズが変わるとアイコンの大きさもスムーズに変わる。またData URIで埋め込むようにも変えたので、HTTPリクエストが1つ減った。やったね！
このSVGのアイコンの話はライセンス決めたら別に書く。
ベースにしている青(#558899)を使ってハイライトするようにしていたけど、派手すぎるきらいがあるのでモノクロにして暗くした。選択範囲の色は難しいし、失敗な色だと目も当てられない感じになるので無指定の方が良いのかもしれない。
所々で使っているもっと見る系のリンクは今までボタン型に整形してたけど、単なるリンクに戻した。»とか→みたいな矢印系の文字を付けるのは維持したんだけど、単なるリンクの場合はこういう矢印は後ろに付けた方が良いらしいことを学んだ。普通のグリフよりもスカスカなので前に置くと妙な隙間があるように見える。ボタン型にする場合はアイコンに近い扱いなので前に置く方が安定。
合わせると40KBを超えるくらいのシームレスな背景画像3種をData URIで埋め込むかどうかずっと悩んでいるけど、やっぱり無謀そう。画像のキャッシングもCSSで管理できるとかそういう点でもData URIにするメリットはあると思うんだけど、100KBのCSSファイルはさすがにゾッとしない。