【JavaScript】クリックしてサイトの文字サイズを大中小に切り替える

2025年11月10日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆さん、コーポレートサイトの要件を決めるとき、「文字サイズの変更機能はいりますか？」という言葉は聞いたことはありますか？
よく見ますよね、ヘッダーに「大中小」のボタンがあってクリックするとサイトのフォントサイズが可変するサイト。
コーダーとしては、正直大変なのでなるべく避けたい機能ですが、
今回は実装方法を紹介します。

サイトを公開したあとに、この大中小の機能を実装するのは地獄なので、
なるべく公開時に実装しておくようしたほうがいいですよ！

実装例

HTML例

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

今回は「js-cookie」というクッキー操作ライブラリを使用します。
上記をjsファイルの手前に記述してください。

<div class="font-buttons">
    <button id="js-small">小</button>
    <button id="js-medium">中</button>
    <button id="js-large">大</button>
</div>

CSS例

.font-buttons{
    display: flex;
}
.font-buttons button{
    margin: 0 5px 0 0;
}  
.font-small .blog-content .blog-title {
  font-size: 16px;
}
.font-small .blog-content .blog-time {
  font-size: 14px;
}
.font-small .blog-content .blog-tag li {
  font-size: 14px;
}
.font-small .blog-content h4 {
  font-size: 14px;
}
.font-small .blog-content p {
  font-size: 14px;
}
.font-medium .blog-content .blog-title {
  font-size: 24px;
}
.font-medium .blog-content .blog-time {
  font-size: 22px;
}
.font-medium .blog-content .blog-tag li {
  font-size: 22px;
}
.font-medium .blog-content h4 {
  font-size: 22px;
}
.font-medium .blog-content p {
  font-size: 22px;
}
.font-large .blog-content .blog-title {
  font-size: 32px;
}
.font-large .blog-content .blog-time {
  font-size: 30px;
}
.font-large .blog-content .blog-tag li {
  font-size: 30px;
}
.font-large .blog-content h4 {
  font-size: 30px;
}
.font-large .blog-content p {
  font-size: 30px;
}

CSSはご自身のサイトに合わせて調整してください。

JavaScript例

document.addEventListener('click', function(event) {
    const body = document.body;
    if (event.target.id === 'js-small') {
        body.classList.remove('font-medium', 'font-large');
        body.classList.add('font-small');
        Cookies.set('fontSize', 'small', { expires: 7, path: '/' });
    } else if (event.target.id === 'js-medium') {
        body.classList.remove('font-small', 'font-large');
        body.classList.add('font-medium');
        Cookies.set('fontSize', 'medium', { expires: 7, path: '/' });
    } else if (event.target.id === 'js-large') {
        body.classList.remove('font-small', 'font-medium');
        body.classList.add('font-large');
        Cookies.set('fontSize', 'large', { expires: 7, path: '/' });
    }
});
const savedFontSize = Cookies.get('fontSize');
if (savedFontSize) {
    const body = document.body;
    body.classList.remove('font-small', 'font-medium', 'font-large');
    body.classList.add(`font-${savedFontSize}`);
}