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

ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録:ライオンメディア&WordPress
ブログをダークモード化:OS設定でダークとライトを自動切換えするカスタマイズ備忘録:ライオンメディア&Wordpress
ギフト券現金チャージで最大2.5%ポイントがもらえる⇒9万円チャージなら2.5%で2,250ポイント

ギフト券現金チャージで最大2.5%ポイントがもらえる⇒9万円チャージなら2.5%で2,250ポイント

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おすすめキャンペーン

たった199円で2カ月間200万冊以上が読み放題【Kindle Unlimited】Prime会員限定キャンペーン実施中

たった199円で2カ月間200万冊以上が読み放題【Kindle Unlimited】Prime会員限定キャンペーン実施中

必要なければいつでも解約OK

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

今すぐチェック
ギフト券現金チャージで最大2.5%ポイントがもらえる⇒9万円チャージなら2.5%で2,250ポイント

ギフト券現金チャージで最大2.5%ポイントがもらえる⇒9万円チャージなら2.5%で2,250ポイント

2.5%もらえるのはプライム会員のみ!

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

今すぐチェック
学生は入らないと損!タダ同然でいろいろ使い放題のPrimeスチューデント【無料体験期間6カ月】🎓

学生は入らないと損!タダ同然でいろいろ使い放題のPrimeスチューデント【無料体験期間6カ月】🎓

動画・音楽・写真保存・送料無料など特典多数

映画・アニメ・ドラマ大量見放題、音楽200万曲以上聴き放題、写真オリジナル画質で保存し放題、金額関係なく送料ほぼ全部無料、PCソフト割引、紙の本3冊同時購入で最大10%ポイント還元など常時利用可能

今すぐチェック
忙しい人必見!耳で聴く本Audibleなら運転中でも満員電車でも本が読める!30日間無料体験あり

忙しい人必見!耳で聴く本Audibleなら運転中でも満員電車でも本が読める!30日間無料体験あり

無料体験終了後は月額1500円だがいつでも解約OK

ラインナップは小説・ラノベ、ビジネス、教養、自分磨き、堀江貴文、実用書、英語・語学、などオールジャンル。プロの声優や俳優による朗読なので内容がスッと頭に入ってくる。

今すぐチェック

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