ブログをダークモード化: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おすすめキャンペーン

Echoを買うと4カ月間音楽6500万曲無料で聴き放題【Amazon Music Unlimited】新規登録者限定:期間不明だが一定数に達すると終了と思われるので急げ!

Echoを買うと4カ月間音楽6500万曲無料で聴き放題【Amazon Music Unlimited】新規登録者限定(期間不明)

対象Echoは種類豊富。Alexa便利なので未体験の人には特に強力推し。一定数に達すると終了だと思われるので急げ!

5カ月目以降は月額Prime780円、非Prime980円。⇒Amazon Music Unlimitedで聴ける曲まとめ⇒欅坂46⇒クラシック⇒アニソン⇒ヤバイTシャツ屋さんなど

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

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

本1冊と変わらない月額でオールジャンル読み放題

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

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

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

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

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

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

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

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

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

今すぐチェック
【紙の本ポイント還元】Amazonで紙の本まとめて買うと最大15%ポイント還元(1/31まで)

【紙の本ポイント還元】Amazonで紙の本まとめて買うと最大15%ポイント還元(1/31まで)

Prime会員、Amazonカード利用、まとめ買いなど条件により還元率が変わる

紙の本をまとめ買いすると条件次第で最大15%ポイント還元。要クーポンコード入力。Primeスチューデントは3冊同時購入キャンペーンと併用可能。

今すぐチェック
【小説・文学】講談社の文芸単行本「準新刊」フェア(1/30まで)

💥💥【小説・文学】講談社の文芸単行本「準新刊」フェア(1/30まで)

新しめの本多数約150冊40%以上OFF

宝島、ハロー・ワールド、シンドローム、電気じかけのクジラは歌う、すぐ死ぬんだから、銀河鉄道の父、雑賀のいくさ姫、他

今すぐチェック
【SF・ミステリー小説】講談社 サスペンス大作『AI崩壊』 公開記念! SF・ファンタジーフェア(2/6まで)

💥💥【SF・ミステリー小説】講談社 サスペンス大作『AI崩壊』 公開記念! SF・ファンタジーフェア(2/6まで)

ファンタジー系人気作約100冊30%OFF

AI崩壊、バビロン、新世界より、獣の奏者、空の境界、NO.6、妖怪アパートの幽雅な日常、ルー=ガルー、講談社タイガ、他

今すぐチェック

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