はてなブログに目の負担を軽くする『ナイトモード』を実装する方法！

「Twitter」や「YouTube」などで見る夜間（ナイト）モードを当ブログにも実装してみました。

今回は「はてなブログにナイトモード」を実装する方法をご紹介していきます。

ナイトモードとは？

ナイトモードの例

ナイトモードは目の負担を軽くする効果があるといわれております。僕なんかは夜になると強い光がぼける「網膜色素変性症」で基本的に昼も夜もナイトモードやダークテーマで結構重宝しています。

実装方法

jQueryの「toggleClass」メソッドを使えば簡単に実装できます。

サンプル

タッチしてみてください。

ナイトモード

「toggleClass」はこのようにボタンをタッチしたら要素を追加してもう一回タッチしたら追加した要素を消すということができます。これを使えばナイトモードを簡単に実装することができます。

<div id="buttsdsf" class="syokibt">
<p class="nightp">ナイトモード</p>
</div>

<script>
$("#buttsdsf").click(function(){
$(this).toggleClass("clicked");
$('html').toggleClass("clicked");
$('body').toggleClass("clicked");
});
</script>

<style>

<style>

#buttsdsf.syokibt {
    background: #e5e6e6;
    padding: 15px;
    color: #4b545d;
}

.nightp{
    margin: 0;
}

#buttsdsf.syokibt {
background: url(ここにナイトモード前のスイッチ画像);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

#buttsdsf.clicked{
background: url(ここにナイトモード後のスイッチ画像);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

</style>

この場合タッチされたらhtmlとbody、#buttsdsfに「clicked」というclassを追加しています。
あとはテーマに合わせて色を変えていけば実装完了です。

css例

css

html.clicked {
    background: #10171e;
}

body.page-index.enable-bottom-editarea.page-archive.globalheader-off.clicked {
    background: #10171e;
    color: #f7f8f9;
}

.clicked a.entry-title-link {
    color: #1B95E0;
}

基本的に「.clicked a.entry-title-link 」のように色を変える要素のclassの前に「.clicked」を選択します。

以上で『ナイトモード』の実装カスタマイズのご紹介を終了します。
後日、テーマ「Primeiro」での『ナイトモード』の実装カスタマイズコピペ記事を書きますのでお楽しみに！