文字サイズ変更ボタン（小・大）を使う。（2023/08/04）

※ご自身のヘッダーを調整するだけの、ある程度のhtmlやcssの知識が必要です。予めご了承下さい。

小さな端末からだと以下のサンプル画像が見えづらいかもしれませんが、ヘッダー右上に絶対配置で文字サイズボタンを設置する方法のご案内です。
デフォルトは「小」になっていますが「大」にする方法も直接js内で説明しています。
この設定が入っているテンプレートは、tp_yakuba1なので動作状況などを見てみたい場合は参考にして下さい。

まず、ボタンのhtmlを追加します

header内に以下のタグを追加して下さい。
<!--文字サイズ変更ボタン--> <div id="f-size"> <p>文字サイズ</p> <ul> <li id="f-small"></li> <li id="f-large"></li> </ul> </div>

次に、ボタンのcssを追加します

※予め、親となるブロック（このマニュアルでいえばheader要素）に、
position: relative;
の１行を追加しておいて下さい。

次に、以下のcssを追加します。
/*文字サイズの設定 ---------------------------------------------------------------------------*/ /*「大」ボタンを押した時の文字サイズ*/ body.f-large { font-size: 24px; } /*「小」ボタンを押した時の文字サイズ*/ body.f-small { font-size: 16px; } /*文字サイズ変更ボタン ---------------------------------------------------------------------------*/ /*ボタンブロック全体*/ #f-size { background: #fff; /*背景色*/ box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/ border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/ display: flex; /*flexボックスを使う指定*/ align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ padding: 10px 15px; /*ブロック内の余白。上下、左右へ。*/ position: absolute; /*headerに対して絶対配置する*/ right: 0px; /*右からの配置場所*/ top: 0px; /*上からの配置場所*/ } /*「文字サイズ」のテキスト*/ #f-size p { margin: 0; margin-right: 10px; /*右側に空けるスペース。ボタンとの間にとるスペースです。*/ font-size: 0.85rem; /*文字サイズ*/ } /*「小」「大」を囲むブロック*/ #f-size ul { list-style: none;margin: 0;padding: 0; display: flex; /*flexボックスを使う指定*/ align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/ } /*「小」ボタン設定*/ #f-size ul li#f-small::before { display: block; content: "小"; /*「小」の文字を出力*/ font-size: 16px; /*文字サイズ*/ width: 40px; /*幅*/ line-height: 40px; /*高さ*/ text-align: center; /*内容をセンタリング*/ background: #eee; /*背景色*/ } #f-size ul li#f-small { margin-right: 5px; /*右側に空けるスペース。「大」との間の隙間です。*/ } /*「大」ボタン設定*/ #f-size ul li#f-large::before { display: block; content: "大"; /*「大」の文字を出力*/ font-size: 30px; /*文字サイズ*/ width: 50px; /*幅*/ line-height: 50px; /*高さ*/ text-align: center; /*内容をセンタリング*/ background: #eee; /*背景色*/ } /*選択中の設定*/ #f-size li#f-large.current::before, #f-size li#f-small.current::before { background: #ff4242; /*背景色*/ color: #fff; /*文字色*/ } /*マウスオン時にリンクテキストと同じような手のマークが出るように*/ #f-size li { cursor: pointer; }

最後に、fontSizeChanger.jsをダウンロードします

fontSizeChanger.jsのダウンロード（通常タイプ）

ダウンロード後、zipファイルを解凍し、お手元のjsフォルダなどに入れて下さい。
また、html側にjsファイルを読み込むタグも追加します。以下は、jsフォルダ内にfontSizeChanger.jsを入れた場合の例です。
<script src="js/fontSizeChanger.js"></script>

設定は、以上になります。
動作確認をして下さい。

補足（サイト全体に適用したい場合）

上記のjsファイルだと、ページごとにリセットされます。
サイト全体（※１時間でリセットされます）に適用したい場合は、以下をお読み下さい。
（補足。現在は、ブラウザを閉じるまでセッションに保存したタイプのテンプレートを公開しています。）

※導入前の注意点

• ある特定のブラウザ設定やセキュリティソフトによっては、サイト全体に適用できない場合もあります。
• スクリプト自体は、要望をChatGPTに取り入れてもらって生成したものです。プログラムに関する質問などは受け付けておりませんので、予めご了承下さい。

fontSizeChanger.jsのダウンロード（タイプ2）

通常タイプと同じように、お手元のjsフォルダに移動して下さい。

ブラウザのデータ（キャッシュ、クッキー、ローカルストレージ等）を削除しない限り、１時間文字サイズが保存され続けます。
動作確認をしたい場合はテスト作業中の間だけ、fontSizeChanger.js内の
60 * 60 * 1000
を、１分（↓）にしておくと作業しやすいです。
60 * 1000

文字サイズを変更後、１分以上放置して、ブラウザを再読み込みすると、デフォルトに戻ったか確認できます。