普段ホームページの指導などを余所様にするときに 成るべく見る人のことを考えれば 文字（フォント）のサイズは切り替えられる方が好いですね、 などと言いながら紺屋の白袴、 己のブログにはその機能を今だ設置しておりませんでしたので 今回本ブログにも文字サイズを見る人の都合に依って 切り替えられるようにカスタマイズしてみました。
文字サイズ切替機能の現物確認
論より証拠、百聞は一見に如かずとも申します。
既に文字サイズ切り替え機能は実現していますので、
先ずは実際にどのような動きをするか試して貰った方が早いでしょう。
但し、お手持ちの環境に依っては想定通りの動きをしない場合もありますので
あらかじめご了承下さい。
さて大変申し訳ないながらフォントサイズの切り替え用のボタンは 取敢えずのレイアウトの都合上今回は本ブログは左サイドメニューのず…っと下の方、 HP作成浜松Tips と RSSリーダー登録 の間に 文字サイズ切替 と銘打って配置してあります。 右の図と同様のものが其処には配置されており、 それが今回設置した 文字（フォント）サイズ切替機能ボタン、大、中、小の3種になります。 孰れまたレイアウトの変更の際には ユーザービリティ上、画面上部に持って行く積りではいますが、 今はブログに設置を試みた、と言うことでこの不都合な位置になっています。
標準が小さ過ぎたWeb業界のフォントサイズ
ボタンを見付けられた方は…
先ずは最初はフォントサイズが【小】に設定されているのにお気付きになるでしょう。 これが本ブログの標準サイズで今迄のサイズがこれに相当するようにしました。 しばしば多くのホームページなどでは最初は【中】にされているのを見掛けますが順当な設定だと思います。 しかし本ブログは元々が文字サイズが小さ過ぎると感じていたために これを最も小さなサイズとし、もう一段、二段大きなサイズで ブログを閲覧していただけるように配慮しました。
なんとなれば兼ねてより所謂デザイナーズデザインでは 見た目？優先の文字サイズ選択でそれは読むには目を擦らねばならないくらい小さなものでした。 何故ならそのようなデザイナーは文字を読まないからです。 このような実に不都合な所謂デザインがWeb業界では大手を振って罷り通っていました。 今でも所謂デザイン重視？だかっちゅうホームページでは目にすることがあります。 その影響でか、ブログシステムお仕着せの文字サイズは小さい過ぎることがしばしばです。 この状態は記事を読んで貰うのが主目的のブログで好ましい筈が有りません。 これを何時迄も放っておいてはいけないとは思いながらも ずっと放置していたことを反省しつつ今回の文字サイズ切り替え機能の設置と相成りました。
兎も角、実際に【中】、【大】と、そしてまた【小】と クリック下されば効果がご覧いただけるでしょう。
文字サイズ切替機能実装解説の2記事
今回、文字サイズ切替機能を実現するに当たって利用させて貰ったのが jQueryと言うJavaScriptのライブラリを使った方法です。 実際に掲載のコードを使わせて貰ったのが Web Mugenさんの2011年2月11日の記事 CSS切替なしでフォントサイズを変更するjQueryのスクリプト でまた使い方の参考にもさせて貰いました。 このjQueryを採用した方法ではWeb Mugenさんも 元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作った、 と言われるようにスタイルシートを複数用意する手間がありません。 更に以下の特徴
- 画像でもテキストでも使える
- クリックするとアクティブ用のクラスが付くのでCSSを適応できる
- ロールオーバー画像のオンオフを切り替えれる
- フォントサイズの段階（標準・大とか小・中・大、等）もいくつでも設定できる
またWeb Mugenさんの記事を元にWeb Creater Netさんでも2012年2月2日に jQueryでフォントサイズ変更 と言う記事を書かれており、関連する貴重な情報を伝えてくれます。 一つは従来メジャーだった方法がアップル社のブラウザ Safariの最新のバージョン5では上手く機能しないこと、 もう一つは今回必要なソースコードjquery.cookie.jsが従来の場所にはなくなっているため 置き場所の変わっているその在り処を教えてくれていること、 とこの2点はとても参考になります。
2点目のjquery.cookie.jsは文字サイズを切り替えたらその場だけのものにせず 文字サイズを保存してくれる機能を実現するものでダウンロード可能なサイト SourceForge.JPよりjquery.cookie.jsをダウンロード を紹介してくれています。 この文字サイズ記憶保存期間は本ブログでは7日間に設定しました。
文字サイズ切替機能の実装手順要約
上記紹介したこの2記事には大変詳しく設置法が述べられていますので 興味のある方は参考にすれば自身のブログへの設置もそう敷居は高くないでしょう。 ここにも簡単に約めた手順を記しておきます。
- jQuery本体をダウンロードするなどして用意する。 これを保存した場所へのリンクを記したタグを ブログならばテンプレートのHTMLヘッダ内に記述する。
- jquery.cookie.jsをダウンロードして用意する。 これを保存した場所へのリンクを記したタグを ブログならばテンプレートのHTMLヘッダ内に記述する。
- 文字サイズ切替機能javascriptをコピーして ブログ内のテンプレートのHTMLヘッダ内へペーストするか、 若しくは別ファイルとしてこれを保存した場所へのリンクを記したタグを ブログテンプレートのHTMLヘッダ内に記述する。
- 文字サイズを切り替える範囲をブログ内のテンプレートHTML内で指定する。
- 文字サイズ切替ボタンのコードをブログ内のテンプレートHTML内に記述する。
- ブログへ適用するCSSファイル内か若しくは ブログ内のテンプレートのHTMLヘッダ内へ 切替ボタンのcssを記述する。
以上6ステップほどで完了します。 1番のjQuery本体ファイルについては態々ダウンロードしなくても Googleが素敵なサービスを用意してくれています。 Google Libraries API （少し前迄はGoogle AJAX Libraries APIと呼称していた。） と称す機能でGoogleが保管しているファイルの置き場所へのリンクを貼るだけで済みます。 今回はjQueryを利用しますので Google Libraries API - Developer's Guide が参考になるでしょう。 またこの件に関してWebログズさんが2011年11月22日に書かれている Googleが提供しているサーバーのJqueryの使い方 と言う記事が参考になるかも知れません。
今回は文字サイズ切替ボタンの配置が隠れるような場所で本記事を読んでこそ、と言う 知る人ぞ知る隠れ機能の様相を呈してしまいましたが、 このボタンがもっと目立つ場所に置き換えられる迄は 本記事に目を通されるような本ブログの熱心な読者向けへの提供とさせていただくことにします。