Zakimi::Blog

■ スタイルシートを切り替えましょう

Webサイトのデザインを考えると頭が痛むんですよね。背景を黒にした方が長い時間読んでいても目が疲れなくていいと個人的には思いますが、他の人は白のほうが良いともあるようで、いっそうのこと見に来てくれる方に好きなスタイルシートを選んでもらおうじゃないかと、思ったわけです。

んで、どうやるかという

1. 便利なスタイルシート変更スクリプトをダウンロード
   
   次のページA List Apartの下の方にあるDownload styleswitcher.jsのところからstyleswitcher.jsをダウンロードしましょう。ダウンロード後、解答してサーバにアップするだけでよい。

2. スタイルシートを用意する
   
   僕の場合は、今使っているスタイルシートをコピーして黒色を指定指定部分を白に変えてみました（後から気が付いたけどまだ指定が足りないようです(^^;)）。スタイルシートを用意したらサーバにアップしましょうね。

3. MTのテンプレートに複数のスタイルシートの定義を追加する
   
   テンプレートに作ったスタイルシートを追加する。

   <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
   
   <link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site_white.css" type="text/css" title="White" />
   

   僕は2つしかないけど、3つを導入する人はrel="alternate stylesheetのlinkを追加してください。

4. styleswitcher.jsスクリプトを読み込む定義を追加
   
   ダウンロードしたstyleswitcher.jsをテンプレートに追加する。場所はLINKタグのあたりです。

   <script type="text/javascript"src="<$MTBlogURL$>styleswitcher.js"></script>
   

5. スタイルシートを選択するリンクを追加する
   
   スタイルシートを実際に切り替えるようにするには下記のコードを好きな場所に記入する必要がある。僕はサイドバーに追加しているから下記のようなコードになる。

   <div class="sidetitle">
   Style Sheet
   </div>
   <div class="side">
   <a href="#" onclick="setActiveStyleSheet('Default'); return false;">背景を黒にする</a><br />
   
   <a href="#"onclick="setActiveStyleSheet('White'); return false;">背景を白にする</a><br />
   </div >
   

6. 再構築
   後はサイトを再構築すればスタイルシートが選べるようになる。

ざっと書いて、解説というより、ただの覚書ですね。まあ、このネタはあちこちで親切に説明されてますのでココで分からなければ探してみてください（人任せσ（^^;））

なお、ここで書いているカスタマイズはMTに限った話ではなく普通のサイトでも利用できるカスタマイズ方法ですよ。念のため。