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

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

Posted at October 15,2005 11:38 PM
Tag:[Customize, MovableType, PulldownMenu, Stylesheet]
スタイルシート切り替え(プルダウンメニュー)スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタイルが切り替わります。

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

1.スタイルシート作成
2.テンプレート修正
3.styleswitcher.js のダウンロード・アップロード
4.テンプレートに styleswitcher.js インクルードの設定

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

5.切り替えメニューの追加

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

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

5.1 切り替えメニュー(プルダウンメニューの状態保持を行わない)

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

<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>

5.2 切り替えメニュー(プルダウンメニューの状態保持を行う)

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。5.1との差分を青色で示しています。差分は 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")は5.1項と同様に任意の名称に変更してください。なおこれらを変更しても JavaScript 部分を変更する必要はありません。

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

<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">
    :
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

CSS切り替え from clover
中途半端ですが、とりあえず実装です。 サイドバーの「Select Style」... [続きを読む]

Tracked on May 28, 2006 6:12 PM
コメント

こんばんは。
もうほんと、頭があがりません。
一生ついていきます。
本当にありがとうございました。

[1] Posted by みさと : October 16, 2005 12:39 AM

>みさとさん
こんばんは。
どうぞお気遣いなく。
3ヶ月くらいはついてきてやってください(笑)。

ではでは!

[2] Posted by yujiro : October 16, 2005 12:48 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)