ユーティリティスクリプト（その1：フォントサイズ切り替え）
汎用的に使えそうなプログラムを集めていく予定のユーティリティスクリプトを作ってみました。第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 に基づいていることと、改変内容を明記してください。
