ブログ運営

ブログをダークモード化する方法| Webサイト/ナイトモード/Word Press/JIN

ブログ ダークモード 方法 Webサイト ナイトモード Word Press JIN

数年前から注目されているダークモードですが、実装しているところは意外とまだ少ないですよね

私自身ダークモードの画面が好きで、できるものは基本的にダークモード化してます

Word Press 管理画面 ダークモード
Word Pressの管理画面をダークモードにする2つの方法【プラグイン】Word Pressの管理画面って白くて眩しいですよね。この記事ではWord Pressの管理画面をダークモードにする方法として Chromeの拡張機能『Stylusと Word Pressのプラグイン『Dark Mode』の2つを紹介しています。AmazonやInstagramなどダークモード機能がないものでもダークモード化できので、ぜひ使ってみてください。...

Chromeの拡張機能である『Stylus』を使えば、ほとんどのサイトはダークモード化できますが、反映されるのは自分が見るときだけです

ブロガーとして、『ブログを見にきてくれた全員にダークモードを体験してもらいたい』と思ったので、ブログのダークモード化にチャレンジすることにしました

ダークモード化自体は難しくないので誰でも実現可能だと思います

今回はWord PresのJINというテーマを使ってダークモードにする方法を紹介していますが、内容を変更すれば他のテーマでも実現可能です

ブログをダークモード化するメリット

ダークモード メリット

YoutubeやTwitterで導入されているだけあって、ブログのダークモード化にも様々なメリットがあります

  1. 目が疲れにくい
  2. 暗い場所でも見えやすい
  3. 消費電力を抑えられる(有機ELディスプレイの場合)
  4. 他のブログとの差別化ができる

目が疲れにくいことや、暗い場所で見えやすいというのは有名ですが、『消費電力が抑えられることは知らなかった』という人も多いのではないでしょうか?

ねごろ
ねごろ
今のスマホは有機ELディスプレイが多いので、バッテリーの減りが抑えられるのは嬉しい

差別化という点ではダークモード化の方法を共有するのはデメリットかもしれませんが、私自身ダークモードが好きなので、どのサイトでもダークモードを実装して欲しいという思いで共有することにしました

ダークモードが実装できたときにTwitterで報告ツイートを頂けたら嬉しいです

ダークモード化するときの注意点

ダークモード 注意点

ダークモード化というよりはカスタマイズにおける注意点ですが、カスタマイズに使用しているコードはあくまで私の環境で正常に動作しているものなので、不具合などが起きた場合も自己責任でお願いいたします

とくにCSSファイルの内容については、人によってかなり変わると思います

『〜の部分の色が変わらない』といった問題についても、基本的にはご自身でお調べになって解決をお願いします

自分で調べたくないという方は、カスタマイズをあきらめるか、『ココナラ』などでお願いしましょう

ブログをダークモード化する方法

ダークモード ナイトモード 使い方

①Simple Custom CSS and JSをインストールする

今回ダークモードに使うファイルはHTML、CSS、JSの3つで

  1. カスタムHTMLで作成する
  2. 追加CSSにコードを貼り付ける
  3. JSファイルをアップロードしてphpで読み込む

このような方法もいいのですが、JSファイルを編集のたびにアップロードし直す必要があったり、追加CSSだと管理が面倒だったりします

なので今回はJSやCSSのファイルをまとめて管理できるWord Pressプラグイン『Simple Custom CSS and JS』を使用した方法を紹介します(HTMLに関してはカスタムHTMLで作成します)

Word Pressのプラグイン新規追加を開いて、『Simple Custom CSS and JS』と検索して、インストール&有効化してください

こんなアイコンのやつです▼

Simple Custom CSS & JS

有効化すると、Word Pressの左側のメニュー『Custom CSS & JS』という項目が表示されるので、ここに今回使うJSファイルとCSSファイルを作成していきます

②JavaScript(JS)ファイルを作成する

javascript

通常モードとダークモードを切り替えるためのプログラムをJSで記述します

Word PressのCustom CSS & JSAdd Custom JSを開くと、JSファイルを作成する画面に映ります

Simple Custom CSS & JS 作成画面

作成するときにやることは3つです

  1. タイトルを決める
  2. コードを入力する
  3. オプションを変更する

①タイトルを決める

タイトルについては、自分でわかりやすいものをつけてください(後からでも変更可能)

記事編集画面と同じように、タイトル下にパーマリンクを編集できる部分がありますが、ここでのみJSファイルやCSSを管理するなら特につけなくていいと思います

本文に最初から記入されているコードは説明のようなものなので全て削除しておきます

②コードを入力する

私が使用しているコードはこちらです▼(Copyボタンでコピーできます)

