特典機能について

OSやブラウザのダークモードに対応した「Simple Darkmode」スキンを同梱追加

スキン
この記事は約3分で読めます。

Hirositeを運営されているhirositeさんが作成されたSimple Darkmode(シンプルダークモード)を同梱させていただきました。

シンプルなダークモード対応Cocoonスキン(Simple-Darkmode)を作りました
hiro(管理人)アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね…と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)しかも最新のWordpress純正テー
スポンサーリンク

「Simple Darkmode」スキン

Simple Darkmodeは、通常はこんなデザインのスキンです。

シンプルダークモードの通常デザイン

ただ、OSやブラウザなどの設定がダークモードになっているときは、以下のようにダークモードで表示されるスキンです。

シンプルダークモードのダークモード

なので、表示は訪問者環境のダークモード設定状態に依存するスキンになります。

スポンサーリンク

レイアウト

主なレイアウトはこちら。

見出し

通常

通常の見出し

ダークモード

ダークモードの見出し

引用

通常

通常の引用

ダークモード

ダークモードの引用

テーブル

通常

通常のテーブル

ダークモード

ダークモードのテーブル

スポンサーリンク

マーカー

装飾もダークモードに対応しています。

通常

通常のマーカー

ダークモード

ダークモードのマーカー

ボックス

各種ボックスも全てダークモードに対応しています。

通常

通常のアイコンボックス

通常のタブボックス

ダークモード

ダークモードのアイコンボックス

ダークモードのタブボックス

ブログカード

通常

通常のブログカード

ダークモード

ダークモードのブログカード

吹き出し

通常

通常の吹き出し

ダークモード

ダークモードの吹き出し

エントリーカード

インデックスのカードデザインはこんな感じ。

通常

通常のエントリーカード

ダークモード

ダークモードのエントリーカード

こんな感じで非常に綺麗なダークモードを楽しめる好きになっています。

サイトキーカラーの変更にも対応

このスキンはキーカラー対応となります。「Cocoon設定→全体→キーカラー」にある「サイトキーカラー」と、「サイトキーテキストカラー」を設定する事でサイトイメージを変更できます。

「サイトキーカラー」を設定することでデフォルトで灰色(#757575)で設定されている部分の色を変更する事が可能です。

例えばこちらのヘッダー部分の青色(水色)部分は「サイトキーカラー」で変更してあります。

シンプルダークモードの通常デザイン

シンプルダークモードのダークモード

「サイトキーテキストカラー」は「サイトキーカラー」の背景の上にのるテキストの色です。「サイトキーカラー」に合わせて設定して下さい。

主要なOSにおける、ダークモードへの変更方法

  • iOS iPad OSの場合:設定→ディスプレイと明るさ→”ダーク”へ変更
  • Androidの場合:設定→ディスプレイ→”ダークテーマ”をオンに変更
  • Windowsの場合:設定→個人用設定→色→「規定のアプリモードを選択」を”ダーク”へ変更
  • Mac OSの場合:システム環境設定→一般→外観モードを”ダーク”へ変更
    ※バージョンによって設定方法が異なる、又は設定出来ない場合があります。
なお、Internet Explorerではダークモードが動作せず、ライトモードのみの動作となります。その他主要ブラウザ(Chrome・ Edge・Safari等)では動作確認をしています。

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

Cocoon設定からシンプルダークモードを選択する

詳細はこちらご参照ください。

シンプルなダークモード対応Cocoonスキン(Simple-Darkmode)を作りました
hiro(管理人)アプリはダークモード対応になっていってるのに、Webサイトは全然ですよね…と、ずっと思っていたのですが、サイトを見る側の人間からすればどうしようもありません。(実は無い事も無いけど…)しかも最新のWordpress純正テー

スキンに不具合があればご報告ください

「デザインが崩れている」とか「ここにデザインが適用されていない」等の不具合がありましたら以下でご報告いただければ幸いです。

https://wp-cocoon.com/community/skin-bugs/

オリジナルスキンを紹介させてください

スキンを作成した場合は、是非お知らせください。

スキンを作成した際にはぜひ当サイトで紹介させてください
スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

当サイトの記事で紹介させていただきます。

スキン
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ重視ランキング)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon

コメント テーマの質問はフォーラムへ

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