とてもお久しぶりです。2年と5ヶ月ぶりです。
この度、このブログにデザインの変更を加えたので、どうせなら記事にしようと思いまして書いています。
ダークテーマ
まずダークテーマとは？
有名なところでは(と自分が思っているのは)iOS13から搭載された「ダークモード」機能ですね。これはユーザーインターフェースを全体的に黒を基調としたものへ変更する機能です。そうすると真っ暗な場所でも画面の光によってまぶしくならなくなります。また、有機ELディスプレイの場合、その動作原理から黒い画面の方が消費電力が少なく済みます。あとちょっと黒いとカッコイイ…
WindowsやmacOSでも利用できますね。今の時代の流れに乗ったインターフェースと言えそうです。
WordPressでもダークテーマって使えるの？
と、言うことで流行に乗るためこのブログもダークテーマを使えるようにしようと思います。
プラグイン
まず手始めにプラグインがあるか調べました。面倒くさいことはしたくないですからね。
しかし、そう簡単に自分の思ったとおりに動作するプラグインはないみたいです… どこかしらの修正が必要であったり、一部不完全で完璧にデザインが切り替わらなかったり、と私の望むものはありませんでした。「Wordpress ダークモード」とかで検索するといろいろ出てくるので、気になる人は調べてみると良いと思います。
テーマ
もしかしたらダークモードに対応したテーマとか探せばあるかもしれません。しかし、それでは選択の幅がかなり狭まってしまいますし、やはり自分の好きなテーマを使いたいですよね。
子テーマを使う
このブログではもともとあるテーマを子テーマとしてカスタムして使用していました。また、調べていたところにCSSのメディアクエリ“@media (prefers-color-scheme: dark)”を使用するとOSレベルで切り替えられると分かったので、今回は子テーマを使用して対応させようと決めました。
style.cssを書き換える
さて、では子テーマを作成していきます。私もそんなに詳しくはないので、多少間違っているかもしれません。作業によって生じた損害について補償は出来かねるので、必ずバックアップを取るなど予防処置をお取りください。
また、サーバーへのFTP等でのアクセスや、ファイルの書き換え、記述内容についての理解がある程度ある前提でお話ししています。
作業用環境を作る
このサイトはさくらのレンタルサーバを使用して運用されています。その中で使える機能の一つに、バックアップ&ステージング環境というものがあります。簡単に言えば「ある時点でのバックアップ（スナップショット）を作成でき、そのデータに復元できる。また、そのデータを元にテスト環境を作成することもできる」感じの機能です。
今回は、このステージング環境を利用してテーマのテストを行います。他のサーバーを利用している方は、例えば
1. 別のディレクトリにWordpressをインストールする
2. WSLやRaspberry PiなどにWordpressをインストールする
3. WP Maintenance Modeなどのプラグインを利用してサイトを閲覧できない状態にする
などでしょうか。2. はApache ServerやMySQLなど敷居が高すぎると思うので、1. か 3. が現実的だと思います。
以後、ファイルへのアクセスなどは基本的にこのステージング環境へのアクセスとして記述します。別の環境を用意している方は適宜読み替えてください。
子テーマを作成する準備
すっごい昔に作ったテーマで何が何だか覚えていないので、これを機にテーマを作り直します。WordPress公式ハンドブックのChildThemeのページを見ながら作っていきましょう。
フォルダー作成
/wp-content/themes/ フォルダーに「<親テーマ名>_child」でフォルダーを作成します。名前は何でもいいです。「child」を付けるのが慣例かな？
style.cssを作成
さっき作ったフォルダーの中に「style.css」という名前でファイルを作成します。そして、親テーマのstyle.cssからファイル頭にあるコメントアウトのところをまるっとコピーし、次の箇所を書き換えます。
- Theme Name … 他のテーマと重複しない一意の名前にします。
- Template … 親テーマが保存されているフォルダー名を入力します。
/*
Theme Name: Iconic One Child
Theme URI: https://themonic.com/iconic-one/
Template: iconic-one
Author: Nayu
Author URI: https://nayulog.com
Description: This is Iconic One child theme. (Original theme created by Themonic https://themonic.com)
Version: 2.1.7
Requires at least: 4.7
Requires PHP: 5.2.4
Tested up to: 5.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-menu, custom-logo, full-width-template, rtl-language-support, theme-options, custom-colors, flexible-header, translation-ready, news, e-commerce, sticky-post, featured-images, threaded-comments
Text Domain: iconic-one
©2019 Shashank Singh, Themonic.com
©2020 Nayu, nayulog.com
*/
ところどころ変えたら、保存します。
functions.phpを作成
同じフォルダーにfunctions.phpというファイル名でファイルを作成し、以下のように記入します。
<?php
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
テーマを適用する
テーマをサイトに適用させます。Wordpress管理者ダッシュボードを開き、外観→テーマを開きます。多分作成した子テーマが表示されているはずですので、「有効化」を選んでテーマを適用させます。
適用させたらブログページを開いてみて、きちんとページが表示されているか確認します。この時点でレイアウト崩れなどがある場合、必要なファイルが足りていないか、記述が間違っています。
新しいスタイルを決める
さて、では先ほど作った子テーマのstyle.cssを開いてください。このファイルのコメントアウト部分より下に、新しいスタイルを記入していきます。
色を決める
自分のサイトで使いたい色の一覧をカラーパレットとして用意しましょう。CSSではカスタムプロパティ（変数）としていろいろ定義できるようなので、それを利用します。カラーパレット生成サイトや、Apple Human Interface Guidelines、Material Design Dark Theme、Twitter、YouTube、いろいろ参考にすると良いと思います。決めたら、下記のように変数名と一緒に記述しましょう。
@media (prefers-color-scheme: dark) {
:root {
--deep-black-color: #000000;
--middle-black-color: #1C1C1E;
--pale-black-color: #292929;
--white-color: #FFFFFF;
--gray-color: #8D8D93;
}
}
色を変えてみる
試しに、@mediaの中で:rootの次に色を変えるコードを入力してみましょう。
body {
background-color: var(--deep-black-color);
}
どうでしょう、背景が黒くなっていますか？
ダークモードに対応させるためにページ内の要素に対してこのようなことをどんどん指定していき、最終的に黒くさせるのが今回のやり方です。
色が黒くならない！
- ページのキャッシュが残っている
- ダークモードに対応しているブラウザではない
- OSの設定でダークモードが有効になっていない
以上が考えられます。
ダークモードを切り替える
もしGoogle Chromeをお使いなら、F12キーを押してみてください。いろいろ表示されますので、Ctrl+Shift+Pを同時押しし、「>show rendering」と入力します。
表示されたパネルで「Emulate CSS media feature prefers-color-scheme」を探し、ドロップダウンリストからlightもしくはdarkを選びます。
これでダークモードと非ダークモードを切り替えることが出来ます。
再読込でページのキャッシュを使わない
同じくChromeであれば、F12開発者ツールを表示中にリロードボタンを長押しすることで表示されるメニューから「ハード再読み込み」を選ぶことで、サーバーから全データを強制的に読み込ませることが出来ます。
要素を検証して書き換える
ここからが一番面倒くさいです。F12開発者ツールを使用して、全ての要素を検証しながら、style.cssに変更したい内容を書いていきます。地道な作業になると思います。変更してはリロードして、内容を確認しながら、また変更して…
テーマにより変える箇所も異なりますし、文字色と背景色との兼ね合いもあります。このブログではSyntax Highlightを使用しているのですが、それらのプラグインとの相性もあります。頑張ってください。マジで半日は潰れます。
あと、レスポンシブデザインなサイトの方はそれぞれの画面サイズでも確認しておくことをおすすめします。
オリジナルコード
私の環境で使用しているソースコードの全文です。悪用しないでね。
functions.php
<?php
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
style.css
/*
Theme Name: Iconic One Child
Theme URI: https://themonic.com/iconic-one/
Template: iconic-one
Author: Nayu
Author URI: https://nayulog.com
Description: This is Iconic One child theme. (Original theme created by Themonic https://themonic.com)
Version: 2.1.7
Requires at least: 4.7
Requires PHP: 5.2.4
Tested up to: 5.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-menu, custom-logo, full-width-template, rtl-language-support, theme-options, custom-colors, flexible-header, translation-ready, news, e-commerce, sticky-post, featured-images, threaded-comments
Text Domain: iconic-one
©2019 Shashank Singh, Themonic.com
©2020 Nayu, nayulog.com
*/
:root {
--main-blue: #0099ff;
}
@media (prefers-color-scheme: dark) {
:root {
--main-blue: #0a84ff;
}
}
h1 {
margin: 0 0 1.5em;
padding: 0.5em;
font-weight: bold;
border: 2px solid var(--main-blue);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
h2 {
margin: 0 0 1.5em;
padding: 0.7em;
border: 2px solid var(--main-blue);
font-size: 1.3em;
font-weight: bold;
border-radius: 10px;
}
h3 {
border-left: 6px solid var(--main-blue);
background: linear-gradient(transparent 70%, var(--main-blue) 85%);
padding: 0.5em 0.7em 0em 0.7em;
}
h4 {
position: relative;
padding: 0.25em 1.5em 0.25em 0.5em;
}
h4:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, var(--main-blue), transparent);
background: linear-gradient(to right, var(--main-blue), transparent);
}
h5 {
padding: 0.5em;
padding-right: 2em;
display: inline-block;
line-height: 1.3;
border: 3px solid var(--main-blue);
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
}
h5:before {
content: '●';
color: var(--main-blue);
margin-right: 8px;
}
h6 {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding: 0.4em 0.5em;
}
/*--------------------------------------
ダークモード
--------------------------------------*/
@media (prefers-color-scheme: dark) {
:root {
--deep-black-color: #000000;
--middle-black-color: #1c1c1e;
--pale-black-color: #292929;
--white-color: #ffffff;
--gray-color: #8d8d93;
}
.io-title-description a {
color: var(--white-color);
}
.themonic-nav ul.nav-menu,
.themonic-nav div.nav-menu>ul {
border-top: 1px solid var(--gray-color);
background-color: var(--pale-black-color);
}
.themonic-nav li a {
color: var(--gray-color);
}
.site-content {
border-right: 1px solid var(--gray-color);
}
@media screen and (max-width: 768px) {
.site-content {
border: none !important;
}
}
.site-content nav {
border-top: 1px solid var(--gray-color);
border-bottom: 1px solid var(--gray-color);
border-left: 1px solid var(--gray-color);
border-right: 1px solid var(--gray-color);
background: var(--pale-black-color);
color: var(--white-color);
}
.site-header {
border-top: 1px solid var(--gray-color);
border-bottom: 1px solid var(--gray-color);
border-left: 1px solid var(--gray-color);
border-right: 1px solid var(--gray-color);
}
.wrapper {
border: 1px solid var(--gray-color);
}
@media screen and (max-width: 768px) {
.wrapper {
border: none !important;
}
}
body {
background-color: var(--deep-black-color);
color: var(--white-color);
}
#main {
background-color: var(--middle-black-color);
}
#page {
background-color: var(--middle-black-color);
}
.navigation {
background-color: var(--pale-black-color);
color: var(--white-color);
}
.widget-title {
background-color: var(--pale-black-color) !important;
color: var(--white-color);
}
.widget-area .widget a {
color: var(--white-color);
}
.entry-header .entry-title a {
color: var(--white-color);
}
.widget-area .widget li,
.widget-area .widget .textwidget {
border-bottom: 1px solid var(--gray-color);
}
.widget-area #s {
color: var(--gray-color);
}
.entry-meta>span a {
color: var(--white-color);
}
.below-title-meta {
background-color: var(--pale-black-color);
color: var(--white-color);
}
.below-title-meta a {
color: var(--gray-color);
}
.nav-previous a,
.nav-next>a {
color: var(--white-color) !important;
}
footer {
background-color: var(--pale-black-color) !important;
border-top: 1px solid var(--gray-color) !important;
border-bottom: 1px solid var(--gray-color) !important;
}
footer.entry-meta {
color: var(--gray-color);
}
.entry-content blockquote,
.comment-content blockquote {
background-color: var(--pale-black-color);
border-left: 4px solid var(--gray-color);
border-right: 4px solid var(--gray-color);
}
.entry-content td,
.comment-content td {
border: 1px solid var(--gray-color);
}
.entry-content table,
.comment-content table {
color: var(--white-color);
}
.entry-content th,
.comment-content th {
background-color: var(--gray-color);
color: var(--deep-black-color);
}
del {
color: var(--white-color);
}
#toc_container p.toc_title {
color: var(--deep-black-color);
}
.entry-content pre,
.comment-content pre {
color: var(--white-color);
}
a:hover {
color: var(--white-color) !important;
}
:hover .enlighter-t-enlighter .enlighter-text {
color: var(--deep-black-color) !important;
}
.enlighter-t-enlighter {
background: var(--white-color) !important;
}
}
見栄えを良くする
どうでも良いですけどテーマ一覧のところ、今回作成した子テーマには画像が設定されておらず不格好なので、早速適用させたダークテーマの状態でスクショを撮り、それをテーマ用サムネイルとして設定しましょう。
サイトのスクリーンショットを撮り、880×660ピクセルにリサイズします。その後、子テーマのフォルダーに「screenshot.png」として保存するだけでOK。
本番環境にリリースする
ファイルをコピーするだけでもいいですし、ステージング環境の本番リリース機能を使用してもいいです。ただし、動作確認だけは忘れずに。リリースしてから気付いても遅いですよ… （何敗したか数えきれず）
終わりに
いやぁ… 結構大変でした。あっちを変えればこっちがダメになる状態で、6時間はかかりましたね。style.cssをいじるだけで。でも満足感すごいです。憧れのダークモドですよ。これで夜布団に入りながらスマホみてて、真っ白なウェブサイトに「うわ眩しっ！」ってならなくて済むわけです。やる気のある方はどうぞやってみてください。
今回の対応にあたり、下記のサイトを参考にさせていただきました。
WordPress にダークモードを実装 2通りのやり方【SANGO】 – たびくも | tabikumo.com
WordPress Webサイトをダークモードに対応する | JI0VWLのFreakな日常
それでは、今回はこの辺りで失礼します。