jQueryでフォントサイズを変更してjs.cookie.jsでクッキーに保存してみる

投稿日：2015/11/07 ｜最終更新：2015/11/09
JavaScript/jQuery
js.cookie.js, pixiv

jQueryとjs.cookie.jsを利用してフォントサイズを変更してみます。

js.cookie.jsは、jquery.cookie.jsの発展したjQueryプロジェクトです。
クッキーを保存して利用することができます。

フォントサイズを変更して、選択結果をjs.cookie.jsでクッキーに保存します。

まずはボタンの準備をしよう

HTML例

<ul id="switchFontSize">
    <li id="btn_small" class="f_small mincho">Ａ</li>
    <li id="btn_middle" class="f_middle mincho">Ａ</li>
    <li id="btn_large" class="f_large mincho">Ａ</li>
</ul>
<div id="honbun" class="mincho f_middle">
    <p>div#honbunのフォントサイズを変更します。デフォルトのサイズは f_middle にしています。</p>
</div>

フォントサイズ切り替えボタンはul#switchFontSizeで構成しています。
div#honbunのフォントサイズを変更します。
デフォルトのフォントサイズはdiv#honbunにクラスをつけて設定しておきます。

ul#switchFontSizeのliアイテムをクリックすることでフォントサイズのクラスを切り替える処理を走らせています。

CSS例

