解像度でCSSを変更するＪａｖａＳｃｒｉｐｔ

★ 今回は、『解像度でCSSを変更』です。

ここのところでちょっと考えていたのですが、
私はPCの解像度を『1024ｘ768』で使用しています。
でも、アクセス解析を見ると横幅が1280の解像度で使っておられる方も約半数ぐらいいらっしゃいます。

それで、1280幅にするとこのブログが『文字小さすぎだろ』とか思ってたんですよ。
まあ、やってみたら案の定小さいわけです。

このブログの場合『800ｘ600』で見ていただいてもちゃんと見られるようにと考えて作ってます。
（1024ｘ768でブラウザのサイドバーを出すと800幅くらいになる）ので、
逆の画面が大きい場合は想定していないかったんですよ。

ところが、今使っているような背景画像だと
画面が大きくなったときに画像が大きくなるわけではないので
文字を大きくしても背景画像とずれてしまうのです。

OperaやSleipnir（1.66は軽くて使いやすかった2は使えない）を使っている方なら
フルズームで表示を変更できるのですが、
FirefoxだとFirefox３のリリースまでまだ無理そう。

すると、みんながみんなOperaやSleipnirを使うのかというと
『アクティブタブより左もしくは右を全部閉じるという機能』を
Firefoxをカスタマイズして多用していて、
しかもＬｉｎｕｘな私には使えなかったりします。

ということで、暫定的に幅の広い画面のときにCSSを切り替えて表示するように
JavaScriptを使用してみることにしました。

今回は、JavaScript例文辞典さんのスクリプトをそのまま使わせて頂きました。
といっても、条件分岐は付け加えましたけど…

■　JavaScript例文辞典
JavaScriptでスタイルシートを切り替える（複数の場合２）

ちなみに、実際のコードを参考に載せておくきます。

function changeCSS(sURL){
var obj = document.getElementsByTagName("link");
for (var i=0, cnt=0; i<obj.length; i++)
{
if (obj[i].type == "text/css") obj[i].href = sURL[cnt++];
}
}

myW = window.screen.width;
if((myW) > 1100){changeCSS(['CSSのURL']);}


こんな風にして解像度が1100以上のときにCSSを変更しただけです。
『CSSのURL』部分は適宜変更してくださいね。
このコードを『switchcss.js』として保存してアップロードしたあと

<link href="<%css_link>" type="text/css" rel="stylesheet" media="screen,tv" title="default" />
<link href="追加したCSSのURL" type="text/css" rel="alternate stylesheet" media="screen,tv" title="width" />
<script type="text/javascript" src="<%url>file/switchcss.js"></script>

これはFC２ブログの場合です。
『追加したCSSのURL』部分は適宜変更してくださいね。

それにしても、有名どころのブラウザが
全部フルズームをワンクリックで出来るようになっていれば、
別にこんなものは必要もなくなってきそうですね。(^^;
人気ブログランキング

ブログ内関連タグ : ブログ カスタマイズ ＪａｖａＳｃｒｉｐｔ