エントリー本文
ユーティリティスクリプト（その1：フォントサイズ切り替え）
Category：[アクセシビリティ]
Tag：[Accessibility, Customize, FontSize, JavaScript]
汎用的に使えそうなプログラムを集めていく予定のユーティリティスクリプトを作ってみました。第1弾はブラウザ種別でフォントサイズを自動的に切り替えるスクリプトです。
私はIE系のブラウザをメインブラウザで利用しているのですが、Netscape や Firefox の Mozilla系ブラウザではサイドバーのフォントサイズがやや小さくなります。
以前はスタイルシート切り替えを用いてフォントを切り替えられるようにしていたのですが、一度切り替えるという必要があり、ユーザビリティ上好ましくないのでとりやめました。
それ以降放置状態になっていましたが、最近 JavaScriptのスキルがあがり（？）、フォントサイズを切り替えられることが分かりましたので、これに古典的手法であるブラウザ判定を加えて実装しました。
とりあえず私のサイトではMozilla系ブラウザの場合、1pxだけフォントサイズを大きくするように設定しています。設定もれでページによってJavaScriptエラーが出ているかもしれませんが予めご容赦ください。
以下、設定方法です。
１．util.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで util.js をクリックし、同じファイル名でご自身のPCに保存してください。
本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。
２．util.js 配置
util.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。
３．テンプレート修正
フォントサイズを変更したいMTタグが存在する各テンプレートに util.js 起動スクリプトを追加します。起動スクリプトに設定する項目については後述します。
ここではメニューリストを対象に記していますが適用範囲はこの限りではありません。またダウンロードしたファイルを修正する必要はありません。
３．１ タグ名＋クラス属性名による指定（changeFontSizeByTagNameAndClassName）
指定したタグおよびクラス属性部分に設定されているフォントサイズを変更します。
changeFontSizeByTagNameAndClassName(appId, 'tagName', 'tagAttribute', 'fontSize');使用例（最近のエントリー・id 属性なし）
<div class="sidetitle">
Recent Entries
</div>
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<script type="text/javascript">
<!--
changeFontSizeByTagNameAndClassName(1, 'div', 'side', '10px');
//-->
</script>タグ＋クラス属性指定なので、例えば div タグ＋class 属性値が side の場合、ページの一番最後（または最後の該当指定タグの直下）に指定すれば対象のものを全て一括変換します。この方法を用いると設定は楽ですが設定箇所が後方になるため、ページ表示からフォントサイズ変換までに若干遅延が発生する場合がありますのでご注意ください。
３．２ id 属性による指定（changeFontSizeById）
指定した id 属性のタグに設定されているフォントサイズを変更します。
changeFontSizeById(appId, 'id', 'fontSize');使用例（最近のエントリー・id 属性あり）
<div class="sidetitle" id="entryname">
Recent Entries
</div>
<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>
<script type="text/javascript">
<!--
changeFontSizeById(1, 'entrylist', '10px');
//-->
</script>id 属性はページに1つしか設定できないため指定箇所が増えますが、折りたたみ等の起動スクリプトが既に存在するのであればその中に1行追加すればOKです。
３．３ id属性＋内部タグ名による指定（changeFontSizeByIdAndTagName）
指定した id 属性のタグに括られたタグに設定されているフォントサイズを変更します。
changeFontSizeByIdAndTagName(appId, 'id', 'tagName', 'fontSize');使用例（サブカテゴリーリスト）
<div class="sidetitle">
Categories
</div>
<div class="side" id="category">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<script type="text/javascript">
<!--
changeFontSizeByIdAndTagName(1, 'category', 'ul', '10px');
//-->
</script>例の通り、サブカテゴリーリスト等の再帰的にタグが現れる場合に用います。
設定項目
appId
- 名称：ブラウザ種別
- 用途：対象ブラウザを"0"または"1"で指定
- 設定値：0：IE系/1：Mozilla系
fontSize
- 名称：フォントサイズ
- 用途：変更するフォントサイズ
- 設定値：任意（em指定/px指定）
id
- 名称：id 属性名
- 用途：フォントサイズ変更対象の id 属性名
- 設定値：任意の id 属性名
tagAttribute
- 名称：属性名
- 用途：フォントサイズ変更対象のタグに属する class 属性名
- 設定値：任意の属性名
tagName
- 名称：タグ名
- 用途：フォントサイズ変更対象のタグ名
- 設定値：任意のタグ名
４．util.js インクルード文挿入
３項で設定した各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は util.js の文字コードを指定してください。
<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>本記事の転載は設定例含めご自由に行ってください。「私はこう設定しました」という使用例を書いて頂けるとありがたいです。記事からのプログラムファイルへの直リンクもOKですが、予告なしにリンクを変更する場合がありますのでこの記事またはスクリプトのページへのリンクをお勧めします。
ブログ等でプログラム改変の記事を投稿される場合は util.js に基づいていることと、改変内容を明記してください。
≫ ブラウザを識別してフォントサイズを変えるワザ from やむやむ
久しぶりに 骨のあるカスタマイズに挑戦！(^^*) ホホホホ 小粋空間 さま 「... [続きを読む]
≫ フォントサイズ切り替え from Magic White
小粋空間 ユーティリティスクリプト（その1：フォントサイズ切り替え）にて配布され... [続きを読む]
≫ サイドバーのフォントサイズ from 出張生活
現在メインのブラウザはLuascape2を使用してるんですが流行りに乗ってFir... [続きを読む]
≫ フォントサイズの切り替え from WhiteжButterfly
またまた続きます。 これはずっと前からやりたいと思っていたんですが、パッと見た感... [続きを読む]
うわー、すばらすぃ。＾＾
実のところ、スタイルシートの切り替えでやってると、ちょっとした修正を3つやらなきゃいけなくてめんどいなぁって思ってたんですよね。
というわけで、時間のある時に利用させていただきます。
お代は、恥ずかしい写真第2弾ということで。ｗ
＞Border.さん
こんにちは。
地味なカスタマイズ記事に反応ありがとうございます（笑）。
写真集待ってます（ウソ）。
こんちわ?
なんだか凄いテクですね(｡-_-｡)ポッ
じっくり書いていてくれる事を
理解しながら頑張ってみますv(￣ー￣)v
yujiroさんの、本名めちゃ格好いい事を
発見してしまった(@⌒ο⌒@)b ウフッ
よさげですねぇ、、。きつねさんでみると小さくできになってたんですよ、。
なんか難しそうなので、休みの日にやってみますです。
＞真希さん
こんばんは。
はい、是非チャレンジしてやってください。
見つかってしまいましたね。
…ってそれほどカッコイイ名前でもないですが。
＞みよたんさん
こんばんは。
ありがとうございます。
お暇な時にお試しになってやってください。
カテゴリー表示のカスタマイズもいいですね?。
おはようございます。久しぶりにたくさんのテンプレートに手を加えるカスタマイズで
なかなか時間が取れなくて 悶々としてました（笑）が、
今朝 いつもより1時間早く目が覚めたので、一気にやってしまいました。
最近自分でも Firefoxとか使うことが多いので 気になっていたことがスッキリして嬉しいです。
のちほど（少しあとになるかも。。。）やむやむでも 記事にさせていただこうと思います。
どうもありがとうございました。その２以降を期待してます。
＞さえらさん
こんばんはー。
久しぶりで、しかも早朝のご利用ありがとうございます。
記事も拝見させて頂きました、読み応え充分ですね！
ということで適宜追加していきたいと思います。
サイドメニューにばっかり気をとられていて、真ん中の記事部分の下にある Voteのところも
かなり字が小さいことを見落としてましたので、追加しました。
これで、３．１ ３．２ ３．３ 場所によって３種類とも使ったことになります。
ここまでやってみて、やっと 意味を理解した感じです。('▽') アハハ
＞さえらさん
こんばんは。
拝見させていただきました。バッチリですね。
指定方法がいまいち分かりにくいスクリプトですが、さすがです！
私もサイドバーの他、日付、Posted、検索のテキストエリアとボタンのフォントを修正してます。
util.jsによるフォントサイズ切り替えを適用させていただいたんですが、Fire Foxでは問題なく表示されるんですが、Operaでは適用されません。
何かヒントがあったらよろしくお願いします。
