I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

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

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

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

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

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

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

DEMO

HTML例

<ul id="switchFontSize">
    <li id="btn_small" class="f_small mincho">A</li>
    <li id="btn_middle" class="f_middle mincho">A</li>
    <li id="btn_large" class="f_large mincho">A</li>
</ul>
<div id="honbun" class="mincho f_middle">
    <p>div#honbunのフォントサイズを変更します。デフォルトのサイズは</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 ゴシック', 'MS Gothic', sans-serif;}
.mincho{font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'MS 明朝', '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利用準備をする
  1. js.cookie.jsはこちらからダウンロードできます。
    右下のダウンロードボタンをクリックし、ダウンロードしてください。
    js.cookie.js
  2. ダウンロードした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>

今回は中サイズのフォントをデフォルトに設定しています。
他のサイズをデフォルトに設定スル場合は、jQuery側のデフォルト設定も横書きに変更してください。

CSS切り替え用のjQuery

CSS切り替え用のjQueryを設定します。
jsファイルにして読み込んでもいいですし、headタグ内に記述してもOKです。
(外部jsとして読み込む場合は、js.cookie.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;
    });
});

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

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

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

関連記事

記事移動

関連記事

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

必ず使うページ上部に戻るスムーススクロール用jQuery

必ず使うページ上部に戻るスムーススクロール用jQuery

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed