2020/09/210件のコメントTweetPocketとてもお久しぶりです。2年と5ヶ月ぶりです。この度、このブログにデザインの変更を加えたので、どうせなら記事にしようと思いまして書いています。ダークテーマまずダークテーマとは?有名なところでは(と自分が思っているのは)iOS13から搭載された「ダークモード」機能ですね。これはユーザーインターフェースを全体的に黒を基調としたものへ変更する機能です。すると真っ暗な場所でも画面の光によってまぶしくならなくなります。有機ELディスプレイの場合、その動作原理から黒い画面の方が消費電力が少なく済みます。あとちょっと黒いとカッコイイ...WindowsやmacOSでも利用できますね。今の時代の流れに乗ったインターフェースと言えそうです。WordPressでもダークテーマって使えるの?と、言うことで流行に乗るためこのブログもダークテーマを使えるようにしようと思います。プラグインまず手始めにプラグインがあるか調べました。面倒くさいことはしたくないですからね。どこかしらの修正が必要であったり、一部不完全で完璧にデザインが切り替わらなかったり、と私の望むものはありませんでした。ダークモード」とかで検索するといろいろ出てくるので、気になる人は調べてみると良いと思います。テーマもしかしたらダークモードに対応したテーマとか探せばあるかもしれません。それでは選択の幅がかなり狭まってしまいますし、やはり自分の好きなテーマを使いたいですよね。子テーマを使うこのブログではもともとあるテーマを子テーマとしてカスタムして使用していました。dark)”を使用するとOSレベルで切り替えられると分かったので、今回は子テーマを使用して対応させようと決めました。style.cssを書き換えるさて、では子テーマを作成していきます。私もそんなに詳しくはないので、多少間違っているかもしれません。作業によって生じた損害について補償は出来かねるので、必ずバックアップを取るなど予防処置をお取りください。サーバーへのFTP等でのアクセスや、ファイルの書き換え、記述内容についての理解がある程度ある前提でお話ししています。作業用環境を作るこのサイトはさくらのレンタルサーバを使用して運用されています。その中で使える機能の一つに、バックアップ&ステージング環境というものがあります。簡単に言えば「ある時点でのバックアップ(スナップショット)を作成でき、そのデータに復元できる。そのデータを元にテスト環境を作成することもできる」感じの機能です。今回は、このステージング環境を利用してテーマのテストを行います。Modeなどのプラグインを利用してサイトを閲覧できない状態にするなどでしょうか。以後、ファイルへのアクセスなどは基本的にこのステージング環境へのアクセスとして記述します。別の環境を用意している方は適宜読み替えてください。子テーマを作成する準備すっごい昔に作ったテーマで何が何だか覚えていないので、これを機にテーマを作り直します。WordPress公式ハンドブックのChildThemeのページを見ながら作っていきましょう。フォルダーに「<親テーマ名>_child」でフォルダーを作成します。名前は何でもいいです。「child」を付けるのが慣例かな?style.cssを作成さっき作ったフォルダーの中に「style.css」という名前でファイルを作成します。親テーマのstyle.cssからファイル頭にあるコメントアウトのところをまるっとコピーし、次の箇所を書き換えます。他のテーマと重複しない一意の名前にします。親テーマが保存されているフォルダー名を入力します。nayulog.com*/ところどころ変えたら、保存します。同じフォルダーにfunctions.phpというファイル名でファイルを作成し、以下のように記入します。'/style.css');}テーマを適用するテーマをサイトに適用させます。Wordpress管理者ダッシュボードを開き、外観→テーマを開きます。作成した子テーマが表示されているはずですので、「有効化」を選んでテーマを適用させます。適用させたらブログページを開いてみて、きちんとページが表示されているか確認します。この時点でレイアウト崩れなどがある場合、必要なファイルが足りていないか、記述が間違っています。新しいスタイルを決めるさて、では先ほど作った子テーマのstyle.cssを開いてください。このファイルのコメントアウト部分より下に、新しいスタイルを記入していきます。色を決める自分のサイトで使いたい色の一覧をカラーパレットとして用意しましょう。CSSではカスタムプロパティ(変数)としていろいろ定義できるようなので、それを利用します。Theme、Twitter、YouTube、いろいろ参考にすると良いと思います。決めたら、下記のように変数名と一緒に記述しましょう。}}色を変えてみる試しに、@mediaの中で:rootの次に色を変えるコードを入力してみましょう。}どうでしょう、背景が黒くなっていますか?ダークモードに対応させるためにページ内の要素に対してこのようなことをどんどん指定していき、最終的に黒くさせるのが今回のやり方です。色が黒くならない!ページのキャッシュが残っているダークモードに対応しているブラウザではないOSの設定でダークモードが有効になっていない以上が考えられます。Chromeをお使いなら、F12キーを押してみてください。rendering」と入力します。prefers-color-scheme」を探し、ドロップダウンリストからlightもしくはdarkを選びます。これでダークモードと非ダークモードを切り替えることが出来ます。再読込でページのキャッシュを使わない同じくChromeであれば、F12開発者ツールを表示中にリロードボタンを長押しすることで表示されるメニューから「ハード再読み込み」を選ぶことで、サーバーから全データを強制的に読み込ませることが出来ます。要素を検証して書き換えるここからが一番面倒くさいです。F12開発者ツールを使用して、全ての要素を検証しながら、style.cssに変更したい内容を書いていきます。地道な作業になると思います。変更してはリロードして、内容を確認しながら、また変更して...テーマにより変える箇所も異なりますし、文字色と背景色との兼ね合いもあります。Highlightを使用しているのですが、それらのプラグインとの相性もあります。マジで半日は潰れます。あと、レスポンシブデザインなサイトの方はそれぞれの画面サイズでも確認しておくことをおすすめします。オリジナルコード私の環境で使用しているソースコードの全文です。}}見栄えを良くするどうでも良いですけどテーマ一覧のところ、今回作成した子テーマには画像が設定されておらず不格好なので、早速適用させたダークテーマの状態でスクショを撮り、それをテーマ用サムネイルとして設定しましょう。サイトのスクリーンショットを撮り、880×660ピクセルにリサイズします。その後、子テーマのフォルダーに「screenshot.png」として保存するだけでOK。本番環境にリリースするファイルをコピーするだけでもいいですし、ステージング環境の本番リリース機能を使用してもいいです。動作確認だけは忘れずに。あっちを変えればこっちがダメになる状態で、6時間はかかりましたね。style.cssをいじるだけで。憧れのダークモドですよ。これで夜布団に入りながらスマホみてて、真っ白なウェブサイトに「うわ眩しっ!」ってならなくて済むわけです。やる気のある方はどうぞやってみてください。今回の対応にあたり、下記のサイトを参考にさせていただきました。JI0VWLのFreakな日常それでは、今回はこの辺りで失礼します。コメントをキャンセルメールアドレスが公開されることはありません。※サイト上に表示された文字を入力してください。