Front End Programming

JQueryでまるっと文字サイズを変更

CSS jQuery

JQueryで文字サイズを変更し、Cookieに文字サイズ情報を保存しておいて同サイト内なら文字サイズを維持する方法をメモっておきました。アクセシビリティ的にはあんまり意味ないんですけど笑

基本のJQueryを使った文字サイズの変更方法

いろいろやり方があるみたいですが、試してCSSに手を加えなくてもOKっていうコチラのタイプを使ってみました。


参考 jQueryフォントサイズ切り替えプラグイン

▼DLはこちらから可能

ZipDL

ZIPを解凍するとjquery.cookie.jsとjquery.fontSize.jsがあります。jquery.js(jquery.min.js=軽量タイプを使います)はgoogleから取ってきました。動くバージョンならなんでもいいと思います。
以下外部ファイルをおきます。

使い方

  1. まず、前提条件としてフォントサイズを可変させたい箇所のフォントサイズにpxを指定していないこと。
    (pxを使用するとその部分は可変しません。逆にフォントサイズを変えたくない場合はpx指定してください。)
  2. コードを直前に記述してください。
    ※ デフォルトの文字サイズはsmallに指定されています。
    変更したい場合はソースコードのdefaultStateの値を"medium"または"large"に変更してください。
  3.  


※使い方にある通り、通常の場合は

内で問題なく動いたのですが、部分にサイズ変更を適応したコードだと動かなくなることがあります。その場合は手前に置いたら大丈夫でした。


指定した場所のみサイズ変更したい

fontSize({"data":[~以下スクリプトを追記すれば指定した個所のサイズ変更可能です。

下記の場合idがmainとsubと指定した個所だけにサイズ変更が適応されるようになります。

$("#font-size").fontSize({"data" : [
    {
        "target" : "#main,#sub",
        "size" : { "small":"80%", "medium":"100%", "large":"150%" }
    }
]});

さらに改造したい

サンプルは大中小ボタンがテキストでjsでタグを追加・挿入しています。

jquery.fontSize.js109行目(くらい)のhtmlを書き換えます。

テキストの大・中・小を削除。

//削除
var html = '
 
 
 

'; var state; var self = this;     $(self).append(html);

まとめ

これでフォントサイズが変更できるようになります。ページ遷移しても同じサイト内なら指定箇所のサイズは変わらないのでとても便利です。

関連記事もあわせてお読みください

Read More

記事のジャンル

管理人について

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に10年以上Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me