この記事は2年以上前に書かれた記事です。現状にそぐわないかもなのでご注意を。

[wp]フォントサイズ変更プラグイン

ユーザビリティ向上のため、フォントサイズを変更できるようにするプラグインです。

font-resizer

テンプレート埋め込みタグ

<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>

出力タグ

<li class="fontResizer" style="text-align: center; font-weight: bold;">
<a style="font-size: 0.7em;" title="Decrease font size">A</a>
<a title="Reset font size">A</a>
<a style="font-size: 1.2em;" title="Increase font size">A</a>
<input id="fontResizer_value" type="hidden" value="ownid" />
<input id="fontResizer_ownid" type="hidden" value="content" />
<input id="fontResizer_ownelement" type="hidden" value="" />
<input id="fontResizer_resizeSteps" type="hidden" value="1.6" />
<input id="fontResizer_cookieTime" type="hidden" value="31" />
</li>

クラス付けしてくれているのでデザインはCSSでどうとでもなります。

汎用的に使えるかもしれないサンプルはこちら

テンプレート

<div id="font_select">
<ul>
<li id="fselectTtl">文字サイズ:</li>
<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>
</ul>
</div>

CSS

/* font-resizer */
#font_select {
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
text-align:right;
padding-right:0.5em;
line-height:20px;
}
#font_select ul {
list-style: none outside none;
margin:0 0 1em 0;
padding:0;
}
#font_select ul li,
#font_select ul li a {
display: inline-block;
zoom: 1; *display: inline;
vertical-align: middle;
white-space:nowrap;
}
#font_select ul li#fselectTtl {
letter-spacing: normal;
word-spacing: normal;
width:auto;
}
#font_select ul li.fontResizer {
}
.fontResizer a {
letter-spacing: normal;
word-spacing: normal;
width:20px;
hright:20px;
margin-right:2px;
}
.fontResizer a:hover {}
a.fontResizer_minus {}
a.fontResizer_reset {}
a.fontResizer_add {}

フロートはあまり好きじゃないので inline-block。
リサイズボタンにマイナスインデント+背景画像で。
そういえばマイナスインデントでリンクテキストをhiddenするテクニックがSEO的にマイナスっていう都市伝説はホントのところどうなんでしょうね?
どなたか知ってたら教えてくださーい。

追記:
JS組込みの手間を惜しまないのであれば、より汎用的でHTMLの制限のないこちらの方がいいかも。(未検証)

Simple jQuery Text Resizer

スポンサーリンク