文字サイズを調整できるようにする

2008年 3月 16日(日曜日) 13:29 参照: 4443

はてなブックマークに追加　

Yahooブックマークに追加

以下のようにサイト内のフォントサイズをクリックして変更できるボタンをよく見かけますが、この設置方法を説明します。

文字サイズをワンクリックで変更

まず、次のコードをテンプレートに記述します。

??? ??? ??? ??? <script type="text/javascript">
??? ??? ??? ??? //<![CDATA[
??? ??? ??? ??? ??? document.write('<h3><?php echo JText::_('文字の大きさ'); ?></h3><p class="fontsize">');
??? ??? ??? ??? ??? document.write('<a href="/index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('大きく'); ?></a><span class="unseen"> </span>');
??? ??? ??? ??? ??? document.write('<a href="/index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('小さく'); ?></a><span class="unseen"> </span>');
??? ??? ??? ??? ??? document.write('<a href="/index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('リセット'); ?></a></p>');
??? ??? ??? ??? //]]>
??? ??? ??? ??? </script>

そして、これが重要ですが、cssで指定しているフォントサイズを%またはemで表示させます。font-size: 12px;等と指定した場合は機能しませんので注意してください。

サンプルCSSは以下のようになります。

body
{
background: #fff;
color: #000000;
font-family: MS UI Githic, Tahoma, arial, helvetica, sans-serif;
font-size: 76%;
padding: 0px;
text-align: center;
}