文字サイズを変更する「大」「中」「小」ボタンの作り方

実現したいこと

・文字サイズを変更する「大」「中」「小」ボタンを作り、
サイト全体（ヘッダー・ボディ・フッターすべての文字）を対象に指定サイズに連動させたい
・デフォルトは中サイズ
・選択中のボタンは配色

前提

・Wordpressのテーマ「ZOOMY」を使用。
以下いくつか記事やChatGPTを使用して試してみましたが、できませんでした。

発生している問題・エラーメッセージ

以下箇所の文字が、ボタンクリックに連動してサイズ変更されない
・固定ページにて作成したタイトル名、本文
・フッター
・テーマのデフォルト機能の一部文字

該当のソースコード

HTML
1<div class="font-size-control">
2　<button id="font-large">大</button>
3　<button id="font-medium">中</button>
4　<button id="font-small">小</button>
5</div>

CSS（style.cssに記載）
1.active {
2  background-color: lightgray;
3}

Javascript（function.phpに記載）
1function custom_scripts() {
2?>
3  <script>
4    jQuery(document).ready(function($) {
5      $("#font-small").click(function() {
6        $("body").css("font-size", "20px");
7		  $(this).addClass("active");
8		   $("#font-medium, #font-large").removeClass("active");
9      });
10      $("#font-medium").click(function() {
11        $("body").css("font-size", "26px");
12		  $(this).addClass("active");
13		    $("#font-small, #font-large").removeClass("active");
14      });
15      $("#font-large").click(function() {
16        $("body").css("font-size", "32px");
17		  $(this).addClass("active");
18		    $("#font-small, #font-medium").removeClass("active");
19      });
20    });
21  </script>
22<?php
23}
24add_action( 'wp_footer', 'custom_scripts' );
25

試したこと

■パターンＡ
上記Javascriptコード内の"body"を、body内のID名（l-header, l-main, l-footer）に変更

■パターンＢ
①jQuery Text Resizer、jQuery Cookieをテーマフォルダにコピー
②header.phpに以下コード埋め込み

PHP
1<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.cookie.js"></script>
2<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.textresizer.js"></script>
3<script type="text/javascript">
4jQuery(document).ready( function() {
5    jQuery( "#textsize a" ).textresizer({
6        target: "#content",
7        // type:   "fontSize",
8        sizes:  [ "20px", "16px", "12px" ]
9    });
10});
11</script>

　③指定箇所に以下HTMLを埋め込み

HTML
1<div id="textsize">
2<a href="#">大</a>　
3<a href="#">中</a>　
4<a href="#">小</a>
5</div>

補足情報（FW/ツールのバージョンなど）

現在のWordpressバージョン: 6.1.1

行動規範の内容に同意します

回答1件

ラジオボタンでよいかと

css
1<style>
2[name="font-size"]{
3display:none;
4}
5#fs1:checked ~ .button[for=fs1],
6#fs2:checked ~ .button[for=fs2],
7#fs3:checked ~ .button[for=fs3]
8{
9border:inset;
10background-Color:gray;
11}
12.button{
13 background-Color:lightgray;
14display:inline-block;
15text-align:center;
16position:flex;
17border:outset;
18width:50px;
19}
20#fs1:checked ~ .container {
21  font-size:1.6em;
22}
23#fs2:checked ~ .container 
24{
25  font-size:1em;
26}
27#fs3:checked ~ .container 
28{
29font-size:0.7em;
30}
31</style>
32<body>
33<input type="radio" name="font-size" value="large" id="fs1"><label for="fs1" class="button">大</label>
34<input type="radio" name="font-size" value="medium" id="fs2" checked><label for="fs2" class="button">中</label>
35<input type="radio" name="font-size" value="small" id="fs3"><label for="fs3" class="button">小</label>
36<div class="container">
37test
38<span>test</span>
39<div>test</div>
40<p>test</p>
41test
42</div>

投稿2023/02/06 10:46

yambejp

総合スコア114773

M-H

2023/02/06 11:43

yambejp様、早速のご回答いただきありがとうございます。頂いたコードを埋め込み、頂いたテキストの”test”箇所は、大中小とクリックに応じて連動したのですが、投稿・固定ページの本文はサイズが変わりません。。。該当するidまたはclassを指定する必要があると思うのですが、どの箇所を指定すればいいでしょうか。。何度も申し訳ございませんが、HTMLコードが必要でしたらお伝えしますので、お分かりでしたらご教示頂けますと幸いです。。