F-lightにはモードスイッチが採用されており、読者が見やすいように読者自身でライトモードとダークモードを切り替えることができるようになっています。
|
|
最先端のブログって感じがしてオシャレですよね。
ですが、ブログの雰囲気を重視したい等の理由でモード切り替えが不要という場合もあるかと思います。
本記事ではF-lightのモードスイッチの切り替えボタンを削除する方法を解説します！
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
モードスイッチ切り替えボタン削除方法
HTML編集でモードスイッチを検索します。
表示された <!-- モードスイッチ: https://qiita.com/whike_chan/items/3fff6d0c78fa74253d4d -->の下の行から<!-- ページリスト -->の上の行までを削除してください。
また使うかもしれない場合など、不安な時は<!-- コメントアウト -->でコードを無効にしてみてください。
<!-- モードスイッチ: https://qiita.com/whike_chan/items/3fff6d0c78fa74253d4d -->
<!-- <div id='mode-switch'>
<input id='js_mode_toggle' type='checkbox'/>
<label class='switch-mode' for='js_mode_toggle' id='js_rotate'>
<span id='switch-mode-dark' title='ダークモードに切り替える'><svg aria-label='ダークモード' class='feather feather-moon' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg></span>
<span id='switch-mode-light' title='ライトモードに切り替える'><svg aria-label='ライトモード' class='feather feather-sun' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></span>
</label>
</div>
<script>/*<![CDATA[*/
const checkToggle=document.getElementById("js_mode_toggle"),rotateIcon=document.getElementById("js_rotate"),isLight=window.matchMedia("(prefers-color-scheme:light)").matches,keyLocalStorage="modekey",localTheme=localStorage.getItem("modekey"),twTheme=document.getElementById("twth");let nowRotate=0;function changeMode(e){"light"===e?(document.documentElement.setAttribute("data-theme-mode","light"),twTheme.setAttribute("content","light"),checkToggle.checked=!0):"dark"===e&&(document.documentElement.setAttribute("data-theme-mode","dark"),twTheme.setAttribute("content","dark"),checkToggle.checked=!1)}function rotateInfinite(){nowRotate+=180,rotateIcon.style.transform="rotate("+nowRotate+"deg)"}"light"===localTheme?(rotateInfinite(),changeMode("light")):"dark"===localTheme?changeMode("dark"):isLight&&(rotateInfinite(),changeMode("light")),checkToggle.addEventListener("change",function(e){rotateInfinite(),e.target.checked?(changeMode("light"),localStorage.setItem("modekey","light")):(changeMode("dark"),localStorage.setItem("modekey","dark"))})
/*]]>*/</script> -->
<!-- ページリスト -->
これでモードスイッチの切り替えボタンを削除することができます。
ブログの雰囲気に合わせたカスタマイズ！
自分の場合はNo Rebound LifeというブログにF-lightを採用しているのですが、お料理のレシピにダークモードは合わなかったため今回の方法でモードスイッチを削除しています。
せっかく搭載されている機能を無効にしてしまうのは勿体ない気もしますが、自分好みのカスタマイズをしていきましょう！
