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

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

ギフト券現金チャージで最大2.5%ポイントがもらえる

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円で3カ月間200万冊以上本読み放題【Kindle Unlimited】Prime会員限定キャンペーン実施中

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

必要ないと思えばいつでも解約OK

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

今すぐチェック
ギフト券現金チャージで最大2.5%ポイントがもらえる

ギフト券現金チャージで最大2.5%ポイントがもらえる

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

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

今すぐチェック
忙しい人必見!耳で聴く本Audibleなら運転中でも満員電車でも本が読める!今だけ2カ月間無料(4/7まで)

忙しい人必見!耳で聴く本Audibleなら運転中でも満員電車でも本が読める!今だけ2カ月間無料(4/7まで)

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

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

今すぐチェック
進撃の巨人(31) (週刊少年マガジンコミックス)[Kindle版][新刊予約]

💥💥進撃の巨人(31) (週刊少年マガジンコミックス)[Kindle版][新刊予約]⚡

諫山創 (著)
予約受付中:4/9(木)発売 Kindle¥462

巨人がすべてを支配する世界。巨人の餌と化した人類は、巨大な壁を築き、壁外への自由と引き換えに侵略を防いでいた。だが、名ばかりの平和は壁を越える大巨人の出現により崩れ、絶望の闘いが始まってしまう。「地鳴らし」を発動させるべく、ついに兵団に刃を向けた「イェーガー派」。彼らはザックレー総統を殺害し、兵団の要人を拘束。ジークのもとへ向かう。一方ジークを見張るリヴァイは、死闘の末に再びジークを捕らえる。そこで明かされるジークの真の計画とは……。

今すぐチェック
鬼滅の刃 20 : ジャンプコミックス[書籍版][新刊予約]

💥💥鬼滅の刃 20 : ジャンプコミックス[書籍版][新刊予約]📚

吾峠呼世晴 (著)
予約受付中:5/1(金)発売:品切れ前に予約しよう! 書籍版¥484

書籍版は売り切れて入手困難となる可能性が高いので早めの予約がおすすめ!

今すぐチェック[書籍版]

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