WEBサイトにフォントサイズを変更するためのボタンを設置する方法を紹介したいと思います。よく見かける以下のようなやつですね。
非常に簡単に実装できるので、ボタンを設置したいとお考えの方は、ぜひ参考にしてください。
ステップ1. jquery.cookie.jsのダウンロードと設置
今回、jquery.cookie.jsというCookieを操作するjQueryも利用します。なので、まずはjquery.cookie.jsをGitHubからダウンロードして、サーバー上の適当な場所に設置します。
jQueryも自サーバーに設置したい場合は、ダウンロードしてサーバーにアップロードしておきます。
ステップ2. フォントサイズ変更ボタンのマークアップ
ファイルの設置が完了したら、ボタンをマークアップしていきます。以下は画像を使った場合のHTMLです。
<div id="font-size">
<a href="" onclick="font('12px')"><img src="images/font-size-small.png" alt="小"></a>
<a href="" onclick="font('15px')"><img src="images/font-size-middle.png" alt="中"></a>
<a href="" onclick="font('18px')"><img src="images/font-size-large.png" alt="大"></a>
</div>
onclickに、ボタンをクリックした時の変更サイズを記述しておきましょう。今回は、12～18pxにしました。
ボタンの配置を変えたい場合は、CSSで調整してください。
ステップ3. jQueryとjquery.cookie.jsの呼び出し
最後にjQueryとjquery.cookie.jsを呼び出すためのコードを追加します。記述する場所は、</body>の直前でOKです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
$("body").css("font-size",$.cookie('fsize'));
});
function font(size){
$("body").css("font-size",size);
$.cookie("fsize",size,{expires:7});
}
</script>
1行目と2行目でjQueryとjquery.cookie.jsをロードしています。ファイルパスは適宜変更してください。また、jQueryをすでにロード済みの場合は、1行目は記述する必要はありません。
9行目の「expires:7」がCookieの保存期間です。この場合、7日間ということになります。フォントサイズを変更した場合、変更後のサイズが7日間保持されます。
以上で、フォントサイズの変更ボタンの設置は完了です。
あとがき
ほとんどコピペで実装することができるので、簡単ですね。特に知識がなくても実装できるかと思います。