FitText

ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。

ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。

サンプルはこちらからどうぞ

→　ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」サンプル

また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→　Trent Walton’s blog　(http://trentwalton.com)

「FitText」の使用方法は続きをどうぞ。

まずは、githubからZIPファイルを一式ダウンロードします。

以下のコードを</body>の直前に記入します。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”jquery.fittext.js”></script>
<script>
$(“#fittext”).fitText();  //対応させる部分の#id名
</script>
※　#fittextの部分は適応させたい要素名を付けます。

そして<body>部分に
<div id=”fittext”>任意の文字</div>

を記入すれば完成です。

また「FitText」ではオプションで様々な設定をすることもできます。

・テキストサイズを制限する。一定値以上大きくしたり小さくしたりさせない。
minFontSizeにテキストサイズの最小値、 maxFontSizeに最大値を設定します。

$(“#fittext”).fitText(1.2, { minFontSize: ’20px’, maxFontSize: ’40px’ })

・テキストのサイズを調整する。デフォルトでは「１」。ウィンドウズの幅の１／１０で設定されています。

$(“#fittext”).fitText(1.2); // テキストサイズが小さくなります。
$(“#fittext”).fitText(0.8); // テキストサイズが大きくなります。

以下のソースは参考まで。

このエントリーをはてなブックマークに追加
LINEで送る

あわせてお読みください