はじまり
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
・・・このブログをダークテーマにも対応するようにしたいと思う。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
急だねえ。けっこうめんどいんじゃないかい?
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
実はダークテーマに設定するための方法が予想以上に簡単だったので、後回しにせずもう実装してしまいたいと思うのだよ。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_012.png)
そうなのか。じゃあ、今回の記事はもちろんダークテーマとライトテーマの設定方法とまとめているんだよね?
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
煽るじゃん? うん、今回Cocoonで設定する方法を紹介します。方法は簡単なんだけど、配色を選定する作業で詰まりそうだよね。
色々なサイトを見るけど、その作業が悩ましいからダークテーマを採用しているサイトがあまり増えてないんだろうね。
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_010.png)
確かに配色って悩ましいよねえ。私のこの髪の色とか瞳の色とかどうするか悩ましかったよねえ。果たして、地毛なのか染めてるのかどうかとか・・・
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
あまりメタな話をするな・・・! 君みたいな二次元キャラの髪色が地毛なのかどうかなんて視聴者はあまり聞きたくないと思うぞ・・・
設定方法
1 headタグにmetaタグを追加する。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
まず、以下のmetaタグをheadタグの中に追加する必要があるのだよ。
<meta name="color-scheme" content="light dark" />
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_016.png)
異議あ~り! さっきメタな話をするなって言ったのに早速metaな話してる~!
裁判長!被告人は嘘をついています!
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
うるせえ!! おらっ!さっさと入れろっ!!
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_005.png)
でもさあ、Cocoonでmetaタグ入れるのってどうすればいいの?
style.cssみたいにhtmlのエディターがあるわけじゃないし。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
ふっふっふ・・・、実はそこも簡単で、Cocoon設定の「アクセス解析・認証」タブ内で追加できるんですわ。
「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。「ヘッダー用コード」じゃないから注意!
![](https://www.endorphinbath.com/wp-content/uploads/2021/10/20211111_01-1024x416.jpg)
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_006.png)
えー、これで保存するだけなんだ。アリの行列を崩すぐらい簡単なんだね。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
お前はなんちゅう遊びをしているんだ・・・アリたちが路頭に迷うぞ・・・。それで、追加した後はページのソースコードにこんな記述があればOK。
![](https://www.endorphinbath.com/wp-content/uploads/2021/10/20211111_02-1.jpg)
2 CSSを書く。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
それで、次にCSSを書けば反映されます。テーマエディターで書くコードは以下の感じ。
@media(prefers-color-scheme: dark){
/* ダークテーマのときのスタイル */
}
@media(prefers-color-scheme: light){
/* ライトテーマのときのスタイル */
}
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_004.png)
これで保存すれば終わりなんだ!
おしまい
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
設定方法は確かに、想像以上にかなり簡単だね。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
そうなんだけど、やはり色をどうしようかだよね。広告も加味したデザインにしなきゃだから、悩ましい・・・あと、僕のアイコンも白基調で良いのだろうか?
![リサちゃん](https://www.endorphinbath.com/wp-content/uploads/2021/10/02_nayutarisa_001-1.png)
そうだねえ。おじさんは、この雑な感じのアイコンが特徴だから、ダークテーマで洗練された感じのアイコンになっちゃうとキャラブレるねえ。
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
む・・・確かにそうなんだが、文字にされるとなんか引っかかるものがあるな・・・
![ペンギン](https://www.endorphinbath.com/wp-content/uploads/2021/10/03_penguinbeer135ml_001-1.jpg)
そうだそうだ! 雑な感じを貫け! 殺風景モブメガネ!
![135ml](https://www.endorphinbath.com/wp-content/uploads/2021/10/01_kinkinbeer135ml_001-2.jpg)
うるせえ。お前の色反転させんぞ。
![ペンギン](https://www.endorphinbath.com/wp-content/uploads/2021/10/03_penguinbeer135ml_004-1.jpg)
なぁあああああああああああああ!!!
以上になります!
コメント