/* -------------------------------------------------------------------------------- */
/* 各種切り替えボタン
*/
/* -------------------------------------------------------------------------------- */
#switchFontSize{margin: 10px; float: right; font-size: 0.7em;}
#switchFontSize li{
    list-style: none;
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 0 10px;
    border: 1px solid #ccc;
    color: #999;
    display: block;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,f9f9f9+50,d6d6d6+100 */
    background: rgb(254,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(249,249,249,1) 50%, rgba(214,214,214,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(50%,rgba(249,249,249,1)), color-stop(100%,rgba(214,214,214,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(249,249,249,1) 50%,rgba(214,214,214,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(249,249,249,1) 50%,rgba(214,214,214,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(249,249,249,1) 50%,rgba(214,214,214,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(249,249,249,1) 50%,rgba(214,214,214,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}
#switchFontSize li.current{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,f9f9f9+50,feffff+100 */
    background: rgb(214,214,214); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(214,214,214,1) 0%, rgba(249,249,249,1) 50%, rgba(254,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,1)), color-stop(50%,rgba(249,249,249,1)), color-stop(100%,rgba(254,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(249,249,249,1) 50%,rgba(254,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(249,249,249,1) 50%,rgba(254,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(214,214,214,1) 0%,rgba(249,249,249,1) 50%,rgba(254,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(214,214,214,1) 0%,rgba(249,249,249,1) 50%,rgba(254,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */
}
#switchFontSize li:hover{color: #000;}
#switchFontSize li:first-child{
    -moz-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
}
#switchFontSize li:last-child{
    border-left: 0;
    -moz-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}
/* -------------------------------------------------------------------------------- */
/* 小説ブロック
*/
/* -------------------------------------------------------------------------------- */
#honbun{padding: 30px 0;}
/* -------------------------------------------------------------------------------- */
/* 本文用クラス
*/
/* -------------------------------------------------------------------------------- */
.gothic{font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', sans-serif;}
.mincho{font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'ＭＳ 明朝', 'MS Mincho', serif;}
.f_small{font-size: 0.8em; line-height: 1.8em;}
.f_middle{font-size: 1em; line-height: 2em;}
.f_large{font-size: 1.2em; line-height: 2.2em;}

例えば上記のようにします。
内容は自由に編集してください。

デモ画面で使用しているCSSのダウンロードはこちら（右クリック→リンク先をファイルとして保存）からどうぞ。

jQueryで本文のクラスを付け替えてみる

jQueryで本文のクラスを付け替えます。
今回は、小説ブロックにフォントサイズ大～フォントサイズ小のクラスをつけて、選択結果を一定期間クッキーに保存します。

クッキーに選択結果を保存するために、js.cookie.jsを利用します。

js.cookie.jsとは

js.cookie.jsの前身はjquery.cookie.jsです。
jquery.cookie.jsからクッキーの保存・取得・削除方法が異なっています。

詳しい使い方は別記事で解説します。

js.cookie.js利用準備をする

js.cookie.jsはこちらからダウンロードできます。
右下のダウンロードボタンをクリックし、ダウンロードしてください。
ダウンロードしたZIPを解凍し、[js-cookie-master/js-cookie-master/src]フォルダ内のjs.cookie.jsを利用します。

headタグ内にCSSとjavascriptの読み込んで準備する

headタグ内に下記のように記述してください。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="./js.cookie.js"></script>

今回は中サイズのフォントをデフォルトに設定しています。
他のサイズをデフォルトに設定する場合は、上記に紹介しているhtml例のデフォルト設定も変更してください。

CSS切り替え用のjQuery

CSS切り替え用のjQueryを設定します。
jsファイルにして読み込んでもいいですし、headタグ内に記述してもOKです。
（外部jsとして読み込む場合は、js.cookie.jsの後に読み込んでください。）

js記述例

$(document).ready(
    function() {
    // 画面読み込み時のフォントサイズ切り替えボタンのカレントクラス付与
        if (!Cookies.get('cookieFontSize')) {
            // クッキー未登録時に小説ブロックを診断してカレントクラスを付与
            if ($('#honbun').attr('class').match(/f_large/)) {
                $('#btn_large').addClass('current');
                $("#honbun").addClass('f_large');
                $("#honbun").removeClass('f_middle');
                $("#honbun").removeClass('f_small');
            } else if ($('#honbun').attr('class').match(/f_middle/)) {
                $('#btn_middle').addClass('current');
                $("#honbun").removeClass('f_large');
                $("#honbun").addClass('f_middle');
                $("#honbun").removeClass('f_small');
            } else {
                $('#btn_large').addClass('current');
                $("#honbun").removeClass('f_large');
                $("#honbun").removeClass('f_middle');
                $("#honbun").addClass('f_small');
            }
        } else if (Cookies.get('cookieFontSize') == 'f_large') {
        // クッキー大文字登録であれば大文字ボタンにクラス付与
            $('#btn_large').addClass('current');
            $('#btn_middle').removeClass('current');
            $('#btn_small').removeClass('current');
        // 小説ブロックに大文字クラス付与
            $("#honbun").addClass('f_large');
            $("#honbun").removeClass('f_middle');
            $("#honbun").removeClass('f_small');
        } else if (Cookies.get('cookieFontSize') == 'f_middle') {
        // クッキー中文字登録であれば中文字ボタンにクラス付与
            $('#btn_large').removeClass('current');
            $('#btn_middle').addClass('current');
            $('#btn_small').removeClass('current');
        // 小説ブロックに中文字クラス付与
            $("#honbun").removeClass('f_large');
            $("#honbun").addClass('f_middle');
            $("#honbun").removeClass('f_small');
        } else {
        // クッキー小文字登録であれば小文字ボタンにクラス付与
            $('#btn_large').removeClass('current');
            $('#btn_middle').removeClass('current');
            $('#btn_small').addClass('current');
        // 小説ブロックに小文字クラス付与
            $("#honbun").removeClass('f_large');
            $("#honbun").removeClass('f_middle');
            $("#honbun").addClass('f_small');
        }
    }
);
$(function(){
// 大文字ボタン押下時にクラスを付与
    $("#btn_large").click(function () {
    // 大文字ボタンにカレントクラスを付与
        $("#btn_large").addClass('current');
        $("#btn_middle").removeClass('current');
        $("#btn_small").removeClass('current');
    // 小説ブロックに大文字クラス付与
        $('#honbun').addClass('f_large');
        $("#honbun").removeClass('f_middle');
        $("#honbun").removeClass('f_small');
    // クッキーに選択結果を登録する
        Cookies.set('cookieFontSize', 'f_large', { expires: 7 });
        return false;
    });
// 中文字ボタン押下時にカレントクラスを付与
    $("#btn_middle").click(function () {
    // 中文字ボタンにカレントクラスを付与
        $("#btn_large").removeClass('current');
        $("#btn_middle").addClass('current');
        $("#btn_small").removeClass('current');
    // 小説ブロックに中文字クラス付与
        $('#honbun').removeClass('f_large');
        $('#honbun').addClass('f_middle');
        $('#honbun').removeClass('f_small');
    // クッキーに選択結果を登録する
        Cookies.set('cookieFontSize', 'f_middle', { expires: 7 });
        return false;
    });
// 小文字ボタン押下時にカレントクラスを付与
    $("#btn_small").click(function () {
    // 小文字ボタンにカレントクラスを付与
        $("#btn_large").removeClass('current');
        $("#btn_middle").removeClass('current');
        $("#btn_small").addClass('current');
    // 小説ブロックに小文字クラス付与
        $('#honbun').removeClass('f_large');
        $('#honbun').removeClass('f_middle');
        $('#honbun').addClass('f_small');
    // クッキーに選択結果を登録する
        Cookies.set('cookieFontSize', 'f_small', { expires: 7 });
        return false;
    });
});

１～51行目でページ読み込み時にクッキーに登録されている内容によって本文ブロックに付与するフォントサイズクラスを変更し、ボタンにカレントクラスを付与します。
cookieFontSizeというクッキーに[f_large]という文字列が入っている場合は大文字ボタンにクラスを付与し、本文は大文字で表示します。
[f_middle]という文字列が入っている場合は中文字ボタンにクラスを付与し、本文は中文字で表示します。
クッキーになにも入っていない場合は、f_smallクラスが本文ブロックに採用され、小文字ボタンにカレントクラスを付与します。

52～95行目で明朝体ボタンかゴシック体ボタン押下時のクラスの付け替えを行います。
また、ボタン押下時にクッキーに選択結果を格納します。

スクロールバーの調整やページめくりの実装、縦書き・横書き切り替えボタンなどを含んだデモ画面で使用しているjQueryのダウンロードはこちら（右クリック→リンク先をファイルとして保存）からどうぞ。
外部jsで上記jQueryを利用する場合は、js.cookie.jsの後に読み込んでください。