affiliate.ks-product

アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています!関連書籍のレビューも書いています

代替CSS必要無し!jQueryフォントサイズ切り替えプラグイン公開!【JavaScript】

      2014/09/02

最近はフォントサイズ切り替え機能を導入しているサイトがめっきり減りましたが、未だ「フォントサイズ CSS 切り替え」などといったキーワードで訪問される方がいるのでプラグインを作ってみました。

以前はstyleswitcher.jsというフォントサイズ切り替えライブラリが定番でしたが、代替CSSを用意したり、スクリプトが動くようにHTMLを書き換える必要があったりと初心者には少しハードルが高いものだったかも知れません。

今回作成したjQueryプラグイン「jquery.fontSize」 は面倒な設定を排除しました!基本的な使用方法であれば導入は簡単です!

プラグインを動作させる為の前提条件!

フォントサイズを変更したい箇所のスタイルをpx指定しないこと!以上です。

まずは必要最小限の記述のサンプルご紹介!

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.fontSize.js"></script>

<script type="text/javascript">

	$(function(){

		$("#font-size").fontSize();

	});

</script>

デモを表示する

JavaScriptの記述は以上で完了です(1、2行目で読み込んでいるjquery、jquery.cookieは既に使用されている場合は必要ありません。)。

簡単に解説すると、

  • $(“#font-size”)の部分にはフォントサイズ切り替えボタンを表示させたい要素を指定しているので適切なものに変更してください。
  • fontSize()のパラメータを省略した場合はbody要素にsmall=12px、medium=14px、large=16pxが設定されます

フォントサイズ切り替えボタンのスタイルは必要に応じて設定してください。背景画像を使って画像ボタン化することも可能です。

/* フォントサイズ切り替えボタンのスタイル。自由にカスタマイズしてください。 */
#font-size div.small,
#font-size div.medium,
#font-size div.large { font-size:12px; display:inline-block; /display:inline; /zoom:1; padding:6px; border:1px solid #ccc; cursor:pointer; margin-left:3px; }
#font-size div.active { color:#fff; background-color:#c00; }
#font-size div.small span,
#font-size div.medium span,
#font-size div.large span { /* display:none; テキストを削除して画像ボタン化することも可能 */ }

任意の箇所だけフォントサイズを変更するには?

先述したようにpx指定した箇所は可変しない為、スタイルで調整することも可能ですがせっかくのライブラリです。スクリプトで適用範囲を決めましょう。

	/* 必要な部分のみ抜粋しています。先述のサンプルの該当箇所を置き換えてください */

	$("#font-size").fontSize({"data" : [
		{
		 	//フォントサイズを変更したい要素をCSSセレクタで指定する
			"target" : "#main,#sub",

			 //小、中、大ボタンを押した際適用されるサイズ。px、em等も使用可能。
			"size" : { "small":"130%", "medium":"150%", "large":"200%" }
		}
	]});

“target” : “#main,#sub”となってる部分でフォントサイズ切り替えを適用する要素をCSSセレクタで指定しています。この例では#mainと#subのみに適用されます。

“size” : { “small”:”130%”, “medium”:”150%”, “large”:”200%” }では上記の適用するフォントサイズを指定しています。px、em等も指定可能です。

要素ごとに異なるフォントサイズを適用するには?

	$("#font-size").fontSize({"data" : [

		//各要素個別にサイズを設定したい場合は以下のように設定

		{
			"target" : "#main",
			"size" : { "small":"130%", "medium":"150%", "large":"200%" }
		},
		{
			"target" : "#sub", 
			"size" : { "small":"100%", "medium":"120%", "large":"150%" } 
		}
	]});

先述の例の応用で、#mainと#subにそれぞれ異なるサイズを指定しています。

ダウンロード

Download Files ファイルをダウンロードする

jquery.fontSize
フォントサイズを簡単に切り替えるjQueryプラグインです。
ライセンス: MITライセンス
必要ファイル: jquery、jquery.cookie(zipに同梱済み)

*jquery.fontSizeはローカル環境では動作しない可能性があります。サーバーにアップして動作確認してください。
*jsファイルにもコメントがあります。必要に応じてご覧ください。

 - Web制作テクニック , , , , , , ,