ダークモード対応しました。(β版)詳細はこちら。

シンプルなダークモード対応Cocoonスキン(Simple-Darkmode)を作りました

Simple-Darkmode_image ブログ
hiro(管理人)
hiro(管理人)

アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね…

と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)
しかも最新のWordpress純正テーマはダークモードに対応した見たいです。
だったらせめて自分のサイトぐらいはダークモードに対応していて欲しいなぁと思いまして、全くの初心者ですがCSSを駆使して何とかCocoonのダークモード対応スキンを作成しました。

どれぐらい需要があるかわかりませんが、少し不具合を修正して公開させて頂きました。
もし自分以外にも「ダークモードに対応させたい!」とお考えの方がいた時に簡単にお手伝い出来ればいいなと思っております。

もし不具合を発見された方は、お手数ですがこの記事のコメント欄にてお知らせ下さい。出来る限り早く対処させて頂きますが、上で述べた通り私はプログラミングを始めて本格的にやったような初心者です。他のスキン作成者の方々の様にすぐに修正出来ない事をご了承下さい。

スキンご利用にあたって

このスキンでは、キーカラーの設定が必要です。キーカラーとテキストカラーを指定して下さい。

確認している不具合

  • 現時点で無し

もし不具合を発見された方がいらっしゃいましたら、大変申し訳お手数ですがぜひ当記事コメント欄かお問い合わせフォームよりご連絡下さい。

このスキンのプログラムについて

WordPressやCocoonのソースコードはGPLライセンスとして公開されており、また後述しますが、このスキンはSILKというスキンを作成されたろこさんが公開されているソースコードを利用しています。

WordPressを使用しているため同梱するスキンライセンスもGPLになります(本来CSS、JSまではGPLにする必要はないのですが、Cocoonは100%GPLにしたく思います)。