/*
Copyright (c) 2019 Ivan Grozdic(@IvanGrozdic)
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/
(function($) { "use strict";

    $(".switch").on('click', function () {
        if ($("body").hasClass("dark")) {
            $("body").removeClass("dark");
            $(".sp-menu-box").removeClass("dark");
            $(".switch").removeClass("switched");
        }
        else {
            $("body").addClass("dark");
            $(".sp-menu-box").addClass("dark");
            $(".switch").addClass("switched");
        }
    });

})(jQuery); 

 

コードの説明

darkとswitchedはダークモードと通常モードを区別するために追加されるクラスです

もし画面のスイッチが押されたときにbodyにdarkクラスがあればdarkswitchedのクラスを削除する→通常モードに切り替え

逆に画面のスイッチが押されたときにbodyにdarkクラスがなければdarkswitchedのクラスを追加する→ダークモードに切り替え

というプログラムです

.sp-menu-boxというクラスについてはbodyにdarkクラスを付与しても、ダークモード化できなかった要素です

JIN特有のクラスだと思うので、他のテーマの場合は不要もしくは別のクラスが必要になるかもしれませんので、状況に合わせて変更してください

③オプションを変更する

編集画面の右側にOptionsという項目があるので、こちらを画像のようにチェックを変更します▼

ダークモード Options js

変更したら公開ボタンを押してJSファイルの作成が完了します

Word PressのCustom Css & JSを開くと作成したファイルを管理できる画面を開くことができます

③CSSファイルを作成する

css

ダークモードを切り替わったときのデザインをCSSで記述します

Word PressのCustom CSS & JSAdd Custom CSSを開くと、JSファイルを作成する画面に映りますので、JSファイルを作った時と同じ手順で作成していきます

  1. タイトルを決める
  2. コードを入力する
  3. オプションを変更する

①タイトルを決める

JSファイルでつけたタイトルと同じタイトルにするか、関連したタイトルにしておくとあとで管理しやすくなります

②コードを入力する

私が使用しているコードも一応載せますが、CSSに関してはあまり得意ではなく、セレクタの指定もあまり自信はありませんので、CSSに詳しい方はアレンジしてください

こちらがCSSのコードです▼(Copyボタンでコピーできます)

/*
Copyright (c) 2019 Ivan Grozdic(@IvanGrozdic)
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/
/*背景黒・文字色白*/
/*スマホコンテンツ全体*/
.dark #scroll-content,
.dark .cps-post-box,
/*PCコンテンツ全体*/
.dark #main-contents,
/*ウィジェット*/
.dark .widget,
.dark .widgettitle,
/*記事一覧*/
.dark .post-list-link,
/*内部リンクのブログカード*/
.dark .blog-card-title{
	color: #d3d3d3;
	background: #15202B;
}

/*背景半透明の黒・文字色白*/
/*ハンバーガーメニュー*/
.sp-menu-box.dark{
	color: #d3d3d3;
	background: rgba(31, 32, 41,.8);
}

/*背景ブルーグレー・文字色白*/
/*未選択カテゴリータブ*/
.dark .tabBtn-mag label{
	color: #d3d3d3;
	background: #3e4052;
}

/*文字色白(強制)*/
/*記事一覧のタイトル*/
.dark .post-list-title,
/*パンくずリスト*/
.dark #breadcrumb ul li,
.dark #breadcrumb ul a,
/*タグ*/
.dark .tag-box a,
/*内部リンクカードの説明*/
.dark .blog-card-excerpt{
	color: #d3d3d3 !important;
}

/*文字色青(強制)*/
/*リンクテキスト*/
.dark a{
	color:#1A94E0;
}

/*背景黒*/
/*JINコンセプトボックスのタイトル背景*/
.dark div[class^="concept-box"]::before,
/*背景色なしの表ヘッダー*/
.dark .cps-post-main table.cps-table03 th {
	background: #15202B;
}

/*背景グレー(強制)*/
/*吹き出し*/
.dark .balloon-content,
/*引用文*/
.dark .wp-block-quote,
.dark blockquote,
/*JINアイコンボックス*/
.dark .jin-iconbox,
/*JINシンプルボックス*/
.dark .simple-box6{
	background: #333 !important;
}

/*吹き出しの角*/
.dark .balloon-left.balloon-bg-blue .balloon-serif:before{
	border-color: transparent #333 transparent transparent;
}

