ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録🦇ライオンメディア&WordPress

ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録🦇ライオンメディア&WordPress
ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録:ライオンメディア&Wordpress
たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

初チャージ時に1000ポイント、その後もチャージのたびに最大2.5%ポイントがもらえる

手数料なし。チャージした分は全額Amazonで現金同様利用可能。Amazonの買い物にはチャージを使わないと損!

今すぐチェック

最近ネットサービスでは目に優しく消費電力も抑えられるという理由で画面が黒基調で表示される『ダークモード(夜間モード)』が主流になりつつある。ツイッターやYouTubeなどでも採用されている。

消費電力については正直よくわからないが目が痛くなりにくいのは経験上間違いないので、ダークモードが利用可能なサービスでは僕は100%ダークモードを利用している。

システムでダークモードを選択するとChromeなどは設定画面、メニュー、タブなどが黒くなる。しかしダークモード対応サイトはまだそれほど多くないので、画面の中は大体真っ白でまぶしいからありがたみはまだ少ない。しねんたい(当ブログ)ではぜひともダークモードを採用したいと思いカスタマイズを実施。

今回実施したダークモード・カスタマイズ作業

僕がやりたかったのはWindows10やMacOSのシステムであらかじめダークモードが選択されている場合、自分のブログもブラウザで自動でダークモード表示されるという設定。

最初に書いておくがダークモード化カスタマイズには特に難しい作業はない。

Windows10の場合システムでダークモードを選ぶには設定⇒個人用設定⇒色⇒既定のアプリモードを選択から黒を選ぶ

ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録🦇ライオンメディア&WordPress

やることはCSSファイルにダークモード用の記述を追加するだけ。

CSS修正前にファイルのバックアップをお忘れなく!

当ブログで使用中のワードプレステーマであるライオンメディアの場合、style.cssとcontent.cssの一番最後にダークモード用の記述を追加する。

  • content.cssは個別記事内用CSSファイル
  • style.cssは個別記事以外のヘッダやサイドバーなどブログ全体用のCSSファイル
スポンサーリンク

ダークモード表示用のCSS記述

style.cssもcontent.cssも下記記述を一番下に追加して{}内にダークモード用に主に色を設定しなおすだけ。

具体的に言うと、各cssの上の方の通常モード(ライトモード)用の色関係の箇所をコピペしてダークモード用に色を変えればOK。背景、文字、ハイライト他。

@media (prefers-color-scheme: dark) {

/*——–ここに色関係の記述を書く——-*/

body {
color:#EEEEEE;
background:#121212;
}

}

ダークモード化した結果

Apple製品はOSのバージョンを13にアプデするとダークモードが選択できる。僕はApple製品はiPadしか持っていないがOSを13にアプデ後にダークモードを選択。ブログが無事ダークモード表示されることを確認した。Windows10でもChromeとFirefoxとvivaldiでダークモード表示されることを確認。

目に優しいのは間違いない。

ブログをダークモード化:OS設定で自動切換えするカスタマイズ備忘録🦇:ライオンメディア&WordPress

ダークモード化は大体望み通りに設定できたがヘッダや目次の背景色などプラグインやテーマが直接制御している色についてはダーク・ライト別々に設定するのは僕の技術力では難しそうなのであきらめた。特に気になった目次の背景色はライト・ダーク関わらず黒に設定した。

検索の文字入力欄も白いままだしもう少し修正したいが、大体満足しているのと時間がないのでしばらくは今の状態をキープしようと思う。

ダークモードは目が痛くなりにくいので強力推奨👍ブログ運営者はどしどしダークモード化しよう!🦇

スポンサーリンク

Amazonおすすめキャンペーン

【Newモデル】Fire HD 10 タブレット ブラック (10インチHDディスプレイ) 32GB[予約]

⚡【Newモデル】Fire HD 10 タブレット ブラック (10インチHDディスプレイ) 32GB[予約]

予約受付中:10/30発売:Kindle読書、動画、音楽他用途さまざま Amazon¥15,980

前世代機より30%早くサクサク。最大12時間の長稼働バッテリー。512GBまでのmicroSDカード(別売)に対応。USB-C接続で充電も簡単に。

今すぐチェック
月額たった980円で10万冊以上が読み放題になる【Kindle Unlimited】30日間の無料体験あり

月額たった980円で10万冊以上が読み放題になる【Kindle Unlimited】30日間の無料体験あり

本1冊と変わらない980円という月額でオールジャンル10万冊以上が読み放題

⇒Kindle Unlimitedで読み放題の本一覧、対象はマンガ・小説・ビジネス・実用書・雑誌など多数。万が一自分に合わなければいつでも退会可能。Kindle端末がなくてもスマホやPCの無料アプリで読めます。

今すぐチェック
たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

たった5000円のAmazonギフト券現金チャージで1,000ポイントもらえる!初チャージの人が対象

初チャージ時に1000ポイント、その後もチャージのたびに最大2.5%ポイントがもらえる

手数料なし。チャージした分は全額Amazonで現金同様利用可能。Amazonの買い物にはチャージを使わないと損!

今すぐチェック
新着Kindleセールおすすめ抽出一覧:角川ラノベ、ミステリー・サスペンス小説、11円~33円マンガが熱い

新着Kindleセールおすすめ抽出一覧:角川ラノベ、ミステリー・サスペンス小説、11円~33円マンガが熱い

11円~33円、大規模ラノベ・小説大体半額

ゲーマーズ!、デート・ア・ライブなどラノベ人気作複数巻、サスペンス・ホラー小説約450冊、SFからスポーツ・探偵まで11円&33円マンガ他

今すぐチェック
常に最新版【Kindleセール全部見やすいまとめ一覧】随時更新

常に最新版【Kindleセール全部見やすいまとめ一覧】随時更新

公式セールと非公式ゲリラセールまとめてチェックできます

このページで今週のKindleセール全部まとめてチェックできます。ラノベやマンガ多数。

今すぐチェック

ブログとネットカテゴリの最新記事