佐賀でふらふり

佐賀をうろつくWebデザイナーのブログ

jQuery

今更だけどfont-sizeを拡大、縮小させるボタン作った


2月ももうおしまいですね。
もう1年の6分の1が終了ですよ。驚きです。

さて、一昔前によく見たような「文字サイズを変えるJavascript」覚えてますか?
「大」「中」「小」とボタンがあって、それを押すことでコンテンツのボタンが大きくなるやつです。

そして「一昔前に見たような」と言っておきながら、先日それをつくりましたので、覚え書き程度に残しておきます。

目次

  1. 出来上がり
  2. HTMLとcssとjQuery
    1. HTML
    2. css
    3. Javascript
  3. jquery.cookie.js
  4. まとめ

出来上がり

もうさっさと完成品を見たほうがいいかと思います。

jQueryを使った文字サイズの変更デモ

HTMLとcssとjQuery

この機能はjQueryでcssを操作して、文字サイズを変更しています。

HTML

HTMLでは単純に文字サイズを変えるボタンを表示しているだけです。

<h1>文字サイズ変更</h1>
<ul>
	<li id="fzS">小</li>
	<li id="fzM">中</li>
	<li id="fzL">大</li>
</ul>
<div id="content">
	<p>文字サイズ変えるぞー</p>
	<p>文字サイズ変えるぞー</p>
	<p>文字サイズ変えるぞー</p>
</div>

css

cssは、基本的な文字サイズを設定します。
文字サイズを変えるボタンは、フォントサイズを変えないようにしています。

#content {
  font-size: 100%;
}
li {
  font-size: 14px;
  font-weight: bold;
}

Javascript

メインとなるJavascriptですが、ボタンをクリックしたら、どういう動きをするか。というのを書いています。

$(function(){
	//クッキーがあればfontsizeを取得
	var fz = $.cookie('fontSize');
	//fzS = 75%;
	//fzM = 100%
	//fzL = 150%
	if(fz) {
		if(fz == 'fzS') {
			$('html').css('fontSize', '75%');
		}else if(fz == 'fzL') {
			$('html').css('fontSize', '150%');
		}
	}
	//サイズ変更時にクッキーに保存
	$('li').click(function() {
		//idを取得する
		var thisSize = this.id;
		//クッキーに保存
		$.cookie('fontSize', thisSize);
		//クリックしたサイズを反映
		if(thisSize == 'fzS') {
			$('html').css('font-size', '75%');
		}else if(thisSize == 'fzM') {
			$('html').css('font-size', '100%');
		}else if(thisSize == 'fzL') {
			$('html').css('font-size', '150%');
		}
	});
});

さて、これを見てわかるようにクッキーを使って、クリックした値を保存させています。
こうすることでページをまたいだりしても、文字サイズの変更を記憶したまま移動することができます。

jquery.cookie.js

まずは、jquery.cookie.jsをダウンロードして、jQueryの後に読み込みます。

保存してあるcookieを読み出すのは

$.cookie("KEY");

簡単ですね。
今回の場合、3行目ですね。

cookieを保存するには

$.cookie("KEY", "VALUE", { expires: 7 });

と記載します。
今回では19行目に記載しています。

この中で、KEYは保存するcookieの名前。今回は「fontSize」です。
VALUEは値ですね。今回はフォントサイズ「fzS」「fzM」「fzL」のどれかが入ります。
最後の部分はオプション的な部分。
expiresは有効期限。この場合7日間。
指定しない場合は、ブラウザを消すとクッキーも消えます。
その他にも有効なドメインとか指定できます。

まとめ

この文字サイズの変更機能は、個人的には必要ない気もしますが、それはあくまでも僕の年齢やいつもネットしてる時間だったりが関係しているからだと思います。

だから、ブラウザで文字サイズ変えられたり、拡大できたりするのを知らない人にとっては、必要なんだろうなと。

文字サイズの変更機能について、なるほどと思える記事を見つけました。
ウェブページに文字拡大機能を置くのは「時代遅れ」 — Website Usability Info

やはり閲覧デバイスも多様化してるし、それによって操作も違ってくるから、「文字サイズの変更」ではなく、違う方法でのアプローチが必要なのかもしれませんね。
そいぎ~


返信する

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA