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

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

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

ダークモード追加しました(二回目)

サイト改善記録 #15

サイト

Lagon Journal

なにをどうしたか

ダークモード切り替えをメニューからできるようにしました。

具体的な変更 - html

右上にあるハンバーガーメニューからモード切り替えできるようにしました。

<div class="menu">
      <div>
         <ul>
            <li><a href="/about/me">ラゴンジュルナルとは</a></li>
            <li><a href="/blog">ブログ</a></li>
            <li><a href="/litterateurs">著者リスト</a></li>
            <li><a href="/faq/">よくある質問</a></li>
            <li><a rel=noreferrer href="https://twitter.com/LagonGlaner">ツイッター</a></li>
            <li><a rel=noreferrer
                     href="https://marshmallow-qa.com/lagonglaner?utm_medium=url_text&utm_source=promotion">マシュマロ</a>
            </li>
            <li><a rel=noreferrer href="/about/contact">コンタクト</a></li>
            <li><a href="/privacy-policy">プライバシーポリシー</a></li>
            <li><a><input id="dark-btn" type="checkbox">
                     <label class="dark-switch" for="dark-btn"></label></a></li>
         </ul>
      </div>
</div>

具体的な変更 - css

文言はJSで切り替えてもよかったのですが、CSSでもできそうだったので以下のようにしました。リストの一番下固定要員なので、「li:last-child」をつかっています。

.menu .dark-switch,
body.dark .menu .dark-switch{
   position: relative;
   display: inline;
   cursor: pointer;
   transition: color 0.4s ease;
   color: white;
   font-weight: bold;
   font-size: 60%;
   padding: 10px;
   border-radius: 12px;
   right: 0;
   bottom: 5px;
   font-size: 0;
}

.menu .dark-switch{
   background: #15202B;
   opacity: .6;
}

.cp_fullscreenmenu .menu > div > ul > li:last-child > a::before{
   content: 'ダークモード';
}

body.dark .menu .dark-switch{
      background: #c6d2d0;
      opacity: 1;
}

body.dark .cp_fullscreenmenu .menu > div > ul > li:last-child > a::before{
   content: 'ライトモード';
}

Written by Dev. Team
Copyright LagonGlaner and Author