2008年03月17日

文字サイズ変更ボタンのスクリプト

見ている人が文字サイズを[小][中][大]の3段階で変更できるボタンをサイトに設置するためのjavascriptを作成してみました。

サンプルHTML▼
http://htmldwarf.hanameiro.net/tools/FontSizeChange_sample.html

JSファイル▼
http://htmldwarf.hanameiro.net/tools/FontSizeChange.js

Cookieを利用して、選択した文字サイズは次回訪問時や同フォルダ内で同じスクリプトを設置したページにも適用します。
サンプルでは小=90%、中=100%、大=115%で、[小][中][大]のテキストリンク、選択中のサイズは赤、未選択のサイズは青という設定ですが、
・ボタンのタイプ(テキストor画像)
・テキストの表記と配色
・大中小それぞれに対応する文字サイズ
が選択できるようになっています。
あ、画像にする場合はボタンは自分で作ってください。(正式配布の際にはボタンも作って同梱したいですが)

設置方法は
1)JSファイルの設定を自分好みに調整する。
2)小説ファイル内の、ボタンを置きたい場所に <script type="text/javascript" src="FontiSizeChange.js"></script>
 と記入。
3)小説ファイルのbodyタグ内に onload="SizeChange();" と記入。
JSファイル内に設置方法の解説があるので、ローカル保存してテキストエディタで開いてみてください。
設置の際はサンプルのソースも参考にしてくださいね。


同じ機能を持つスクリプトがたくさん配布されているでしょうが、リクエストいただいちゃったので、出来心でつくってみました。中身は先日サイトで本公開したDesignChangerをちょろちょろアレンジしただけです。
【小説サイトを読みやすくしよう】というサイトさんで同様のものが以前配布されていた記憶があり、こちらを紹介しようとアクセスしてみたのですが、2006年に閉鎖なさっていたのですね。
遅くなりましたが、お疲れ様でした。
posted by 文月夕 at 00:30| Comment(9) | TrackBack(0) | 小説ツール開発 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
あ、画像にする場合はボタンは自分で作ってください。
とありますが、大中小をテキストの代わりに、画像に変更する方法を教えていただけますでしょうか?
Posted by monster at 2008年09月11日 17:36
>monsterさん

返信遅くなって失礼しました。
画像ボタンを使うには、FontSizeChange.jsの60行目を

ButtonType = 1;

と変更し、画像を6個用意してください。(小中大とその選択中バージョン)
画像ファイルの名づけルールは以下の通りです。

通常…small.gif、medium.gif、large.gif
選択中…small_on.gif、medium_on.gif、large_on.gif

画像は本文のHTMLファイル、JSファイルと同階層に置いてください。
Posted by 文月@管理人 at 2008年10月21日 00:44
大変使い勝手のいいスクリプトをありがとうございます。

この度、利用させていただいたのですが、
画像を使った場合、中のサイズのときに、オン表示されないようです。解決策はあるのでしょうか??
(つまり、中を選んでも、画像が切り替わらない)

お手数ですが、お知恵をお貸し頂けないでしょうか。
Posted by juny at 2008年11月06日 04:17
>juny様
画像ボタンタイプのサンプルをアップしました。
http://htmldwarf.hanameiro.net/tools/FontSizeChange_sample2.html
こちらでは中サイズでもオン表示になりますので、スクリプトの問題ではないようです。
画像指定が正しいかなど、今一度ご確認いただけますか?
#最初にアクセスしたとき(サイズを選ぶ前)は表示サイズは中であってもボタンの「中」はオンになりません。これはテキストリンクのタイプでも同様です。
Posted by 文月夕@管理人 at 2008年11月06日 19:57
文月夕@管理人様

検証ありがとうございます。
拝見させていただきました。

それで、こちらでもどうしてかいろいろと実験してみた結果、
どうやら、中のサイズの値を62.5と"点"が入っていることが原因みたいです。
これはどうにもならないものなのでしょうか?
もし解決策があれば、教えてください。

なんども厚かましいお願いをして申し訳ありません。
よろしくお願い致します。
Posted by juny at 2008年11月07日 11:16
>junyさん

FontSizeChange.jsの132行目

if (Cookie.match(/FontSize=(\d*)/)) {



if (Cookie.match(/FontSize=([\d.]*)/)) {

と書き換えてみてください。
近日中に修正版もアップいたしますが、取り急ぎ。
Posted by 文月夕@管理人 at 2008年11月09日 17:39
便利なスクリプトありがとうございます。
いただきました。
Posted by 武技 at 2009年07月31日 11:06
このようなスクリプト探していました。ありがとうございます。一点だけ要望がございます。

スタイルシートでフォントサイズをピクセル指定しても大きさを変えたいのですが、方法を教えていただけますでしょうか?

何卒宜しくお願い致します。
Posted by freejacker at 2010年02月03日 18:08
大変わかりやすいスクリプトで、javascriptが素人の自分でも設定が可能でした。

ひとつ要望なのですが、文字サイズを変更した場合、同時に行間を変更させるようできないでしょうか?

自分はフォントサイズ12px、行間18pxをデフォルトサイズにしていますが、
現状では小サイズ (10px)、大サイズ (15px) に変更しても行間は18pxで固定された状態です。

お時間のある時にでもご回答いただけると助かります。
よろしくお願いします。
Posted by Kohjiro at 2012年04月22日 15:24
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

PR

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。