CSS Palette | ナノ

21 September 2014

[jQuery]訪問者が好みの文字サイズに変更できるようにする

ページ全体または特定要素の中の文字を訪問者が好みのサイズに変更できる。
Cookieを残さないので、アクセス毎・ページ毎に変更が必要になります。
訪問者のアクセス環境がJavascript無効だと変換できません。

デモ

スクリプト

<head>～</head>の中に下記のどちらかを挿入する。

ページ全体の文字サイズを変更する場合

<script>
function fsc(e){if("larger"==e)var r=Number(currentSize+perOrder);if("smaller"==e)if(currentSize!=perOrder)var r=Number(currentSize-perOrder);else var r=Number(currentSize);if("default"==e)var r=defaultSize;document.body&&(document.body.style.fontSize=r+fontSizeUnit,currentSize=r)}var fontSizeUnit="%",perOrder=10,defaultSize=100,currentSize=defaultSize;
</script>

特定要素（id）の文字サイズを変更する場合

<script>
function fsc(e){if("larger"==e)var r=Number(currentSize+perOrder);if("smaller"==e)if(currentSize!=perOrder)var r=Number(currentSize-perOrder);else var r=Number(currentSize);if("default"==e)var r=defaultSize;document.body&&(document.getElementById('要素id名').style.fontSize=r+fontSizeUnit,currentSize=r)}var fontSizeUnit="%",perOrder=10,defaultSize=100,currentSize=defaultSize;
</script>

フォームタグ

<body>～</body>の表示させたい箇所に下記のどちらかを挿入する。

フォームで文字サイズを変更する場合

<form id="txform" action="#">
<input type="button" value="拡大" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" />
<input type="button" value="縮小" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" />
<input type="button" value="元に戻す" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" />
</form>

リンク(a href=)で文字サイズを変更する場合

<a href="#" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" >拡大</a>
<a href="#" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" >縮小</a>
<a href="#" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" >元に戻す</a>

解説ほか

クリエイティブ・コモンズCC0 1.0 Universal(パブリック・ドメイン)で公開されているugumi K.K.さんの「フォントサイズ変更スクリプト(タイプA)」をコンパクトにしたJavascriptです。（ユーザーエージェントのチェック、MacIE4.0等へのエラーメッセージの削除）

ここでは100%に対して10%ずつ拡大縮小する設定にしています。配布元では20%がデフォルト数値でしたが、スマートフォンからのアクセスを考え変更幅を狭くしました。perOrder=10が変更幅です。

このスクリプトを使用する際のバックリンクや使用報告、著作権表示は不要です。再配布も同様です。スクリプト自体の再配布は同様の条件で配布して下さい。テンプレートデザインに含む場合はこの限りではありません。

Csspalette

[jQuery]訪問者が好みの文字サイズに変更できるようにする

デモ

スクリプト

フォームタグ

解説ほか

New entry