【Cocoon、Wordpress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく
221 語
1 分
【Cocoon、Wordpress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく
はじまり

135ml
・・・このブログをダークテーマにも対応するようにしたいと思う。

リサちゃん
よろしくね
設定方法
1. headタグにmetaタグを追加する。
まず、以下のmetaタグをheadタグの中に追加する必要があります。
<meta name="color-scheme" content="light dark" />Cocoonでは、style.cssみたいにhtmlのエディターがあるわけではありませんが、metaタグを入れる際には、Cocoon設定の「アクセス解析・認証」タブ内で追加できます。「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。「ヘッダー用コード」じゃないから注意!

それで、追加した後はページのソースコードにこんな記述があればOK。

2. CSSを書く。
それで、次にCSSを書けば反映されます。テーマエディターで書くコードは以下の感じ。
@media(prefers-color-scheme: dark){ /* ダークテーマのときのスタイル */}@media(prefers-color-scheme: light){ /* ライトテーマのときのスタイル */}それを保存すれば終わりです。
おしまい

リサちゃん
設定方法は想像以上にかなり簡単だね。

135ml
僕のアバターもダーク基調に反転した方が良いだろうか?

リサちゃん
そうだねぇ、悪くないかもねえ

ペンギン
変えても悪くないぞ、殺風景モブメガネ。

135ml
うるせえ。お前の色反転させんぞ。

ペンギン
なぁあああああああああああああ!!!
記事を共有
この記事が役に立ったなら、ぜひ他の人と共有してください!
【Cocoon、Wordpress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく
https://endorphinbath.com/posts/cocoon-darklighttheme/ 関連記事 スマート
1
【WordPress】P5.jsをCocoon上で使用する
Software P5.jsをCocoon上で動かしてみます。SiteGuardに引っ掛からずに表示させるようにしています。
2
【PowerShell、HTML】画像の不要な部分を数値化して、その座標でトリミングする
Code HTMLとJavaScriptとPowerShellで画像を一気にトリミングする記事です。OutOfMemoryExceptionとExternalExceptionをWrite-Errorでやり過ごしたりします。
3
【Markdown、HTML】Visual Basicのコードブロックの中に"<TODAY()"を入れると、その周辺の行が表示されなくなる
Code MarkdownやHTMLの中にのコードブロックに"<TODAY()"を入れると、その周辺の行が表示されなくなることが発生しました。その原因は、あっけないものでしたが、ちゃんと事象を見ないと気づきにくいものでした。
4
【Googleスプレッドシート、GAS】選択した範囲をHTMLのtableタグとしてテキスト出力する
Code Googleスプレッドシートで編集したセルをそのままHTMLのtableタグとして出力するツールを作りました。HTMLの編集は面倒ですが、これを使えば編集はGoogle Spreadsheetで管理することが出来ます。
5
【Googleスプレッドシート、GAS】選択した範囲をHTMLのtableタグとして画面上に出力する
Code Googleスプレッドシートで編集したセルをそのままCSVやTSVとして出力するツールを作りました。この機能を導入することによって、データの受け渡しが楽になるかと思います。
ランダム記事 ランダム