文字サイズ変更のオプションを追加

簡単な連絡で失礼しますが、このブログの文字サイズを変更させる為のオプションを追加しました。

【18:40 Feb.5 2011 追記】
Internet Explorer 8 以下では文字サイズ変更後、表示が崩れてしまうので IE8 以下には非表示（変更不可）にしました。

文字サイズ変更のオプションを追加

初期設定は「M」になっています。
もし「もっと大きくなるといい」などありましたらご遠慮なくどうぞ言ってください。「X」サイズをもっと大きめに設定します。

以下備忘録として方法を書いておきます。

文字サイズを変更させるためには CSS ごと変更させる方法がありますが、今回は jQuery （cf. Wikipedia）を使ってスマートにしようと思いました。
こちらの記事を参考にさせていただきました。多謝ッ！

フォントサイズを変える「大・中・小」ボタンを実装する方法 – THE HAM MEDIA BLOG

私自身いくつか躓いた箇所があるので上記記事に加える感じで書いてみます。
最初に必要なものを確認しましょう。

jQuery
今回の動作を実現するために必要な本体。”Download(jQuery)” からいただいてきます。
Cookie | jQuery Plugins
閲覧者が変更した文字サイズの設定を Cookie に保存させるために必要。
Downloads – “View all releases” からリンク先の Download – “jquery.cookie.js.txt” をダウンロード。”jquery.cookie.js” と名前をつけて保存してください。
文字サイズ変更のオプション（ボタン）を設置するページ・パーツファイル（header.phpなど）
こちらに JavaScript とボタン部を記述します。
CSS
変更させる文字サイズを指定します。

以下、私の環境である WordPress での説明になります。
文字サイズ変更のボタン（的なもの）はブログ全体に文字サイズを行き渡らせるためにヘッダー部に用意することにしました。

まず jQuery 本体 “jquery-1.5.min.js” （数字はヴァージョンなので変わるかも）と、クッキー用プラグイン “jquery.cookie.js” をそのままアップロードします。私はブログ以外でも使うことがあるかと思い、ブログ外に置きました。
そして “header.php” からリンクさせます。

そして今度はボタンを設置します。がその前に私のサイトの状態を説明しましょう。
現在このブログの文字サイズはCSSにて、body に font-size: 85%; を指定しています。そして各部で文字サイズを変更させる必要がある場合（小さめにしているサイドバーや、大きめにしている記事タイトル、小さめにしている記事フッターなど）は em を使って前述の基本文字サイズ 85% から相対的に大小を指定しています。
この記事の文字サイズ変更は、その body に指定している文字サイズ（85%）に対して大小を用意する主旨となっています。

さて、では作っていきましょう。
まず、文字変更のためにクラス名を考えてください。
私は fontsize-s, fontsize-m, fontsize-l, fontsize-x と4種類用意することにしました。このうち fontsize-m が基準（初期設定）となります。
クラス名を決めたら CSS にフォントサイズを指定しておきましょう。

[css]
.fontsize-s {
font-size: 0.9em;
}
.fontsize-m {
font-size: 1em;
}
.fontsize-l {
font-size: 1.1em;
}
.fontsize-x {
font-size: 1.2em;
}
[/css]

続いてが一番大事なところになります。header.php に戻って文字サイズ変更のために JavaScript 記述します。
さきほど “jquery-1.5.min.js” と “jquery.cookie.js” をリンクさせましたがその下あたりにこのように書き足しましょう。

//フォント変更を適用する要素を指定。bodyなら ‘body’ とする
var elm = $(‘#container’);

//’fontsize-m’ は基準としたフォントサイズのクラス名
(!history)? elm.addClass(‘fontsize-m’):elm.addClass(history);

//後述するボタン部にあわせて ‘li’,’#fontChange’ は適宜変更
$(‘li’,’#fontChange’).click(function(){
var setFontSize = this.id;
$.cookie(‘fontSize’, setFontSize);
elm.removeClass().addClass(setFontSize);
});
});
</script>
</head>
[/xml]

フォント変更を適用する要素は、私の場合 body に既に基準フォントサイズを指定しているので、ページ全体を包む div#container にすることにしました。その場合 ‘#container’ と記述します。
今度はボタン部を作ります。ここは人によるところが大きいですので細部については省略します。

[xml]
<ul id="fontChange" class="side-content">
Text Size
<li id="fontsize-s">S</li> /
<li id="fontsize-m">M</li> /
<li id="fontsize-l">L</li> /
<li id="fontsize-x">X</li>
</ul>
[/xml]

前述の $(‘li’,’#fontChange’) とこの <ul id="fontChange"><li>～</li> が対応します。
またここではクラスを指定するのではなく、ID を指定することに注意してください。
でも仮にクラスも指定すれば、CSS で指定したフォントサイズがここにそれぞれ適用されます。
<li id="fontsize-x" class="fontsize-x">X</li> とすれば大きい（1.2em）「X」になります。

ここまでくれば文字サイズ変更が実装できているはずです。でもお気づきのようにこれだとボタン（S, M, L, X）にカーソルを重ねても何の変化もありません。これはハイパーリンクではなくボタンだからです。
このままでも問題はありませんが、視認性はよくないので、サイトの雰囲気に合わせてハイパーリンクのマウスオーバーの挙動と同じようにしましょう。
CSS に該当の ul#fontChange に対して指定を加えることにします。あなたのサイトに合わせて適宜変更してください。

[css]
header nav ul#fontChange li:hover {
cursor: pointer;
color: #e1a0dc; /* Pale Pink */
text-shadow: #e1a0dc 0 0 5px; /* Pale Pink */
}
[/css]

こうすることでリンク文と同じ挙動（カーソルの変更、色変更、影付）になりました。

以上をまとめると各ファイルの該当箇所はこのようになります。
まずは CSS から（私独自の指定を含んでいます）。

[css]
/* FONT SIZE */
header nav ul#fontChange {
margin: 0;
padding-left: 3em;

display: inline;
}
header nav ul#fontChange li {
padding: 0;
}
header nav ul#fontChange li:hover {
cursor: pointer;
color: #e1a0dc; /* Pale Pink */
text-shadow: #e1a0dc 0 0 5px; /* Pale Pink */
}
.fontsize-s {
font-size: 0.9em;
}
.fontsize-m {
font-size: 1em;
}
.fontsize-l {
font-size: 1.1em;
}
.fontsize-x {
font-size: 1.2em;
}
[/css]

続いて header.php。JavaScript のコメント部は削除しました。

[xml]
<!doctype html>
<html>
<head>
（省略）
<!– jQuery –>
<script src="http://site-ichijo.net/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://site-ichijo.net/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var history = $.cookie(‘fontSize’);
var elm = $(‘#container’);
(!history)? elm.addClass(‘fontsize-m’):elm.addClass(history);
$(‘li’,’#fontChange’).click(function(){
var setFontSize = this.id;
$.cookie(‘fontSize’, setFontSize);
elm.removeClass().addClass(setFontSize);
});
});
</script>
</head>

<header>
（省略）
<nav>
<ul>
<li>（省略）
<ul id="fontChange" class="side-content">
Text Size
<li id="fontsize-s">S</li> /
<li id="fontsize-m">M</li> /
<li id="fontsize-l">L</li> /
<li id="fontsize-x">X</li>
</ul>
</li>
</ul>
</nav>
</header>
[/xml]

以上です。お疲れさまでした！

Response

現在、この投稿へのコメント/トラックバックは受け付けていません。

Tweet

Share this:

Related