文字サイズ切り替え

読む人が本文の大きさを変えられるようにする、小さな部品です。
無料・改変自由・報告不要。ジャンルは問いません。

これは何か

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

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

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

まず見てみる sample.html をブラウザで開くと、実際の動きが見られます。フォルダのまま開けば、それだけで動きます。

入っているもの

fontsize.js: 本体。これをサイトに置きます。
sample.html: 動きを確認するための見本。中身を見ると、必要なものが2つだけだと分かります。
README.html: この文書です。
FOR_AI.md: AIに手伝ってもらうとき用。自分で読む必要はありません。

入れ方

1. ファイルを置く

fontsize.js を、サイトの一番上の階層に上げます。index.html と同じ場所です。

2. 読み込む

ボタンを出したいページの </head> のすぐ上に、この1行を書きます。

<script src="/fontsize.js"></script>

こうなります。

  <title>作品タイトル</title>
  <link rel="stylesheet" href="style.css">
  <script src="/fontsize.js"></script>
</head>

なぜ head に書くのか ページが表示される前に設定を反映させるためです。body の最後に書くと、開いた瞬間だけ元の大きさで見えてしまいます。

3. ボタンを置く

ボタンを出したい場所に、この1行を書きます。

<div class="fontsize-ui"></div>

中身は空のままで大丈夫です。ボタンは自動で入ります。メニューの横でも、本文の上でも、好きなところに置けます。

4. 対象を指定する

fontsize.js をテキストエディタで開きます。上のほうに、こう書いてある行があります。

var FONTSIZE_TARGET = '.text';

ここを、自分のサイトで本文を囲んでいるクラス名に書き換えます。

たとえば本文が <div class="honbun"> で囲まれているなら、こうします。

var FONTSIZE_TARGET = '.honbun';

これで終わりです。ページを開いて、ボタンを押してみてください。

クラス名が複数あるとき

ページによって本文の囲み方が違う場合があります。小説は .text、日記は .diary、というように。

その場合は、カンマで区切って並べます。

var FONTSIZE_TARGET = '.text, .diary';

いくつ増やしても構いません。

var FONTSIZE_TARGET = '.text, .diary, .novel-body, .honbun';

気をつけること クラス名の前の点（.）を忘れないでください。text ではなく .text です。
カンマは半角で、クラス名を囲むクォート（'）は全体で1組だけです。

クラス名が分からない場合は、自分の本文ページのHTMLを開いて、本文を囲んでいる <div class=" の後ろを見てください。そこに書いてある言葉がクラス名です。

大きさを変えたいとき

同じく fontsize.js の上のほうにあります。

var FONTSIZE_SMALL = 87.5;
var FONTSIZE_LARGE = 115;

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

FONTSIZE_SMALL を 80 にすると、「小」がもっと小さくなる
FONTSIZE_LARGE を 130 にすると、「大」がもっと大きくなる

ボタンに出る文字も変えられます。

var FONTSIZE_LABEL = 'Font Size';
var FONTSIZE_TEXT  = 'A';

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

うまくいかないとき

ボタンが出ない

<div class="fontsize-ui"></div> を書き忘れていないか
<script src="/fontsize.js"></script> を書き忘れていないか
fontsize.js をアップロードし忘れていないか
ファイルの置き場所と src の書き方が合っているか

ボタンは出るが、押しても文字が変わらない

FONTSIZE_TARGET のクラス名が、実際のHTMLと合っていない可能性が高いです。本文を囲んでいる <div class="○○"> の ○○ の部分を、もう一度確かめてください。

直したのに変わらない

ブラウザが古いファイルを覚えている場合があります。Ctrl＋Shift＋R（Macは Cmd＋Shift＋R）を押して、読み込み直してください。

ページ数が多いとき

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

そういうときは、フォルダごとAIに渡して「これを自分のサイトに入れたい」と伝えると、まとめて処理する方法を考えてくれます。FOR_AI.md という文書を同梱してあるので、それも一緒に見せてください。

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

知っておくとよいこと

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

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