タッチパネルとの戦い

サイトの改装、第一弾やってみましたが。
PCでは問題ないけど、タッチパネルだとメニューが機能しない…！
やっぱhoverアクションはあきらめようか…
ご飯食べてからjsでなんとかなるかやってみよう。うん。

とりあえず応急処置でトップページにドロップダウンメニューの中身を出してリンク貼っておきました。
根本的な改善にはちょっと時間がかかりそう。

※追記2014/07/14
なんとかなりました。jQuery を導入したサンプルを利用しました。

CSSスプライト

家系図のアイコンがたくさんあるので、読み込み速度低減のためCSSスプライトなる方法を使ってみました。
一般的には、メニューとして使う画像をリンク移動に応じて切り替えたり、ツイッタやFacebookなどのアイコンのように同じページに何度も使われるアイコンをたくさんひとまとめにして読み込んで、必要な箇所に必要な範囲だけ表示するという技術です。

果たしてうちのようなページにそんな技術必要かと言われると疑問符が出ますが、要はやってみたいからやる、そんだけです。（開き直り）

1. アイコンを背景画像としてまとめる
   家系図の顔アイコンを作ります。それを大きな画像にびっしり並べます。画像作成ソフト（うちではFireworks使用）のグリッド機能を使うと楽です。家系図アイコンは大きさが一緒なので後で表示位置の指定を行うのも割と簡単。
2. CSSを書く
   アイコンの数に応じてclass指定を作り、backgroundのURL指定と描画範囲、表示位置の指定などを行います。spanタグなどにつけるため、display属性をblockにしてアイコンの大きさ分の幅と高さを指定します。
   もうちょっとスマートな書き方があるんじゃないかって気はするんですが、とりあえずこれでうまくいったので…
3. HTMLの該当箇所にspanタグ（とりあえず改行無しスペースを中に入れる）を挿入し、それにclass指定で背景画像（アイコン）を表示させます。
   

この方法だと代替テキストaltが使えないので、画像が見える環境専用になってしまうのと、背景画像はデフォルトで印刷されないのが欠点です。
でも今回の場合、アイコン自体に何の機能も無い（本当に絵を表示したいだけ）のと、もとがフリー素材を借りた画像なのでむしろ印刷されたりしないのは再配布防止になるのかも、ということで、この方法でいってみることにしました。

あと、2．のCSSを書くときにちょっとでも間違うと、うまく表示されません。class指定の.（ピリオド）抜けとか、コピペで記述を増やしたあとの修正忘れなどに気をつけたいものです。

一山越えた（行く手にまだいくつも峠が）

サイトの改装準備を進めています。
スマホでの見え方がひどすぎる→今日日スマホ対応くらいは常識→じゃ改装すっか！→どうせならレスポンシブデザインも入れようぜ→表組み関係は大体やり替えないと→画像も小さいのを大量に読み込んでたら遅いらしい→cssスプライト…ほう…→今ここ

で、何をやってるかというと、家系図用のアイコンを作り替えていました。
これまでお借りしていた分も愛着あるんですが、これを機に別の素材をお借りして色塗りしまくっていました。
３日で８０パターンの顔グラに色をつけたぞ…！差分は透明部分を保護して塗り替えればいいから後は楽だ。

とはいえ、顔アイコンを一枚の背景画像にしてcssで指定しまくって各ページに貼り付ける作業があるお…平行して家系図フォーマットそのものを構築しなおし、ついでにプレイ記録のレイアウト調整…おおう…

…あれ、私いつ俺屍２の体験版を遊べばいいんだろ？（苦笑）