Home > Logs > August 2008 > This Entry

cssSwitcher と mt.Vicuna で、ユーザがスキンを自由に変更できるブログを作る

ちょっと試してみたら簡単にできたので、やり方を公開してみます。簡単にできる、というのはちゃんと考えて作られているということだと思うので敬意とともに。

mt.Vicuna テンプレートセットを適用したブログを作成

http://mt.vicuna.jp/download/ から、テンプレートセットプラグインをダウンロードし、このページの解説に沿って mt.Vicuna テンプレートが適用されたブログを作成します。

他のスキンをダウンロードしてくる

デフォルトで smartCanvas スキンが適用されるようなので、その他のスキンを http://mt.vicuna.jp/skin/ からダウンロードしてきて、解凍後、[MT をインストールしたディレクトリ]/mt-static/themes/ 以下にすべてアップロードします。ちなみに、今回使用したのは以下(これで全部だと思います)。

※「Sub skin module set」というやつは試していません(初めて使うので、よくわかっていません...)。

必要なテンプレートの編集・作成

MT にログインし、ナビゲーションメニューの「デザイン」から「テンプレート」を選択し、「インデックステンプレート」のすぐ下の「インデックステンプレートを作成」をクリック。

テンプレート名は何でもよいが、ここでは「cssSwitcher」とし、その内容としてテキストエリアに、以下を貼付けます。このソースは、「CSS のプルダウンメニューによる切り替えを実現する cssSwitcher」で公開しているソースを少し変えたものです。

var util = {
     getParam: function (name) {
         if (location.href) {
            var urlStrNum = location.href.indexOf('?');
            var querySet = location.href.substring(urlStrNum + 1).split('&');
            var keyValue; var key; var value;
            for (var i = 0, num = querySet.length; i < num; i++) {
                keyValue = querySet[i].split('=');
                key = keyValue[0];
                value = keyValue[1];
                if (0 < value.indexOf('#')) {
                    value = value.substring(0, value.indexOf('#'));
                }
                if (name == key) {
                    return value;
                }
            }
        }
    },
    createCookie: function (name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    },
    readCookie: function (name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    },
    setEvent: function ( obj, eventType, func ){
        var isIE = (document.documentElement.getAttribute("style") == document.documentElement.style);
        if( isIE ) {
            obj.setAttribute( eventType, new Function(func) );
        } else {
            obj.setAttribute( eventType, func );
        }
    }
}

var setStyle = {
    cssSet: {
        'default' : '<$mt:StaticWebPath$>themes/style-smartCanvas/0-import.css',
        'smartCanvas' : '<$mt:StaticWebPath$>themes/style-smartCanvas/0-import.css',
        'flat' : '<$mt:StaticWebPath$>themes/style-flat/0-import.css',
        'ninja' : '<$mt:StaticWebPath$>themes/style-ninja/0-import.css',
        'origin' : '<$mt:StaticWebPath$>themes/style-origin/0-import.css',
        'future' : '<$mt:StaticWebPath$>themes/style-future/0-import.css',
        'warship' : '<$mt:StaticWebPath$>themes/style-warship/0-import.css',
        'bazooka' : '<$mt:StaticWebPath$>themes/style-bazooka/0-import.css'
    },
    getActiveCSS: function () {
        var head = document.getElementsByTagName('head')[0];
        var linkTags = head.getElementsByTagName('link');
        for(var i = 0,num = linkTags.length; i < num; i++){
	        if(linkTags[i].getAttribute('href')){
	            var activeCSS = linkTags[i].getAttribute('href');
	        }
	    }
	    return activeCSS;
	},
	getActiveCSSName: function() {
	    var activeCSSUrl = setStyle.getActiveCSS();
        var strNum = activeCSSUrl.lastIndexOf('/');
        var activeCSSName = activeCSSUrl.substring(strNum + 1);
        return activeCSSName;
	},
	setCSS: function(cssName) {
 	    if (cssName) {
            util.createCookie('css', cssName);
            location.reload();
 	    } else if (util.readCookie('css')) {
            cssName = util.readCookie('css');
            matchFlag = 0;
            for (var property in setStyle.cssSet) {
                if (cssName == setStyle.cssSet[property]){
                    matchFlag = 1;
                }
            }
            if ( matchFlag == 0 ){
                cssName = this.cssSet['default'];
                util.createCookie('css', cssName);
            }
         } else {
             cssName = this.cssSet['default'];
             util.createCookie('css', this.cssSet['default']);
 	    }
 	    return cssName;
	},
	setCSSTag: function() {
		document.write('');
	},
    makePulldown: function (id) {
        var select = document.createElement('select');
        select.setAttribute('id', 'styleChanger');
        util.setEvent(select, 'onchange', 'setStyle.setCSS(this.options[this.selectedIndex].value)');
        cssName = util.readCookie('css');
        var count = 0;
        for (var property in setStyle.cssSet) {
            select.options[count] = new Option(property, setStyle.cssSet[property]);
            if (cssName == setStyle.cssSet[property]){
                select.options[count].selected = true;
            }
            count++;
        }
        SetObj = document.getElementById(id);
        SetObj.appendChild(select);
    }
}

出力ファイル名は何でもいいけど、ここでは「cssSwitcher.js」とします。公開メニューについては「スタティック(既定)」を選択、保存して再構築します。

「デザイン」「テンプレート」から、インデックステンプレート「スタイルシート」を選択し、一行目の

@import url(<$MTStaticWebPath$>themes/style-smartCanvas/0-import.css);

を削除し、「保存と再構築」ボタンを押します。

さらに、各ページで読み込ませるためドキュメントヘッダに仕込みます。「デザイン」「テンプレート」から、テンプレートモジュール「Header」を選択し、</head> の直前に以下を追加します。

        <script type="text/javascript" src="<$mt:BlogURL$>cssSwitcher.js"></script>
        <script type="text/javascript">setStyle.setCSSTag();</script>

「保存」ボタンを押して保存します。

最後に、「デザイン」「テンプレート」から、テンプレートモジュール「ユーティリティ」を選択し、 <$MTInclude widget="フィード"$> のすぐ下に、以下を追加します。

<dt>styles</dt>
<dd id="cssSwitcher">
<script type="text/javascript">setStyle.makePulldown('cssSwitcher');</script>
</dd>

「保存」ボタンを押して保存し、全体を再構築し、ブラウザでアクセスします。

サイドメニューの一番下の「styles」のプルダウンメニューからスタイルを変更できます。

Post Comment

Copyright © okayama, Powered by Movable Type Open Source