jQueryでフォントサイズ変更

2012/02/02

Javascript

ホームページ内に｢小｣｢中｣｢大｣といったボタンを用意して、フォントサイズをJavascriptで変更させるようなサイトを構築したことがある方は多いと思います。
よく知られている方法としては、Javascriptライブラリ等を活用して実装する方法です。
その中でも、"styleswitcher.js"といったJavascriptライブラリを用いてフォントサイズ変更を実装しているサイトをよく見かけますが、このstyleswitcher.js、Safariのバージョン5以降では正常に動作しません(※以前のバージョンでは動作します)。
最近のブラウザは、画面サイズを%(パーセント)で変更させて、テキストだけではなく画面全体を拡大･縮小できる機能が付いたものが多いので、あまりこの種のスクリプトは使わなくなりましたが、以前に作成したサイトにstyleswitcher.jsを使用している場合、Safariのバージョン5以降ではフォントサイズ変更ができないので、｢対応しないといけないなー｣なんてことを何度が聞いたことがあります。
同じような処理をする場合、クッキーを保存させるスクリプトとフォントサイズを変更させるスクリプトを用意すれば、Safariでも問題なく動作しそうです。
今回は、簡単に上記のような対応ができるように、jQueyのライブラリであるjquery.jsとクッキー保存に使用できるjquery.cookie.jsを使ってデモ版を用意してみました。

Keyword：フォントサイズ変更,jQuey,jquery.cookie.js

jQueryでフォントサイズ変更

jquery.jsとjquery.cookie.jsを用意する

jQueryのサイトよりjquery.jsをダウンロード

⇒ jquery.jsダウンロードページ
※2012.2.2時点のjquery.jsの最新バージョンは1.7.1です。

jquery.cookie.jsをダウンロード

⇒ GitHubのjquery.cookie.jsダウンロードページ
※jQueryのサイトからはリンクが無くなっているようです。
※クッキー保存スクリプトを自作したい方は“QuirksMode”のサイトが参考になります。

ダウンロードしたjQueryライブラリをHTMLから外部ファイルとして読み込む

HTML

<!--head部分に以下を追記-->
<head>
<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery.cookie.js" type="text/javascript"></script>
</head>

補足

jquery本体は、もちろんminify化された”jquery-○.○.○.min.js(○はバージョン)”でも構いません(というか、そっちの方がよいです)。

フォントサイズ変更用のスクリプトを作成しHTMLに実装する

Javascriptでフォント変更用のスクリプトを作成し、HTMLに実装します。
jquery.jsやjquery.cookie.jsと同様に、ヘッダーにフォントサイズ変更用のスクリプトを外部ファイルとして読み込み、HTMLにそのJavascriptを動作させるための記述をします。
以下にデモページを用意しましたので、ソースの記述は割愛します。

※デモ版作成には、Web Mugenさんのサイトを参考にさせていただきました。
※フォントサイズ変更用のスクリプトは、上記参考サイトをご覧ください。
※デモ版のフォントサイズ変更用スクリプトは、デモ版用に一部改編しています。
※HTMLの記述は、デモページよりソース表示でご覧いただけます。
※Internet Explorer7～9･Firefox8～10･Chrome15～16･Safari5.1で動作確認済み。
※Chromeはローカル環境上でjquery.cookie.jsを使ってのクッキー保存はできませんので、サーバー環境を用意した上で動作確認を行ってください。

[その他参考リンク：jQuery･styleswitcher.js･Apple Support Communities]
・jQuery
・styleswitcher.js
・Apple Support Communities
※AppleのサポートコミュニティにSafariに関する件が掲載されています。

Prev List Next

関連記事(※当記事と関連性が高いと思われる記事)