【コピペOK】jquery-cookieを使って文字サイズ・背景色変更ボタンを実装する(画面遷移対応)

文字サイズを変更できるボタン、背景色を変更できるボタンを実装していきます。今回は画面を移動しても選択した状態を保ちたいので「jquery-cookie」というライブラリを使って実装していきます。

完成版はこのような感じです。

See the Pen 背景色変更 by yokotamaki (@yokotamaki) on CodePen.

　

文字サイズ・背景色変更ボタンを実装する前に、まずはquery-cookieの使い方を紹介します。

jquery.cookieの使い方

まずはjquery.cookieを設置していきます。

ダウンロードして使用する場合

下記URLからjquery-cokieをダウンロードし、src > jquery.cookie.jsを任意の場所に設置してください。

jquery-cookie⇒https://github.com/carhartl/jquery-cookie

<script src="../js/jquery.cookie.js"></script>

CDNを使用する場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

jquery.cookieの書き方

基本

//値を保存する
$.cookie('名前', '値');

//値を取得する
var 変数名 = $.cookie(‘名前’);

//値を更新する
$.cookie('名前', '値');

//値を削除する
$.removeCookie('名前');

オプション

//cookieの保存期間
$.cookie('名前', '値', { expires: 7 }); // 7日間有効なcookie

//cookieを使用するパス　
$.cookie('名前', '値', { path: '/パス' }); // 特定のパスで有効なcookie
※サイト全体で使いたい場合は「/」

//cookieの有効ドメイン
$.cookie('名前', '値', { domain: 'example.com' }); // 特定のドメインで有効なcookie

　

cookieに保存された値は検証ツールから確認することができます。
削除したい場合は③を右クリックすることで削除することができます。

基本を抑えたところで、文字サイズ・背景色変更ボタンを実装していきましょう。

文字サイズ・背景色変更ボタンの実装

HTML・CSSの記述

HTML

文字サイズは中(16px)、背景色は白を選択した状態にしたいのでこの2つにis_activeクラスを付与しておきます。

<!-- 全て -->

<!---------------------- 文字サイズ変更ボタン ---------------------->
<div class="btn_wrap">
    <span>文字の大きさ</span>
    <button type="button" class="sizeBtn" id="font-small">小</button>
    <button type="button" class="sizeBtn is_active" id="font-middle">中</button>
    <button type="button" class="sizeBtn" id="font-large">大</button>
</div>
<!---------------------- 背景色変更ボタン ---------------------->
<div class="btn_wrap">
    <span>背景の色</span>
    <button type="button" class="bgBtn is_active" id="bg-white">白</button>
    <button type="button" class="bgBtn" id="bg-blue">青</button>
    <button type="button" class="bgBtn" id="bg-black">黒</button>
</div>

<div class="content">
  今回は「jquery-cookie」というライブラリを使って、文字サイズを変更できるボタン、背景色を変更できるボタンを実装していきます。今回は「jquery-cookie」というライブラリを使って、文字サイズを変更できるボタン、背景色を変更できるボタンを実装していきます。今回は「jquery-cookie」というライブラリを使って、文字サイズを変更できるボタン、背景色を変更できるボタンを実装していきます。今回は「jquery-cookie」というライブラリを使って、文字サイズを変更できるボタン、背景色を変更できるボタンを実装していきます。
</div>

CSS

/* 全て */

:root {
  --pink-to-yellow: #ff82a5;
  --to-bgColor: white;
  --to-white: black;
}
html {
  font-size: 62.5%;
  transition: .2s;
}
body {
  font-size: 1.6rem;
  transition: .2s;
}
button:hover {
  cursor: pointer;
}

@media (max-width: 768px) {
    body {
        font-size: 1.4rem;
    }
}

.content {
  padding: 20px
}
.btn_wrap {
  margin: 20px;
}
.btn_wrap button {
  font-size: 1.6rem;
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  background: transparent;
  color: var(--to-white);
}
.btn_wrap button.is_active {
  background: var(--pink-to-yellow);
  color: var(--to-bgColor);
}

