jQueryで文字サイズを切り替えるボタンを作る

よくお役所のサイトなんかにあるやつですね。
今回は,こんなふうにあらかじめ基準になるフォントのサイズを定義しといて，

    var globalFontSize_S = 12;
    var globalFontSize_M = 16; //default
    var globalFontSize_L = 20;

var globalFontSize_S = 12;

var globalFontSize_M = 16; //default

var globalFontSize_L = 20;

それからjQueryで，

$('body').css('font-size', globalFontSize_M);

1	$('body').css('font-size', globalFontSize_M);

として，bodyのCSSに対してフォントサイズの指定を書き換えています。

で，CSS書く時に他のh1とかh2要素やdivとかspanでフォントサイズを指定するときは， パーセント指定します。
そうすれば基本サイズが変更になったときに，相対的に文字サイズが変化するのでいい感じに文字の拡大縮小ができるって寸法です。

逆にサンプルのフォント指定ボタン付近（AAとかS,M,Lってとこ）はテキストですがサイズが変わらないほうがいいので，ここはピクセルで絶対指定しています。

そうすれば当然，基本サイズに影響されず常に指定したフォントサイズになるので，ボタンのテキストや見出しまで大きさ変わっちゃうのはこまるなーって場合に役に立つはずです。

たぶん。

以下ソースです。

jQuery

$(document).ready(function() {
    var globalFontSize_S = 12;
    var globalFontSize_M = 16; //default
    var globalFontSize_L = 20;
    $('body').css('font-size', globalFontSize_M);
    $('.styleswitchS').click(function() {
        $('body').css('font-size', globalFontSize_S);
        $('#ctrl > ul > li > a').removeClass('active');
        $(this).addClass('active');
    });
    $('.styleswitchM').click(function() {
        $('body').css('font-size', globalFontSize_M);
        $('#ctrl > ul > li > a').removeClass('active');
        $(this).addClass('active');
    });
    $('.styleswitchL').click(function() {
        $('body').css('font-size', globalFontSize_L);
        $('#ctrl > ul > li > a').removeClass('active');
        $(this).addClass('active');
    });
});

$(document).ready(function() {

var globalFontSize_S = 12;

var globalFontSize_M = 16; //default

var globalFontSize_L = 20;

$('body').css('font-size', globalFontSize_M);

$('.styleswitchS').click(function() {

$('body').css('font-size', globalFontSize_S);

$('#ctrl > ul > li > a').removeClass('active');

$(this).addClass('active');

});

$('.styleswitchM').click(function() {

$('body').css('font-size', globalFontSize_M);

$('#ctrl > ul > li > a').removeClass('active');

$(this).addClass('active');

});

$('.styleswitchL').click(function() {

$('body').css('font-size', globalFontSize_L);

$('#ctrl > ul > li > a').removeClass('active');

$(this).addClass('active');

});

もしもCSS側で読み込んだフォントサイズと，ボタンのデフォルトサイズが異なると変なのでとりあえず初期化しておきます。
デフォルトサイズであるMボタンが押された時と同じにすれば良いので，押された時の処理と同じ事を書いてあります。

あとはボタンが押されたタイミングでスクリプトを発火させて，bodyのCSSを書き換えるって感じです。

HTML (切り替えボタン部分のみ)

<div id="ctrl" class="cf">
<ul>
    <li class="label"><small>A</small>A</li>
    <li><a href="javascript:void(0);" class="styleswitchS">S</a></li>
    <li><a href="javascript:void(0);" class="styleswitchM active">M</a></li>
    <li><a href="javascript:void(0);" class="styleswitchL">L</a></li>
</ul>
</div>

<ul>

</ul>

</div>

今回はテキストでやってますが，画像とかアイコンを使ってもいいかもしれませんね。
画像の方が直感的に判りやすい場合もありますし。

CSS

body {
    margin:25px 0;
    font-size:16px;
}
section {
    width:400px;
    margin:auto;
}
section p {
    margin:10px 0 15px;
}
section h1 {
    font-size:150%;
    border-bottom:2px solid #BBB;
}
section h2 {
    font-size:130%;
    border-bottom:2px solid #BBB;
}
section h3 {
    font-size:120%;
    border-bottom:2px solid #BBB;
}
#ctrl ul {
    float:right;
    margin-bottom:15px;
    list-style:none;
}
#ctrl ul li {
    float:left;
    font-size:16px;
    margin:0 1px;
    height:20px;
}
#ctrl ul li a {
    border:1px solid #CCCCCC;
    display:block;
    text-decoration:none;
    color:#333333;
    padding:3px 5px;
}
#ctrl ul li a:hover {
    color:#006699;
    border:1px solid #66CCCC;
}
#ctrl ul li .active {
    background:#EEE;
    font-weight:bold;
}
#ctrl ul li.label {
    font-size:20px;
    margin-right:5px;
    padding:3px 0;
}
#ctrl ul li.label small {
    font-size:14px;
}

body {

margin:25px 0;

font-size:16px;

}

section {

width:400px;

margin:auto;

}

section p {

margin:10px 0 15px;

}

section h1 {

font-size:150%;

border-bottom:2px solid #BBB;

}

section h2 {

font-size:130%;

border-bottom:2px solid #BBB;

}

section h3 {

font-size:120%;

border-bottom:2px solid #BBB;

}

#ctrl ul {

float:right;

margin-bottom:15px;

list-style:none;

}

#ctrl ul li {

float:left;

font-size:16px;

margin:0 1px;

height:20px;

}

#ctrl ul li a {

border:1px solid #CCCCCC;

display:block;

text-decoration:none;

color:#333333;

padding:3px 5px;

}

#ctrl ul li a:hover {

color:#006699;

border:1px solid #66CCCC;

}

#ctrl ul li .active {

background:#EEE;

font-weight:bold;

}

#ctrl ul li.label {

font-size:20px;

margin-right:5px;

padding:3px 0;

}

#ctrl ul li.label small {

font-size:14px;

}

一応JSうごかない環境用にbodyにもサイズ指定を入れてますが，JS有効だと結局jQuery側でもう一度上書きしちゃってるので，あとで修正とかでフォントサイズ弄るときに「かわらないよー！」ってなった場合はJS側もチェックしてみてください。（上記jQueryソースの補足も参照）

NeGiMeMo.net

jQueryで文字サイズを切り替えるボタンを作る

jQuery

HTML (切り替えボタン部分のみ)

CSS

いいね:

コメントするコメントをキャンセル

関連投稿

jQueryで文字サイズを切り替えるボタンを作る

jQuery

HTML (切り替えボタン部分のみ)

CSS

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル