名古屋工業大学 先進セラミックス研究センター
井田 隆/Web 運営

文字サイズ:

文字サイズ変更ボタンの実装

Web ページに文字サイズ変更ボタンを実装する方法に関するメモです。


基本的な考え方

文字サイズを変更するボタンを実装している Web ページが少なくありません。
(例えば→ 名古屋工業大学の Web サイト
しかし,「画像化された文字」の大きさが変更されない仕様では,あまり効果的ではないようにもみえます。

一方で,日本語 Web ページの場合,文字を画像化することには,エンコーディング(シフト JIS,UTF-8, EUC など)の違いによる文字化けが起こらないようにする意味合いもあるので,「画像化された文字を使うべきではない」とも言い切れません。 本当は画像化された文字まで含めて拡大/縮小する機能を実装すべきでしょうけれど,小規模な組織の Web サイトではそこまでしたくない場合が多いでしょう。

本来なら Web のブラウザ (Internet Explorer, FireFox, Google Chrome, Safari など) で見た目を変更するべきであり,「Web ページに文字サイズを変更させる機能を持たせる必要はない」という意見も有力であり,筆者も基本的にはこの意見に同意します。 しかし,Web サイトの閲覧者が,常に同じパソコンの同じアカウントで同じ Web ブラウザを使うとは限りませんし,スマートフォンなどの携帯型端末で Web ページを閲覧するときはパソコンとは見た目がかなり変わります。 Web ページ全体の見た目が悪くならないのであれば,Web ページに大中小ボタンを付けても構わないとも思います。

ここでは,機能は限定的かもしれませんが,「付ける」のも「外す」のも簡単で,とりあえず機能する「文字サイズ変更ボタン」の実装のしかたについて述べます。以下の Web サイトを参考にしました。

(→ javascriptで文字サイズを変更する方法|OKWave

JavaScript の使用

Web ページの見え方を制御するためには色々な方法があるようですが,現時点では JavaScript を使用するのが最も容易のようです。 必要な JavaScript コードはわずかなので, HTML ファイルに埋め込むことも苦になりません。 Web の閲覧者には,JavaScript を無効にしている人もいるでしょうけれど,この場合「文字サイズ変更ボタン」は「機能しないだけ」です。 セキュリティーを確保する意図で JavaScript を無効にしている人に対して,それほどストレスは感じさせないだろうと思われます。

ボタンの実装

HTML ファイルの2カ所に追加のコードを挿入します。 取り外すためには,挿入したコードを削除すれば良いだけです。

1.ヘッダー部の変更(JavaScript コードの挿入)

HTML ファイルの始めに書かれる <HEAD> と </HEAD> で囲まれる部分がヘッダー部です。 このヘッダー部の最後の位置(</HEAD> の直前)に以下のコードを挿入します。

<script type="text/javascript">
<!--
function large() {document.body.style.fontSize = "200%";}
function middle() {document.body.style.fontSize = "150%";}
function small() {document.body.style.fontSize = "100%";}
// -->
</script>

2.ボタンの表示

HTML ファイルの <BODY> と </BODY> で囲まれるボディー部の中で,大中小ボタンを表示したい場所に以下のコードを挿入します。

<p style="text-align:right">
文字サイズ:
<span style="white-space:nowrap">
<input type="button" onClick="small()" value = "小" style="font-size:100%">
<input type="button" onClick="middle()" value = "中" style="font-size:100%">
<input type="button" onClick="large()" value = "大" style="font-size:100%">
</span>
</p>

上のコードの中で,<p style="text-align:right"> 〜 </p> は右に寄せて表示する意味であり, <span style="white-space:nowrap"> 〜 </span> は改行を抑制する意味です。

この Web ページでは,タイトルのすぐ下,右側に寄せて大中小ボタンを配置しています。

補足

ある Web サイトの制作を,いわゆる「ホームページ制作会社」に依頼したことがあります。 「見出し」には画像化された文字が使われていて見た目はすばらしかったのですが,すぐに追加の見出しを付ける必要が生じました。

画像化された文字のデータから背景画像のみ抽出したり,使われているフォントの種類を推定することはやや困難です。 そこで,制作者が見出し画像を作るのに使った Photoshop のファイルを送ってもらい,それを自分で編集しなおして作成することにしました。 しかし,小さい組織の Web ページ管理者がそこまでするか?というのは大いに疑問です。


2012年6月30日