当サイトには広告が含まれます
スポンサーリンク
WordPress

サイトの模様替え&ダークモード対応(Cocoonスキン「Simple-Darkmode」)

当サイトのスキンを変更してダークモードに対応した際の設定等に関する備忘録記事です。

スポンサーリンク
スポンサーリンク

ダークモード対応

ライトモード
ダークモード

WordPressテーマ『Cocoon』をスキンなしのままで使っていたのを、スキン『Simple-Darkmode』に切り替えた。

スキンなしCocoonのデフォルトデザインと大きな違いがなくシンプルなので、比較的移行し易い方だとは思うけど、それでも色々と調整が必要で手間取った。

Cocoonバージョン:2.7.1.2

CSSの読み込み先を変える

親テーマのSkinsディレクトリにある『Simple-Darkmode』スキンを、子テーマのSkinsディレクトリにコピーしてカスタマイズする場合、そのままだと親テーマの方のCSSを読み込んでしまうので設定を変更する必要がある。

『Simple-Darkmode』のディレクトリにあるfunction.php内の

get_template_directory()

get_stylesheet_directory()

に書き換える。

さらにもう一箇所。

get_template_directory_uri()

get_stylesheet_directory_uri()

に書き換える。

コントラストの調整

眩しくて見辛くならないようにライトモード、ダークモード双方の文字色と背景色のコントラストを調節した。

どの程度が良いのかは諸説あるようなのでコントラスト比は、ライトモードで「13.88:1」 、ダークモードで「12.27:1」にしてみた。

ライトモードは背景が眩しくないように、ダークーモードでは文字が眩しくないようにって感じで調節してみました。

最終的には自分の感覚(デバイス環境)に依るので難しいところです。

背景色スタイルが厄介

旧記事で一部のテキストにあてていた背景色や、Cocoonボックスなどに付けてた背景色を修正する必要があって面倒くさかった。

ライトモード
ダークモード

背景色を設定している部分のテキストが、ダークモード時にコントラストが低すぎて見えなくなるという厄介な現象。

旧エディター(クラシックエディター)やCocoonブロックのボックスなどに設定していた背景色を削除して対応した。

手動でひとつひとつ修正するのは無理なので、大部分はプラグイン『Search Regex』で一括処理した。

他にも調整が必要な箇所がありそうな予感!

その他の調節

wpDiscuz

プラグイン『wpDiscuz』のコメントフォームやスレッドを、『Simple-Darkmode』の色合いに似せて調節。

「管理画面→wpDiscuz→Settings→Styles and Colors」で、「Comment Form and Comment List Style」はDefaultに設定。

同設定画面「Custom CSS Code」にダークモード用のデザインをあてた。

Googleカスタム検索

サイト内検索用のGoogleカスタム検索(プログラム可能な検索エンジン)は、サービス側の「デザイン」設定で調節。

サイトのデザインはこだわり始めると泥沼にはまるので適当なところで妥協しました。

「シンプルに……」って思いつつも気になるところが出てきて、ちょくちょく手を入れているうちに収集がつかなくなって面倒なことになるんですよね😂

コメントの通知/購読設定
受け取る通知
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました