Home > JavaScript | Vicuna > フォントサイズを切り替えるJS:改

フォントサイズを切り替えるJS:改

marble
2007-09-04 (火) 10:21
JavaScript | Vicuna

以前書いたフォントサイズを切り替えるJSの仕様を変更しつつ改良してみた。

フォントサイズが変わる範囲をidにて指定
フォントサイズの切り替えはonload時に行う
Yahoo! UI Fonts.cssに対応 (http://developer.yahoo.com/yui/fonts/)

これによりVicunaに完全対応になったと思う。

動作サンプルはこのブログ自体。ページ右上に設置してあるよ。
ソースは続きを見て。

var fontSizeSwitcher = {
    str: '',
    config: {
        area: ['main'], // 対象となるid
        length: 3, // 切り替え段階数
        id: ['fontSizeSwitcherSmall', 'fontSizeSwitcherMedium', 'fontSizeSwitcherLarge'], // 切り替えボタンの各id
        label: ['S', 'M', 'L'], // 切り替えボタンの各ラベル
        size: ['77%', '100%', '122%'], // 切り替えサイズ (http://developer.yahoo.com/yui/fonts/)
        cookieName: 'exampleName', // ここにクッキー名を入れる
        cookieDate: '90' // クッキーの有効日数
    },

    cookie: {
        set: function(n, v) {
            var t = new Date();
            t.setTime(t.getTime() + (1000 * 60 * 60 * 24 * fontSizeSwitcher.config.cookieDate));
            document.cookie = n + '=' + encodeURIComponent(v) + '; path=/; expires=' + t.toGMTString();
        },
        get: function(n, m) {
            return (m = ('; ' + document.cookie + ';').match('; ' + n + '=(.*?);')) ? decodeURIComponent(m[1]) : '';
        }
    },

    changeFontSize: function(i) {
        var config = this.config;

        var items = document.getElementById('fontSizeSwitcher').childNodes;
        for(var j = 0; j < items.length; j++) {
            if(i == j) {
                items[j].setAttribute('class', 'current');
            }
            else {
                items[j].removeAttribute('class');
            }
        }

        for(var j = 0, l = config.area.length; j < l; j++) {
            document.getElementById(config.area[j]).style.fontSize = config.size[i];
        }

        // set cookie
        this.cookie.set(config.cookieName, i);
    },

    start: function() {
        var config = this.config;
        var i      = this.cookie.get(config.cookieName, 's');

        for(var j = 0; j < config.length; j++) {
            this.str += '<li id="' + config.id[j] + '" onclick="fontSizeSwitcher.changeFontSize(' + j + ')">' + config.label[j] + '</li>';
        }

        document.write('<ul id="fontSizeSwitcher">' + this.str + '</ul>');

        if(i == '') {
            i = 1;
        }

        try {
            window.addEventListener("load", function() {
                fontSizeSwitcher.changeFontSize(i)
            }, false);
        }
        catch(e) {
            window.attachEvent("onload", function() {
                fontSizeSwitcher.changeFontSize(i)
            });
        }
    }
}

fontSizeSwitcher.start();

使い方としては、上記コードを外部ファイルとして<body>～</body>内の設置したい場所に、<script src="http://example.com/hoge/fontsize-switcher.js" type="text/javascript"></script>を記述。
すると、その場所に以下のように生成される

<ul id="fontSizeSwitcher">
    <li onclick="fontSizeSwitcher.changeFontSize(0)" id="fontSizeSwitcherSmall">S</li>
    <li onclick="fontSizeSwitcher.changeFontSize(1)" id="fontSizeSwitcherMedium" class="current">M</li>
    <li onclick="fontSizeSwitcher.changeFontSize(2)" id="fontSizeSwitcherLarge">L</li>
</ul>

基本的なカスタマイズにつぃては、コード上部のconfig = { ... };で指定。
たとえば切り替え段階を五つにしたい場合、

    config: {
        area: ['main'],
        length: 5,
        id: ['FS1', 'FS2', 'FS3', 'FS4', 'FS5'],
        label: ['S1', 'S2', 'S3', 'S4', 'S5'],
        size: ['77%', '85%', '100%', '114%', '122%'],
        cookieName: 'exampleName',
        cookieDate: '90'
    },

となる。
lengthの値に応じて、id, label, sizeの配列の値を増やしたりすること。
Fonts.cssを使わない場合、sizeには自由に%指定したりpx指定したりする。

ちなみに、上記カスタマイズで生成される切り替えボタンは、

<ul id="fontSizeSwitcher">
    <li onclick="fontSizeSwitcher.changeFontSize(0)" id="FS1">S1</li>
    <li onclick="fontSizeSwitcher.changeFontSize(1)" id="FS2">S2</li>
    <li onclick="fontSizeSwitcher.changeFontSize(2)" id="FS3" class="current">S3</li>
    <li onclick="fontSizeSwitcher.changeFontSize(3)" id="FS4">S4</li>
    <li onclick="fontSizeSwitcher.changeFontSize(4)" id="FS5">S5</li>
</ul>

となる。

ふぅ、これでVicunaで取り上げてくれるかな。わくわく。

若干修正しました
フォントサイズを切り替える対象のidを複数選択できるようにしてみた。(コメントにて要望があったため)
たとえば、div#mainとdiv#utilitiesを対象としたい場合は
スクリプト上部のarea: ['main'],をarea: ['main', 'utilities'],と変更する。
この仕様変更に伴い、このスクリプト全体も若干修正されているので改めてコピペしなおしてくだしあ＞＜

Comments:3

eiy 2007-09-07 (金) 17:54

早速導入させていただきました。
素晴らしいスクリプトをありがとうございます。

恥を忍んでお聞きします。
ナビゲーション部分も同時にフォントサイズを変えたいのですが、うまくいきませんでした。

試した範囲では、
area: ['main', 'utilities'], // 対象となるid
こんなやり方がしっくり来るかもと思ったのですが、動作せず。

よろしければ対象idを複数指定する方法を教えていただけないでしょうか。

marble 2007-09-08 (土) 20:21

●eiyさん
コメント遅れてごめんなさい＞＜

eiyさんのコメントをみて、「あ、複数idを対象にできると便利」と思い、修正してみました。
今一度スクリプトのコードをコピペし直してください＞＜

複数指定の方法はeiyさんがコメントで書いてくれたやり方でできます。
(たしかに上記方法が一番しっくり来ますね)

またなにかあれば※欄にどうぞー！

eiy 2007-09-08 (土) 22:24

marbleさん、素早い対応をありがとうございます。

無事、ナビゲーション部分のフォントサイズを変更できました。
ありがとうございました。

Trackbacks:3

Trackback URL for this entry: http://10coin.com/2007/09/04/102154/trackback
Listed below are links to weblogs that reference: フォントサイズを切り替えるJS:改 from 10coin.com

pingback from 海遊旅人 - 「Vicuna」備忘録 2007-09-12 (水) 18:11

[...] ・フォントサイズを切り替えるJavaScript 　・「10coin.com」-　フォントサイズを切り替えるJS:改　-　からJSソースをDOWN　　・　をHEADER部に挿入、動作確認済み [...]

pingback from 海遊旅人 - フォントサイズを切り替えるJavaScript 2007-09-13 (木) 10:19

[...] 「10coin.com」-　フォントサイズを切り替えるJS:改　-　からJSソースをDOWN [...]

trackback from 電脳無限回廊 2007-10-04 (木) 03:28

フォントサイズを切り替えるJavaScript...

Vicunaのテンプレート・Crystal使っていたら
なんかいいもの発見ｗｗｗｗｗｗｗ
その名も「フォントサイズを切り替えるJS:改」ｗ
簡単にいうとブログのフ (more...)

Home > JavaScript | Vicuna > フォントサイズを切り替えるJS:改

Search: 10coin.com内の検索

Recent Entries

Categories

Archives

Feeds

Return to page top