小粋空間  -  a cheap joke and a play on words site

スタイルシート切り替え（プルダウンメニュー版）

スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタイルが切り替わります。

以前よりご紹介しているスタイルシート切り替えのメニュー部分のみの変更ですので、その他の、

１．スタイルシート作成

２．テンプレート修正

３．styleswitcher.js のダウンロード・アップロード

４．テンプレートに styleswitcher.js インクルードの設定

につきましてはスタイルシート切り替えの１?４項を参照ください。
ということで、ここでは５項のみ掲載します。

５．切り替えメニューの追加

各テンプレートのサイドバーに以下のタグを追加します。JavaScript によるプルダウンメニューの状態保持を行わない場合と、状態保持を行なう場合の2種類のリストを掲載します。「プルダウンメニューの状態保持」とは、ブラウザの更新や新しくブラウザを開いた時に、それまでに選択されていたプルダウンメニューと同じメニューを表示することを意味します。状態保持を行わない場合は常に一番上のメニュー（ここでは "default"）が表示されます。

状態保持を行うとユーザビリティが向上するので、当サイトでは後者（５．２項）を推奨します。

５．１ 切り替えメニュー（プルダウンメニューの状態保持を行わない）

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form>
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>

option 要素は元エントリーのサンプルに合わせてますので value 属性や値（青色部分）は適宜変更してください。
公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form>
　　　：
</form>
</div>
</div>

５．２ 切り替えメニュー（プルダウンメニューの状態保持を行う）

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。５．１との差分を青色で示しています。差分は form 要素への id 属性および、状態保持を行う JavaScript です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form id="stylesheet">
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>
 
<script type="text/javascript">
<!--
var style = readCookie('style');
var nodes = document.getElementById('stylesheet').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].value == style){
        nodes[i].selected = true;
    }
}
//-->
</script>

スタイルシート名（ここでは "Large"や "Netscapte"）は５．１項と同様に任意の名称に変更してください。なおこれらを変更しても JavaScript 部分を変更する必要はありません。

公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください（５．１と同じ）。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form id="stylesheet">
　　　：
</form>
</div>
</div>
 
<script type="text/javascript">
　　　　：