Home > Logs > February 2008 > This Entry
CSS のプルダウンメニューによる切り替えを実現する cssSwitcher
CSS のプルダウンメニューによる切り替えについてはたくさん前例はあるのだけれど、一度自分でやってみようと思って書いてみました。いずれ weeeblog.net でも実装する予定ですが、とりあえずはソースを公開しておきます。styleSwitcher という名前にしたかったのですが、既存のものと被るので cssSwitcher としました。
動作
プルダウンメニューで CSS を選択すると、選択した CSS のファイル名を Cookie にセットし、ブラウザをリロードします。ページが読み込まれたら Cookie からセットした CSS のファイル名を取り出してページに適用します。このあたりは割とよくある CSS 切り替えの実装方法ですが、Javascript で行うので、プルダウンメニューも Javascript で出力できるようにしました。
動作環境
FireFox、Safari、WinIE6 でクロスブラウザチェックを行ないました。それ以外のブラウザについては確認できていないので、もしバグなどあればお送りください。
サンプル
以下のページから、動作のサンプルを確認することができます。最初は字が大きいですが気にしないでください。「css1」>「css2」>「css3」の順に字が小さくなっていくような CSS が適用されます。また、このサンプルは、下の「ダウンロード」からダウンロードすることができます。
ダウンロード
解凍すると、cssSwitcher フォルダ内に cssSwitcher.html と common フォルダがあります。cssSwitcher.html をブラウザで開くと、切り替えのためのプルダウンメニューが表示され、動作の様子を確認することができます。
使い方
まず、プルダウンメニューに表示する CSS の設定を行ないます。上記リンクからダウンロードした zip ファイルを解凍し、「common/js」内の common.js をエディタで開きます。52 行目から始まる以下の記述が、プルダウンメニューに表示される項目になります。
cssSet: {
'default' : 'import.css',
'css1' : 'import.css',
'css2' : 'import2.css',
'css3' : 'import3.css'
},
ここに項目を追加または削除すると、プルダウンメニューの項目が変化します。「'項目の表示名' : 'CSS のファイル名'」の書式で記述します。
注意点ですが、最初の項目
'default' : 'import.css',
は削除しないこと(Cookie に値がセットされていない場合は、デフォルトとしてこの CSS ファイルが適用されますので、「'import.css'」の方は適宜変更してください)と、最後の項目の末尾にカンマを入れないことです(IE で動作しなくなることを確認しています)。
'css3' : 'import3.css' // 最後の項目の末尾にカンマを入れない
また、87 行目に、CSS をページに適用させるためのタグをヘッダ内に記述するための指定があります。環境に合わせて、「href="/common/css/"」を変更してください。次の手順で、ドキュメントルート以下に「common」ファイルをアップロードする場合は、変更の必要はありません。
document.write('<link href="/common/css/' + setStyle.setCSS() + '" rel="stylesheet" type="text/css" />');
項目の追加または削除が完了したら、「common」フォルダをアップロードします。上記手順で「href="/common/css/"」を変更しなかったのであれば、ドキュメントルートにアップロードしてください。
アップロードが完了したら、各ページの HTML タグを編集します。各ページの、「<head>〜</head>」内に、以下の記述を追加します(common フォルダへのリンクは環境に合わせて変更してください)。
<script src="/common/js/cssSwitcher.js" type="text/javascript"></script>
<script type="text/javascript">setStyle.setCSSTag();</script>
さらに、ページ内の、CSS 切り替えのためのプルダウンメニューを表示させたい箇所に、以下の記述を追加します。プルダウンメニューは、id が styleSelect の要素の末尾に追加されるので、要素内に記述を行なってもかまいませんし、div 要素でなくてもかまいません。
<div id="styleSelect"></div>
<script type="text/javascript">setStyle.makePulldown('styleSelect');</script>
切り替え用の CSS ファイルは、項目として設定した分だけ作成し、「common/css」フォルダ内に入れてください。これで、CSS のプルダウンメニューによる切り替えが実現されます。
補足
Javascript ソースコード内には、今回は使用しないコードが書いてあります。制作用に使えるよう、URL のパラメータで適用する CSS を分岐できるよう改良することを予定しており、これらのコードはそのために使用します。
あと、使用にあたっての制限等はありません。
修正依頼とかダメ出しとか人生相談とか
フィードバックいただけるとうれしいです。ぜひ weeeblog@gmail.com までお送りください。コメントやトラックバックでもかまいません。人生相談は20代の女性に限りますが、それ以外は応相談(※フィードバックは女性でなくともかまいません)。
Post Comment