Cocoon公式サイト(https://wp-cocoon.com/skin-make/

したがって、このスキンもGPLライセンスとさせて頂きます。

改変及びソースコードの使用に問題はありませんが、それによって作成されたプログラムはGPLライセンスとする必要があり、またその他制約が付きます。ご利用の方はご自身でGPLライセンスをしっかりとご確認下さい。

FAQ

Q
ダークスキン(ダークエンジなど)とは何が異なりますか?
A

ダークモードに対応しており、ユーザー(サイト訪問者)の設定次第で、ライトモード(一般的なCocoonのデザイン)とダークモード(他のダークスキンなどと同じデザイン)を切り替える事が出来ます。

サイトをダーク(暗色・黒系)系のデザインにする為のものではありません。

Q
ダークモード切り替えボタンはありますか?
A

切り替えボタンは有りません。

「あくまでもユーザーが見やすい様に。」を開発のメインコンセプトにしたため、徐々に普及したスマホアプリのダークモード対応と同じ設定だけで使える様に設計しました。
”切り替えボタン”というのは日本のサイトではまだ普及しておらず、また日常的に使うスマホアプリにも存在しないため、取り払っております。

Q
どうやって使いますか?
A

スキンを子テーマにダウンロード後、Cocoon設定画面よりスキンを有効化して下さい。その後全体タブの”サイトキーカラー”と、”サイトキーテキストカラー”に色を入力して下さい。その他の設定は不要です。

Q
どの端末で動作しますか?
A

iOS・Android・Mac OS・Windowsでは動作確認しております。

なお、Internet Explorerではダークモードは動作しない様に、一部のブラウザでは正常に動作しない可能性があります。

Q
その他制限等はありますか?
A

wordpressでの執筆・編集時はライトモードで作業を行って下さい。編集画面をダークモードで利用すると一部が黒くなり正常に編集できません。(吹き出しや引用ブロックなど)

ダウンロードはこちら

※あくまでもベータ版であるので、利用は自己責任でお願いします。

ご自身で小テーマのテーマフォルダーに入れて頂くと、使用する事が出来ます。
ただ現状まだ不具合が出る可能性があるので、テスト環境等での利用をお勧めします。

最新バージョン 1.4.2

変更点

  • ウィジェットの余白のサイズを変更
  • 検索ボックスの色変更
  • スキン制御の追加
  • FAQのデザイン変更

このスキンの特徴

このスキンは大きく2つの特徴があります。

ダークモード対応

スキン名に入っている通り、ダークモードに対応したスキンです。(おそらくCocoonでは初)
今までWordpressサイトをダークモードに対応させるには

  1. 対応したテーマの使用
  2. 専用CSSの作成
  3. プラグイン(JavaScript?)

の3択ほどしかなく、とてもハードルが高いものでした。実際僕もプラグインによるダークモードを試したものの、上手く動作しませんでした。

しかもプラグインは動作がどんどん重くなってしまうというデメリットもあります。なので出来る限りプラグインには依存したくありません。

幸いな事に、Cocoonには全てのCSSを作らなくても良い、「スキン」という機能があります。その為「作ってしまえ!」みたいな軽いノリで作成を始めました。

どんな仕組み?

簡単に説明させて頂くと、ユーザーのOSの設定状態を読み込んで、それに合わせてダークモードとライトモードを切り替えています。(iosのダークモードやWindowsの規定のアプリモードなど)

その為他のサイトでたまに見られる「ダークモード切り替えボタン」等は一切有りません。ユーザーが変更したいと思った場合はOSの設定を切り替えて頂く必要があります。

ダークモードに対応させる上で大切なのは、「ユーザーが意図せずにダークモードになる事」であるとも考えています。
その為、ダークモードは見にくいとならない様に気を付けたつもりです。

また、簡単に色を変更する事が出来ます。

先ほど設定に応じて色変更を行っていると言いましたが、実は詳しく書くとCSSの変数を利用しています。この変数をユーザーの設定に合わせて変更しているという事ですね。

そしてその色は頭にまとめて指定しているので、頭の変数の部分の色を自由に変更して頂ければ細かな調整も可能です。ただ予想している部分と異なる要素の色が変更されてしまう可能性があるので、変更される場合は慎重に調整して下さい。

もちろん100%GNU GPLですからご自由に改造して頂いて結構です。

キーカラー対応

このテーマではCocoonのSILKというスキンを作成されているろこさんが提唱されている「スキンをキーカラーでの制御」に対応しています。

多くのCocoonスキンには色違いが用意されていますが、スキンの色だけを他の色に変更したいCocoonユーザーは多いと思います。

色まで固定されてしまうと、同じCocoonスキンを使用している他のサイトとデザインが完全にかぶりますし、Cocoonの汎用性も大きく欠けてしまいます。

スキンをCocoon設定のキーカラーに対応させることで、ユーザーがサイトのキーカラーを自由に設定できるようにカスタマイズしましょう。

SILK公式サイト https://dateqa.com/cocoon/#skin-php

参考コードをお借りしてどうにかこのスキンでもキーカラーに対応出来るようにしました。

ただ、キーカラー適応部以外の色が全体的に少し青に寄った配色になってしまっているので、気になる方はご自身で色変更をして下さい。

動作の様子

ぜひご自身でダークモードとライトモードを切り替えてご確認下さい。

見出し(これはH3です)

H4

H5
H6

文字

文章はこの様に表示されます。太字斜体もこの様に表示されます。

マーカーテスト アンダーラインマーカーテスト

マーカーテスト アンダーラインマーカーテスト

マーカーテスト アンダーラインマーカーテスト

引用

引用

引用元が表示されます

ヘッター1ヘッター2ヘッター3
111
123
136
1410
フッターラベルフッターラベルフッターラベル

Cocoon Block

名前
名前

吹き出しテスト

案内ボックス

アイコンボックス

タブボックス

タイムラインのタイトル
  • ラベル
    タイトル1

    タイトル説明

  • ラベル
    タイトル2

    タイトル説明

アイコンリスト
  • リスト1
  • リスト2
  • リスト3

白抜きボックス

付箋風ボックス

トルクボックス(色指定が必要です。)

見出し

見出しボックス

ここでは、枠の色を指定していません。

見出し

タブ見出しボックス

見出し

ラベルボックス

マイクロコピーテキスト

あいうえお

マイクロコピーバルーン
最後までご覧頂きありがとう御座いました。もしこの記事が「イイナ!」と思ったらぜひSNSシェアSNSフォローをよろしくお願い致します!
もし宜しければ気軽にコメントして頂けるとありがたいです!
スポンサーリンク
スポンサーリンク
ブログ
\この記事をシェアする/
\hiroをフォローする/
Hirosite

コメント

タイトルとURLをコピーしました