有名ブロガー yamada さんの運営する『 ＩＴquality 』2011年3月5日の jQueryでテキストサイズのスライドバーを作成するチュートリアル 記事に興味が沸いたので早速紹介サイト How to Control Text Properties using jQuery and UI Slider 及び LIVE DEMO を拝見の上、サンプルを拝借し、 本ブログにも実装してみました。
上のスライドバーを操作すれば本ブログ記事のタイトルが変化するのを見て取れると思います。 サイズが一番ドラスティックですかね？
紹介サイトのデモページに有るものはページ内に特別に設置したテキスト部分を変化させていますが、 本記事ではブログ記事タイトルに変えた上、 日本語では通常ＰＣに搭載されているフォント種類が少ないことから、 変化パラメータをフォントから行間に変えてみました。
上記から分かるように変化させられるのはタイトルだけではなく、 また変化パラメータもＣＳＳ属性を有するものであれば可能です。 即ち、ターゲットDOM及びCSSパラメータを指定出来ると言うことです。
ターゲットDOMはダウンロードスクリプトに含まれる
main.js
jQueryの.cssメソッドを含む行
$('.box').css('font-size', ui.value);
の
.box
部分を任意のCSSセレクタに変更することで指定可能です。
変化させるCSSパラメータ同ファイル、同行のCSS属性、上の例では即ち font-size を変更することで可能であり、 また変化量の対応は以下が該当します。
- value：デフォルト値
- min：最小値（スライダーの左端値）
- max：最大値（スライダーの右端値）
- step：最小値、最大値間に於ける変化量
此処数年来ホームページに於いてはユーザビリティ向上の名目で、 フォントサイズを「小 > 中 > 大」と 指定出来るものを見掛けられる様になって来ました。 本ブログ記事のプラグインを使用すれば更に細かく、バラエティーに富んだ 設定が可能になりますね。