【ポイント①】htmlのfont-sizeに62.5%を指定する

html {
  font-size: 62.5%;  /* 16px * 62.5% = 10px */
}
body {
  font-size: 1.6rem;
}

これはフォントサイズの初期値を16pxから10pxにするためにこの記述をしています。
今回は文字サイズを一括で変更したいので「rem」を使用します。ですが、上の記述をしないと「1rem=16px(初期値)」の状態です。このままでも問題ありませんが、remを指定するたびに計算するのは面倒なのでfont-sizeに62.5%を指定して「1rem=10px」に変更しています。

ルートのフォントサイズが16pxなので10px÷16px=62.5%
①htmlに「font-size: 62.5%;」とし、「1rem=10px」にする
②bodyに「font-size: 1.6rem;」を追加することで、ルートのフォントサイズを16pxにする

文字サイズ変更ボタンを押した際に変わって欲しくない箇所にはpxを使用することでサイズが変わらないようになります。

　

【ポイント②】色の指定は変数を使う

背景色を変更する際は、jqueryでhtmlセレクタにbackground、colorを指定して一括で変更を加えます。しかし、一部反映されないセレクタや個別で色を指定したい場合があります。そういった際に、変数を使用することで手間を省くことができます。

:rootに変数を定義していきます。そして、プロパティの宣言には「- -」＋「変数名」を記述し、値を定義します。

:root {
  --pink-to-yellow: #ff82a5;
  --to-bgColor: white;
  --to-white: black;
}

呼び出す際は、「var」＋「- -（変数名）」で、先ほど定義した値を当てはめることができます。

.btn_wrap button {
  font-size: 1.6rem;
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  background: transparent;
  color: var(--to-white);
}
.btn_wrap button.is_active {
  background: var(--pink-to-yellow);
  color: var(--to-bgColor);
}

jqueryでは:rootに定義した変数の値を変更します。
jqueryの記述を見ていきましょう。

jqueryの記述

//全て

$(function () {
    /* -----------------------------------------------
    // 背景色変更
    ----------------------------------------------- */
    let bg = $.cookie('bgColor');
    // cookieに値が保存されていた場合
    if (bg) {
        $('.bgBtn').removeClass('is_active');
        if (bg == 'bg-white') { 
            bgWhite();
            } else if (bg == 'bg-blue') { 
            bgBlue();
            } else if (bg == 'bg-black') { 
            bgBlack();
        }
    }

    $('.bgBtn').click(function () {
        $.cookie('bgColor', this.id, { expires: 7, path:'/' });
        $('.bgBtn').removeClass('is_active');
        if (this.id == 'bg-white') {
          bgWhite();
        } else if (this.id == 'bg-blue') { 
          bgBlue();
        } else if (this.id == 'bg-black') { 
          bgBlack();
        }
    });
  
    //背景色：白
    function bgWhite(){
        $('#bg-white').addClass('is_active');
        $('html').css('background', 'white'); //背景(白）
        $('html').css('color', 'black'); //文字色(黒）
        $(':root').css({
        "--to-white": 'black',
        "--pink-to-yellow": '#ff82a5',
        "--to-bgColor": 'white'
        });
    }
    //背景色：青
    function bgBlue(){
        $('#bg-blue').addClass('is_active');
        $('html').css('background', 'blue'); //背景(青）
        $('html').css('color', 'white'); //文字色(白）
        $(':root').css({
        "--to-white": 'white',
        "--pink-to-yellow": 'yellow',
        "--to-bgColor": 'blue'
        });
    }
    //背景色：黒
    function bgBlack(){
        $('#bg-black').addClass('is_active');
        $('html').css('background', 'black'); //背景(黒）
        $('html').css('color', 'white'); //文字色(白）
        $(':root').css({
        "--to-white": 'white',
        "--pink-to-yellow": 'yellow',
        "--to-bgColor": 'black'
        });
    }

    /* -----------------------------------------------
    // 文字サイズ変更
    ----------------------------------------------- */
    let size = $.cookie('fontSize');

    // cookieに値が保存されていた場合
    if (size) {
        $('.sizeBtn').removeClass('is_active');
        if (size == 'font-small') {
            fontSmall();
        } else if (size == 'font-middle') {
            fontMiddle();
        } else if (size == 'font-large') {
            fontLarge();
        }
    }
    
    $('.sizeBtn').click(function () {
        $.cookie('fontSize', this.id, { expires: 7, path:'/' });
        $('.sizeBtn').removeClass('is_active');
        if (this.id == 'font-small') {
            fontSmall();
        } else if (this.id == 'font-middle') {
            fontMiddle();
        } else if (this.id == 'font-large') {
            fontLarge();
        }
    });

    //文字サイズ：小
    function fontSmall(){
        $('#font-small').addClass('is_active');
        if(window.matchMedia("(max-width: 768px)").matches){
            $('body').css('font-size', '1.3rem');
        }else{ 
            $('body').css('font-size', '1.4rem');
        }
    }
    //文字サイズ：中
    function fontMiddle(){
        $('#font-middle').addClass('is_active');
        if(window.matchMedia("(max-width: 768px)").matches){
            $('body').css('font-size', '1.4rem');
        }else{ 
            $('body').css('font-size', '1.6rem');
        }
    }
    //文字サイズ：大
    function fontLarge(){
        $('#font-large').addClass('is_active');
        if(window.matchMedia("(max-width: 768px)").matches){
            $('body').css('font-size', '1.6rem');
        }else{ 
            $('body').css('font-size', '1.8rem');
        }
    }
});

