『ラゴン・ジュルナル』に来てくださってありがとうございます!

「JavascriptをOn」にしていない端末やブラウザで閲覧しているかたに、このアラートが表示されるようになっております。Javascriptを許可してからおたのしみくださいませ。

Chrome「設定」→「詳細設定」→「プライバシーとセキュリティー」→「サイトの設定」→「Javascript」を許可 iPhone「設定」→「Safari」→「セキュリティ」→「Javascript」をオン iPad「設定」→「Safari」→「詳細」→「Javascript」をオン Android「メニュー」→「設定」→「高度な設定」→「Javascriptを有効」など

フォントのスイッチもつくりました。(スイッチ専用のページもつくりました)

サイト改善記録 #19

サイト

Lagon Journal

なにをどうしたか

フォントのスイッチもつくりました。(スイッチ専用のページもつくりました)

いまは明朝とゴシックの切り替え、ダークとライトの切り替えしかありませんが、今後増やしていく予定です。

具体的な変更 - content

content > switcher > _index.md

上記のディレクトリー構造をつくりました。

---
title: "モードセレクト"
date: 2020-01-01
eyecatch: "images/dev/switcher.jpg"
description: "【テスト段階】フォントやダークモードなどのモードを選べるページです。"
draft: false
image: "Siora Photography"
noindex:
---

具体的な変更 - html

themes > layouts > switcher > list.html

具体的な変更 - css

ちょっとラベルっぽくしてみました。明朝は青、ゴシックはオレンジ。

<style>
    .dark-switch,
    .gothic-switch {
        display: block;
        position: static;
        width: 50%;
        height: 50px;
        border-radius: 3px;
        margin: 55px auto 0;
    }

    #gothic-btn {
        position: absolute;
        opacity: 0;
        -webkit-appearance: none;
        appearance: none;
    }

    .gothic-switch {
        background: #ccc;
        background-color: rgba(68, 122, 177, 0.715);
        opacity: .8;
    }

    body.gothic .gothic-switch {
        background: rgba(227, 153, 153, 0.646);
    }

    .switcher-container {
        display: block;
        width: 100%;
        margin: 40px auto;
    }
</style>

具体的な変更 - js

jsはダークモードの流用です。

static > js > gothic.js

const gothicbtn = document.querySelector("#gothic-btn");

if (Cookies.get("gothic_mode") == "gothic") {
   document.body.classList.add("gothic");
   gothicbtn.checked = true;
}

gothicbtn.addEventListener("change", () => {
   if (gothicbtn.checked == true) {
      Cookies.set("gothic_mode", "gothic", { expires: 7 });
      document.body.classList.remove("mincho");
      document.body.classList.add("gothic");

   } else {
      Cookies.remove("gothic_mode");
      document.body.classList.remove("gothic");
      document.body.classList.add("mincho");
   }
});

Written by Dev. Team
Copyright LagonGlaner and Author