/*文字色濃いピンク*/
/*JINマーカー1*/
.dark .marker{
	background: linear-gradient(transparent 80%,#9c1184 0%);
}

/*文字色濃い水色*/
/*JINマーカー2*/
.dark .marker2{
	background: linear-gradient(transparent 80%,#35868f 0%);    
}

/*ダークモード切り替えボタン*/
.switch,
.circle {
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; /*全体を一定の速度で移動する*/
}

/*棒の部分*/
.switch {
	width: 80px;
	height: 4px;
	border-radius: 27px; 
	background-image: linear-gradient(298deg, #00008b, #e0ffff); /*グラデーション*/
	position: fixed; 
	left: 25px; /*右からの位置*/
	bottom: 35px; /*下からの位置*/
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: .8; /*透明度80%*/
	z-index: 33333;
	transition: all 300ms linear;  /*全体を一定の速度で移動する*/
}

/*ボタン部分*/
.circle {
	cursor: pointer; 
	position: absolute; 
	top: 50%; /*位置の開始地点を中央に移動*/
	transform: translateY(-50%); 
	left: -5px; /*左からの位置*/
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff; /*ノーマルモードボタンの背景色*/
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	animation: border-transform 10s linear infinite alternate forwards; 
}

.circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.circle:before {
	position: absolute; 
	font-family: 'Font Awesome 5 Free';
	content: '\f185'; /*ノーマルボタンのアイコン*/
	top: 0; /*上からの位置*/
	left: 0; /*左からの位置*/
	z-index: 2;
	font-size: 20px; /*文字サイズ*/
	line-height: 43px; /*行の高さ*/
	text-align: center; 
	width: 100%;
	height: 40px;
	opacity: 1; /*不透明*/
	color: #696969; /*文字色*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.circle:after {
	position: absolute;
	font-family: 'Font Awesome 5 Free';
	content: '\f186'; /*ダークモードのアイコン*/
	top: 0; /*上からの位置*/
	left: 0; /*左からの位置*/
	z-index: 2;
	font-size: 20px; /*文字サイズ*/
	line-height: 43px; /*行の高さ*/
	text-align: center; 
	width: 100%;
	height: 40px;
	color: #c0c0c0; /*文字色*/
	opacity: 0;  /*透明*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.switched {
}

.switched .circle {
	left: 45px; /*切り替え時の左からの位置*/
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #15202B; /*ダークモードボタンの背景色*/
}

.switched .circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.switched .circle:before {
	opacity: 0;
}

.switched .circle:after {
	opacity: 1; 
}

 

コードの説明

シンプルにdarkというクラスを持ったときの色を決めているだけです

コードが長くなっている理由は、bodyの背景色や文字色を変更しただけでは反映されない要素があったからです

カスタマイズしはじめたときは、デベロッパーツールの使い方をあまり理解できていなかったので、希望の箇所をダークモード化するのにかなり苦戦しました

JINの大部分についてはこのコードで、ダークモード化できると思いますが、もしダークモード化できていない場所があった場合は、デベロッパーツールで色を指定しているidclassを見つけて追加してください

スイッチボタンに関してですが、もっと違うデザインにしたい場合はネットで公開されている切り替えボタンに対してswitch、switchedクラスをそれぞれ用意すれば使えると思います

JIN以外の方については、おそらくコピペではダークモード化はできないと思います

ですが、やり方としては全く同じで、大元に近い部分(JINでいうとscroll-contentクラスなど)をダークモード化しても反映されない要素については、デベロッパーツールで色を指定しているidやclassを見つけて追加していけばいいだけなので、あきらめずにチャレンジしてみてください

デベロッパーツールは他にもできることがたくさんあるので、学んでおくとブログ運営にもかなり役立つと思います

Chrome Developer Tools 入門(技術の泉シリーズ)インプレスR&D三省堂書店オンデマンド
created by Rinker
¥1,980
(2019/11/19 04:32:29時点 楽天市場調べ-詳細)
Chrome 拡張機能なし ページ全体 スクリーンショット 取る方法
【Chrome】拡張機能なしでページ全体のスクリーンショットを取る方法Google Chromeのデベローパーツールという機能を使うことで拡張機能なしでページ全体のスクリーンショットを取ることができます。 表示中の画面、範囲選択、HTML要素を選択してスクリーンショットを取ることも可能です。拡張機能はなるべくを数を減らした方がスムーズにブラウジングできますのでぜひお試しください。...

③オプションを変更する

JSファイルのときと同じように編集画面の右側にOptionsという項目があるので、こちらを画像のようにチェックを変更します▼

ダークモード Options css

変更したら公開ボタンを押してCSSファイルの作成が完了します

こちらもWord PressのCustom Css & JSを開くと作成したファイルを管理できる画面を開くことができます

④HTMLファイルを作成する

html

ダークモードを切り替えるためのスイッチボタンの表示をHTMLで記述します

Custom Css & JSでスイッチボタンのHTMLファイルを作成しても良いのですが、数行で終わるのでわざわざここに書かなくてもいいかなと思い、ウィジェット(カスタムHTML)として追加しました

ダークモード カスタムHTML 追加

Word Pressの外観ウィジェットを開き、カスタムHTMLをフッターに追加して、下記のコードを貼り付けます▼(Copyボタンでコピーできます)

<div class="switch">
<div class="circle">
</div>
</div>

これで、スイッチボタンが画面上に表示されるはずです

固定ページなどにHTMLを貼り付ければ、そのページだけでボタンをお試し表示することもできます

おわりに

ちなみ今回のダークモード化する方法はCode Penにあったものをカスタマイズして自分のブログに反映させています

実際にブログをダークモード化するのは苦労しましたが、達成感もあるのでぜひチャレンジしてみてください

私もカスタマイズ初心者ですが、簡単な質問ならお答えできますのでよろしければTwitterフォローよろしくお願いします(@negoro_writer)

 

合わせて読みたい