jQuery fontsize switcher

jQueryの勉強のために作ったフォントサイズ切り替えボタンです。一応CSSの切り替えボタンとしても使えます。一応…。要JavaScript＋Cookie環境。webページはフォントサイズを指定すべきでないという考えになったので利用は推奨しませんが、せっかく作ったので残しておきます。ノーサポートですが興味のある方はダウンロードして適当にお使いください。同梱しているjQueryのバージョンは古いので利用者側で新しいものをダウンロードし直してください。

• jQuery fontsize switcherサンプル
• jQuery fontsize switcherをダウンロードする

取扱説明

ダウンロードしたファイルを解凍してください。そして、

<link rel="stylesheet" href="./jquery-fontsize-switcher.css" type="text/css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./switch.js"></script>

をhead要素内に挿入します。

そして、フォントサイズ変更ボタンを表示させたいところに

<script type="text/javascript" src="./change.js"></script>

を挿入してください。パスは適宜書き換えてください。JavaScriptがオフの場合はフォントサイズ変更ボタンは表示されませんし、使うことができません。

大・中・小ボタンは、

• 大＝120％
• 中＝100％
• 小＝80％

に対応していますが、jquery-fontsize-switcher.cssの

body.fontL
    {
    font-size:120%;
    }
body.fontM
    {
    font-size:100%;
    }
body.fontS
    {
    font-size:80%;
    }

を書き換えれば表示サイズを変更することができます。bodyにclassを付与してフォントサイズを変更しているので、サイトデザイン自体を変更するためにも使えます（手間がかかりますが）。詳しくはダウンロードしたファイルのソースをご確認ください。

また、フォントサイズ変更ボタンのマークアップを変更したい場合は「change.js」を、フォントサイズ変更ボタンのスタイルを変更したい場合は「jquery-fontsize-switcher.css」の「dl#size」以降を修正してください。

• 戻る