まだデータがありません。
フォントサイズを変更「Text Resizer」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素のフォントサイズを変更するjQueryプラグイン「Text Resizer」を紹介します。
jQueryプラグイン「Modern Blink」
このプラグインを使えば！ページ遷移せずに、クリックアクションだけで簡単にフォントサイズを変更することができます。
CSSを使って、いちいち「font-size」を指定する必要もないので、簡単です。また、フォントサイズを変更する要素を特定できるのも便利ですね〜！
スポンサーリンク
デモの「フォントサイズ」欄にある小、中、大……をクリックしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Text Resizer - jQueryプラグインまとめのカルマ</title>
<style>
li {
display: inline-block;
}
#content {
width: 800px;
}
</style>
</head>
<body>
<h1>jQuery Text Resizerのデモでーす。</h1>
<p class="textresizer-label">フォントサイズ</p>
<ul id="text-resizer-controls" class="textresizer">
<li><a href="#nogo">小</a></li>
<li><a href="#nogo">中</a></li>
<li><a href="#nogo">大</a></li>
<li><a href="#nogo">特大</a></li>
<li><a href="#nogo">特々大</a></li>
<li><a href="#nogo">特々々大</a></li>
<li><a href="#nogo">特々々々大</a></li>
<li><a href="#nogo">特々々々々大</a></li>
<li><a href="#nogo">特々々々々々大</a></li>
</ul>
<div id="content">
<h1>タイトル</h1>
<p>フォントサイズ（小 中 大……）のリンクをクリックすると……。</p>
<h2>サブタイトル</h2>
<p>フォントサイズが変化するよー。</p>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.textresizer.js"></script>
<script>
$(document).ready(function () {
$("#text-resizer-controls li a").textresizer({
target: "#content"
});
});
</script>
</body>
</html>
スポンサーリンク