季節はすすむ
最近は朝起きてまず外を眺めカエデの色づきが日一日と変わっていくのが楽しみになっています。今日あたりは随分と色づいて赤が緑を超えるようになってきました。時々射し込む陽の光を待ってレンズを向けてみました。
ここ４日程、面倒なので手をつけていなかったCSS SpriteなるWEB技法に挑戦してみました。アイコンやロゴマークなどの小さな画像を一まとめにして１枚の画像に収め、必要な部分を切り出しCSSで背景画像としてWEBに埋め込む技法です。高速回線が当たり前になってダウンロード時間は短縮されましたが、小さな画像１枚１枚のダウンロードに際してパソコンとサーバーの間で事前にやり取りする手順に要する時間が相対的にも絶対的にも無視できないものになってきたことが背景に有るのでしょう、ページ・スピードの測定サイトで自分のサイトを測定すると必ずCSS Spriteを使用しましょう！と促されます。
本格的にはHTMLに合せてCSSをジェネレートするようなシステムがあるのですが、そんな大規模な環境は作るつもりもないので、オンラインでSprite画像を作ってくれるサイト「CSS Sprite Generator」のお世話になりました。画像を合成して一つの画像ファイルにしてくれて、1枚1枚の各画像の座標をアウトプットしてくれます。その値をCSSのbackgroundプロパティに指定すれば背景画像として埋め込まれます。
処が、当サイトでのアイコンの使い方は記事のタイトルや外部のサイト名などのリストのスタイル・タイプの画像に使っているのが殆どで、上記のようには簡単ではありませんでした。リストの一項目が縦に長くなると（コメントやトラックバック一覧のようなリストが入れ子になっているような場合）合成された下の画像が一緒に画面に表示されてしまうのです。これでは使い物になりません。
四苦八苦した挙句CSS上はリスト・タイプではなく通常の画像の埋め込みとして扱うこととしました。が、そうするとリスト行の頭出しが揃ってくれませんので、ここにも一工夫加えてtext-indentプロパティを逆に使って１行目と２行目以降の頭出しを揃えることにしました。結局はHTMLサイドの記述も大幅に変えないといけない破目になりました。
主要なアイコンやロゴマークの移行は済んだものの、ダウンロード時間は短くなったかとなると微妙ですネ～。やれやれ、って感じです。成果は継ぎ接ぎだらけになっていたCSSを少し整理できたこと。ハハハ
そうそう、ついでに優先フォントを変えてみました。MACのようには行かないでしょうが最近Windowsでも採用され綺麗だと評判のフォント・ファミリーやMACで使用されるフォントも指定してみたのですが、如何でしょう。
外部JAVASCRIPTをHTMLにinline化したりいろいろ弄ってみましたが写真の多い当サイトではなかなか。。。レンダリングの開始タイミングが何百msかは速くなったかな？
コメントする