ページのフォントを変更できるブログパーツ作った
<!-- ▼ フォント切り替えブログパーツ：作り直し版 ▼ --><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><!-- Google Fonts 読み込み --><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>
[0回]
PR