Webページに拡大/縮小機能をつける(IE専用)

Webページにできるだけ多くの情報を入れるには、フォントサイズを小さくするのが簡単です。
ただ、字があまりに小さすぎると、人によっては見にくいこともあります。

Webブラウザには、文字のサイズを変える機能があります。文字を大きくして表示することができます。
例えば、Internet Explorerなら、[表示]→[文字のサイズ]メニューです。
ただ、この機能だと文字のサイズだけが変わり、画像等はサイズが変わらないので、ページのレイアウトが崩れることもあります。
また、スタイルシートで文字サイズを決めうちにしていると、この機能を使っても文字サイズが変わらない場合もあります。

Operaにはページ全体を拡大/縮小する機能がありますが、Internet Explorerでもそれに近いことを行うことができます。
Internet Explorerでは、CSSに「zoom」という独自のプロパティがあり、それを使うとWebページ上の要素を拡大/縮小することができます。
このプロパティはbody要素にも適用することができ、それによってWebページ全体を拡大/縮小することもできます。

例えば、スタイルシートの部分に「body { zoom : 2;} 」と入れると、Webページ全体が2倍に拡大表示されます。

また、JavaScriptを使うと、zoomプロパティを動的に操作することもできます。
それを応用すれば、Webページの拡大/縮小を行うようなリンクを、そのページの中に入れることもできます。

まず、以下のJavaScriptを、Webページのヘッダー部分に入れます。

<script language="javascript">
<!--
function zoom(rate)
{
    var obj = document.getElementsByTagName('body')[0];
    obj.style.zoom = rate;
}
-->
</script>


そして、拡大/縮小のリンクをつける箇所には、以下のようなタグを入れます。

<a href="javascript:zoom(○);">□□□</a>


「○」の部分には、拡大/縮小の率(2や0.5など)を入れます。また、「□□□」の部分には、リンクとして表示する文字列を入れます。
例えば、「2倍に拡大」という文字をクリックした時に、Webページ全体が2倍に拡大されるようにするには、以下のようにします。

<a href="javascript:zoom(2);">2倍に拡大</a>


ただし、Webページによっては、拡大/縮小するとレイアウトが乱れる場合があります。
また、Internet Explorerのみで使える機能ですので、Webブラウザの種類を判別して、Internet Explorer以外ではリンクを表示しないようにするなどしておく方がより良いです。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください