管理人様に感謝です。以下、自分用備忘録として残しておこうと思います。
手順
外部読み込み用のファイル「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>
リックをクリックすると文字の拡大・縮小できることを確認しました。とりあえず実装してみましたが、これをしっくり配置するにはどうすればいいか試行錯誤したいと思います。