文字の拡大縮小に対応

電脳備忘録
記事を見たときにちょっと文字が小さいような気がしたので、フォントサイズを現状の13pxより大きくしようと思いましたが、デザインとのバランスが崩れるような気がしたので、文字の拡大・縮小リンクを設置することにしました。とりあえず、google先生が教えてくれたこちらのエントリーを元に実装しました。
管理人様に感謝です。以下、自分用備忘録として残しておこうと思います。

手順

外部読み込み用のファイル「font-size.js」を作成し、下記のコードを記述します。 下記の例を参考にフォントサイズの最小値・最大値、拡大・縮小の有効範囲を指定。
※jQueryが利用できることが前提となります。

  • フォントサイズを13px~18pxの範囲で1pxずつ拡大・縮小
  • entry-content内のテキストに対して拡大・縮小を設定
var minValue=13;
var maxValue=18;
$(document).ready(function(){
var ChildElements=$('.entry-content *');
$("#inc_font").click(function(){
var fontSizeNew=parseInt(($('.entry-content *').css("font-size")).replace(/px/,""));
if(fontSizeNew!=maxValue){fontSizeNew += 1;}
$('.entry-content *').css("font-size",fontSizeNew+"px");
});
$("#dec_font").click(function(){
var fontSizeNew=parseInt(($('.entry-content *').css("font-size")).replace(/px/,""));
if(fontSizeNew!=minValue){fontSizeNew -= 1;}
$('.entry-content *').css("font-size",fontSizeNew+"px");
});
});
/mt-static/js ディレクトリに「font-size.js」をアップロードして呼び出すためのリンクを設定。
<script type="text/javascript" src="<$mt:StaticWebPath$>js/font-size.js"></script>
任意の場所にリンクボタンを設置。
<a href="javascript:void(0)" id="dec_font">縮小-</a> | <a href="javascript:void(0)" id="inc_font">拡大+</a>
リックをクリックすると文字の拡大・縮小できることを確認しました。とりあえず実装してみましたが、これをしっくり配置するにはどうすればいいか試行錯誤したいと思います。

広告

ブログの維持費に充てるでございます・・・。