Font Size

読む人が本文の文字の大きさを変えられるようにする、小さな部品です。
JavaScriptのファイルを1つ置いて、2行書き足すだけで動きます。
無料・改変自由・報告不要です。

これは何か

本文の横に「小・中・大」のボタンが出ます。
押すと本文だけが大きくなったり小さくなったりします。見出しやメニューの大きさは変わりません。

一度選ぶと、その設定はブラウザが覚えています。
別のページに移っても、次の日にまた来ても、同じ大きさのままです。

長い小説を置いているサイトだと、読む人が自分の目に合わせて調整できるので、少し親切になります。

このページの上、Workshopの右にも同じものが出ています。押すとこの文章の大きさが変わります。

入っているもの

解凍したら、まず sample.html をブラウザで開いてみてください。
フォルダのまま開けば、それだけで動きます。中身を見ると、必要なものが2つだけだと分かります。

使い方

細かい調整

同じく fontsize.js の上のほうで変えられます。

大きさ

100 が元の大きさです。数字を変えると変化の幅が変わります。

ボタンの文字

FONTSIZE_LABEL を '文字サイズ' にすれば日本語になります。
'' と空にすれば、見出しが消えてボタンだけになります。

本文のクラスが複数ある時

ページによって囲み方が違う場合は、カンマで区切って並べます。

いくつ増やしても構いません。クラス名の前の点（.）を忘れないでください。

ページ数が多い時

作品が何十ページもあると、1枚ずつ書き足すのは大変です。

そういう時は、解凍したフォルダごとAIに渡して「これを自分のサイトに入れたい」と伝えてください。
まとめて処理する方法を考えてくれます。
私の場合はターミナルで一括処理を行いました。ターミナル何それ美味しいの？という場合でも、「何て書いたらいいか分からないのでコピペできるようにしてコードください」と頼めば大抵OK。
FOR_AI.md という文書を同梱してあるので、それも一緒に見せると話が早いです。

注意：予め、サイトのフォルダを丸ごとコピーしてバックアップを取っておいてください。まとめて書き換える作業は、失敗すると戻すのが大変です。

知っておくとよいこと

設定は、読む人のブラウザの中だけに保存されます。
サーバーには何も送られませんし、記録も残りません。ブラウザの履歴を消すと設定も消えて、元の大きさに戻ります。

本文の幅を em で指定していると、文字を大きくし時に幅も一緒に広がります。
幅を変えたくない場合は rem にすると固定されます。どちらが読みやすいかは好みなので、両方試してみてください。

入っていないもの

以下は入れていません。必要な方はご自身で追加してください。

・行間の変更
・フォントの切り替え
・背景色の切り替え
・ボタンの位置を決めるCSS

ボタンの位置は、サイトによって置きたい場所が違うので、こちらでは決めていません。
自分のCSSで指定してください。何も指定しなければ、書いた場所にそのまま出ます。

利用について

・個人・非商用の範囲で自由にお使いください。
・改変自由です。原型をとどめなくても構いません。
・使用報告、クレジット表記、リンクはいずれも不要です。
・部品そのものの再配布・販売はご遠慮ください。
・これを使ったことで生じた不具合について、責任は負いかねます。

ジャンルは問いません。二次創作でも一次創作でも、創作以外のサイトでも構いません。
が、違法サイトは禁じます。

更新履歴

260824　公開

---

分からないところや、うまく動かないところがあれば、お知らせいただければ、可能な範囲で直します。
htmlはテンプレを触って壊して唸ってる内になんとなく動くものです。
困ったら世間一般のAIにファイルを投げたら多分、叱らずに何とかしてくれるでしょう。