ブログ｜やっさんのブログ

ページのフォントを変更できるブログパーツ作った

<div id="font-switcher-container">

<button id="font-toggle-btn" type="button">フォント設定</button>

<div id="font-switcher" style="display: none;">

<label for="fontSelect">フォントを選択：</label>

<select id="fontSelect" name="fontSelect">

<option value="Noto Sans JP">Noto Sans JP（ゴシック体）</option>

<option value="Noto Serif JP">Noto Serif JP（明朝体）</option>

<option value="Kosugi Maru">Kosugi Maru（丸ゴシック）</option>

<option value="Kiwi Maru">Kiwi Maru（教科書体風）</option>

<option value="Yomogi">Yomogi（行書体風）</option>

<option value="Reggae One">Reggae One（勘亭流風）</option>

<option value="M PLUS 1p">M PLUS 1p（UD風ゴシック）</option>

<option value="Murecho">Murecho（UD風丸ゴ）</option>

<option value="Sawarabi Gothic">Sawarabi Gothic（UD風ゴシック）</option>

</select>

</div>

</div>



<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&family=Kosugi+Maru&family=Kiwi+Maru&family=Yomogi&family=Reggae+One&family=M+PLUS+1p&family=Murecho&family=Sawarabi+Gothic&display=swap" rel="stylesheet">

<style>

body {

font-family: 'Noto Sans JP', sans-serif;

transition: font-family 0.3s ease;

}

#font-toggle-btn {

position: fixed;

bottom: 20px;

right: 20px;

background-color: #333;

color: #fff;

border: none;

padding: 0.6em 1em;

border-radius: 8px;

cursor: pointer;

z-index: 9999;

}

#font-switcher {

position: fixed;

bottom: 70px;

right: 20px;

background-color: #fff;

border: 1px solid #ccc;

padding: 0.8em;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0,0,0,0.2);

z-index: 9999;

}

#font-switcher select {

width: 100%;

font-size: 1rem;

padding: 0.3em;

}

</style>

<script>

document.addEventListener('DOMContentLoaded', function () {

const toggleBtn = document.getElementById('font-toggle-btn');

const switcher = document.getElementById('font-switcher');

const fontSelect = document.getElementById('fontSelect');

// 保存されたフォントを読み込む

const savedFont = localStorage.getItem('selectedFont');

if (savedFont) {

document.body.style.fontFamily = `'${savedFont}', sans-serif`;

fontSelect.value = savedFont;

}

// ボタンでメニュー表示切り替え

toggleBtn.addEventListener('click', function () {

switcher.style.display = (switcher.style.display === 'none') ? 'block' : 'none';

});

// フォント変更＋保存

fontSelect.addEventListener('change', function () {

const selectedFont = fontSelect.value;

document.body.style.fontFamily = `'${selectedFont}', sans-serif`;

localStorage.setItem('selectedFont', selectedFont);

});

});

</script>