Gun☆Ryu's Template

JUGEMで使えるブログ・テンプレート
User Template File を公開しています

スポンサーサイト

一定期間更新がないため広告を表示しています

▲top.  -.  -.

CSSの切替スクリプト

現在自分で使用している、このブログのテンプレ。
実は『gr-SnowWhite』と『gr-SnowBlack』をスクリプトで切り替えています。

gr-SnowWhite.jpg gr-SnowBlack.jpg

上記2つのテンプレは、HTMLがほぼ一緒なので (笑)


方法は・・・
『gr-SnowBlack』のCSSだけを、JUGEM以外の自分のWebスペースに置いておく。
JUGEMのテンプレート選択は『gr-SnowWhite』にしておいて
  06:00〜17:59 >> 『gr-SnowWhite』(JUGEM内CSS)
  18:00〜05:59 >> 『gr-SnowBlack』(JUGEM外CSS)
となるよう、HTMLのCSS読込み部分をスクリプトで制御しているだけです。
(念のため規約熟読したのですが、CSSのJUGEM外置きは問題ないはずです)

スクリプトは単純です。。。
公開しますが、お試しは自己責任で!
質問やサポートは無しです。
『gr-SnowWhite』HTMLの<head></head>内で
<link rel="stylesheet" href="{site_css}" type="text/css" />
の1行を以下のスクリプトに置き換える。

 (1).    <!--/** StyleSheet Switcher START **/-->
 (2).    <script language="javascript">
 (3).    <!-- StyleSheet 切り替え
 (4).    function getCSS()
 (5).    {
 (6).        var now = new Date();
 (7).        var hour = now.getHours();
 (8).    
 (9).        if (hour >= 6 && hour < 18) {
(10).            cssname = '"{site_css}"';
(11).        } else {
(12).            cssname = '"http://…省略…/gr-XXXX.css"';
(13).        }
(14).        var css = '<';
(15).        css += 'link rel="stylesheet" type="text/css" href=' + cssname + ' ¥/';
(16).        css += '>';
(17).    
(18).        document.write(css);
(19).    }
(20).    // End -->
(21).    </script>
(22).    <script language="javascript">getCSS();</script>
(23).    <noscript><link rel="stylesheet" href="{site_css}" type="text/css" /></noscript>
(24).    <!--/** StyleSheet Switcher E N D **/-->

(9).(11). :CSS切替えの条件文
(10).   :HTMLとセットのCSSを、JUGEMの独自タグで記述
(12).   :JUGEM外に置いたCSSのURLをフルで記述
(14)〜(18).:スタイルシート読込みタグを編集し、書き出す
(23).   :スクリプト無効の場合に備えて、HTMLとセットのCSSを、JUGEMの独自タグで記述

▲top.  comments(0).  trackbacks(0).

スポンサーサイト

▲top.  -.  -.

:: Comment ::

この記事へコメントする

      

:: Trackback ::

この記事へのトラックバック
<< コメント返信 ( 2007/11/04〜2007/12/03 )homeThe following takes place between 0:00am and 1:00am / on UTF >>