解説

まずcookieの値を取得します。

let bg = $.cookie('bgColor');

ボタンがクリックされた時に、ボタンのid名を保存する処理を行います。
※オプションは保存期間７日間とサイト内を移動しても選択された状態を維持していたいため、『{ expires: 7, path:’/’ }』を指定します。

今回、白い背景は「bg-white」、青い背景は「bg-blue」、黒い背景は「bg-black」という名前のidをつけているため、先ほど取得した値（変数:bg）とidを使い、呼び出す関数を切り替えています。

// cookieに値が保存されていた場合
if (bg) {
    $('.bgBtn').removeClass('is_active');
    if (bg == 'bg-white') { 
        //背景色が白だった時の処理を記述
        } else if (bg == 'bg-blue') { 
        //背景色が青だった時の処理を記述
        } else if (bg == 'bg-black') { 
        //背景色が黒だった時の処理を記述
    }
}
//クリックされた時の処理
$('.bgBtn').click(function () {
    $.cookie('bgColor', this.id, { expires: 7, path:'/' });　//cookieに保存
    $('.bgBtn').removeClass('is_active');
    if (this.id == 'bg-white') {
        //背景色が白だった時の処理を記述
    } else if (this.id == 'bg-blue') { 
        //背景色が青だった時の処理を記述
    } else if (this.id == 'bg-black') { 
        //背景色が黒だった時の処理を記述
    }
});

呼び出された関数の中には.cssを使って背景色（文字サイズ）を上書きしていきます。

function bgBlue(){
    $('#bg-blue').addClass('is_active');
    $('html').css('background', 'blue'); //背景(青）
    $('html').css('color', 'white'); //文字色(白）
    $(':root').css({
    "--to-white": 'white',
    "--pink-to-yellow": 'yellow',
    "--to-bgColor": 'blue'
    });
}

文字サイズ変更ボタンの場合も同様の書き方ですが、レスポンシブに対応できるように『matchMedia()』を使って分岐しています。

function fontSmall(){
    $('#font-small').addClass('is_active');
    if(window.matchMedia("(max-width: 768px)").matches){
//768px以下の処理を記述
    }else{ 
//768px以上の処理を記述
    }
}

完成

See the Pen 背景色変更 by yokotamaki (@yokotamaki) on CodePen.

以上【コピペOK】jquery-cookieを使って文字サイズ・背景色変更ボタンを実装する(画面遷移対応)でした！