昨日のつづき。解像度を取得して壁紙を分ける方法
は、それぞれの問題を分けて考えると楽です。壁紙( background-image )は CSS でどーにでもなるので、ユーザの解像度の違いを CSS に渡せる形 = className にしちゃえば良いのである。というわけで、第一稿 > set_reso_classname.js
このスクリプトを DL & 自サバにアップし、テンプレ HTML の<head> 要素内でリンクします。実行されると、最親要素の <html> 要素に、ディスプレイ解像度を幅と高さに分割したクラス名をつけます。例えば XGA で読み込まれた場合は html.scw1024.sch768 となり QXGA(今日はじめて知った)なら html.scw2048.sch1536 になる。後はそれぞれのクラスセレクタごとに background を定めれば OK。
が、こんなピンポイントな分類をしても特殊な解像度な人って、それほど多くはないと思うのですよ。製作者の想定範囲より大きい(小さい)モニタだけ判別できれば概ねオッケーなんじゃないかと、三分割するパターンも作ってみました > set_reso_classname2.js
想定範囲内(ワシ的には SVGA XGA(WXGA) SXGA。ソース内のコメント参照のこと)にはクラス名は追加しないので、通常通りの感覚で CSS を書くことができる。まあ、環境依存だし、上手くいったらラッキーくらいの気持ちで、解像度が高(低)すぎる場合のスタイルだけ追加しておくみたいな使い方が良いかと。注意点としては、縦/横どちらかに的を絞った(つまり、片方のクラス名のみ使う)方が効率的です。通常は 2カラム、高解像度だったら 3カラムみたいなスタイルを作る場合は、横方向のクラス名だけに注目するという具合で。
< たまには過程など | 桜雨 > | 表紙へ戻る |
何か、とてつもなくマヌケなコメントをしてしまったわけですが…。
縦サイズのみ判断できればいい感じなので、後者を自分なりにちょっとアレンジして試してみようと思います。
これで、脳内の構図により近いものが作れそうです!本当にありがとうございます。大好きです!-04日02時
これ(スクリプトはクラス名をつけるだけ)って、色々と融通がきくと思うのですよ。
見映えをいじるんだったら、やっぱ CSS 最強です。-04日20時