特典機能について

ダークモードスキンの作成について - 固定ページ 2 | わいひらに連絡 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
ダークモードスキンの作成について
 
共有:
通知
すべてクリア

ダークモードスキンの作成について

固定ページ 2 / 2

reysol
(@reysol)
New Member
結合: 2か月前
投稿: 4
 

はじめまして、いつもCocoonとシルクスキンを重宝してます。

シルクスキンを参考にして作られたスキンとあったので、試しに利用してみました。

 

ダークスキン対応とあったので、シルクのやり方で背景色を黒、文字色を白に設定してみたのですがうまくいきません。

ダークスキンにするにはどのように設定すればいいんでしょうか?

 

あと、ダークモードのときにはシルクのようにユーザーが切り替えるスイッチボタンはないんでしょうか?

TwitterとかGitHubとかと同じように、サイト単位で切り替え設定できて便利だなとは思ったんですが…


返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  

@reysol 試して頂いてありがとうございます。

確かにこのスキンはSILKスキンを参考にさせて頂いておりますが、メイン機能のダークモードの仕組みはSILKと全く異なる仕組みを採用しています。
参考にさせて頂いたのは、”キーカラー”への対応のみです。

投稿者:: @reysol

ダークスキン対応とあったので、シルクのやり方で背景色を黒、文字色を白に設定してみたのですがうまくいきません。

具体的な解説は説明ページ( https://hirosite.com/simple-darkmode/ )をご覧頂きたいのですが、簡単に説明させて頂くとご利用の方(サイト管理者側)には特に設定等は不要で、このSimple-Darkmodeを適用した時点でダークモード対応となります。

この”ダークモード対応”というのはユーザー(サイト訪問者)が意識せずとも強制的にライトモード(一般的なCocoonのデザイン)とダークモード(他のダークスキンなどと同じデザイン)切り替える仕様です。

あくまでもこのスキンは、サイトをダーク(暗色・黒系)系のデザインにする為のものでは無いです。

投稿者:: @reysol

あと、ダークモードのときにはシルクのようにユーザーが切り替えるスイッチボタンはないんでしょうか?

TwitterとかGitHubとかと同じように、サイト単位で切り替え設定できて便利だなとは思ったんですが…

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

もしこれらの機能をご希望であれば、現時点ではそのままSILKスキンをご利用されるのがよろしいかと思います。


わいひら 件のいいね!
返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  

@yhira 別件ですしここで言わない方がいいかも知れませんが、わざわざスレット立てるレベルでは無いので少しご提案させて下さい。

FAQのブロックの動作確認をしていて思ったのが、この様に

  • Answerの部分の文字を少し小さくして、
  • ”A”の文字を左から少し離す
  • "Q"のサイズも大きくして"A"のサイズを小さく

した方が質問との区別がされて見やすくなりませんかね?

僕はこの方が見やすい気がするので今回のスキンに入れてみました。

一応入れたコード貼っときますけど、どうでもよかったり、見にくそうだなって感じたら無視で大丈夫です。

/*faq*/
.faq-item-label{
  font-size: 26px;
}
.faq-answer-label{
  font-size: 20px;
  margin-left: 4px;
}
.faq-answer-content.faq-item-content p{
  font-size: 16px;
}

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hirosite

もし工賃を頂けるにしても、Cocoonのスキン同梱の決まり通りで当然結構です。
「この状況がイレギュラーだから別枠で」とわいひらさんがお考えになるなら、ご自身でお決めになって全然結構です。そもそもSimple-Darkmodeの時点で高校生のお小遣いには多いですし(笑)

そしたら、2万円とかでどうでしょうか。
ただ、Simple‐Darkmode同梱の32000円はCocoon v2.3.7公開時に、残りの2万円はSimple‐Dark(?)を同梱するのはv2.3.8とする予定なので、それの公開時に送付させていただくことになるかと思います。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hirosite

言われてみれば確かに狭かったので、余白を追加しておきました。

採用いただきありがとうございます。
Cocoonも、当サイトもアップデートしておきました。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hirosite

FAQのブロックの動作確認をしていて思ったのが、この様に

  • Answerの部分の文字を少し小さくして、
  • ”A”の文字を左から少し離す
  • "Q"のサイズも大きくして"A"のサイズを小さく

した方が質問との区別がされて見やすくなりませんかね?

僕はこの方が見やすい気がするので今回のスキンに入れてみました。

こちらが以前の状態。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

こちらがご提案いただいた状態。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

個人的には、Q&Aラベルの大きさはそろっていた方が気持ち良いように思います。文字の出だしもそろうので。(あくまで僕の好みです)

質問と回答の違いは、太字か太字じゃないかで区別をつけるつもりでやっていたのですが、文字は少し小さくするのはありなのかなと思います。ただ、ここら辺はかなり好みにもよりそうですね。
回答に長文を書くケースが多い場合場合は、少し小さめの文字の方が適しているかも。


返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  
投稿者:: @yhira

そしたら、2万円とかでどうでしょうか。
ただ、Simple‐Darkmode同梱の32000円はCocoon v2.3.7公開時に、残りの2万円はSimple‐Dark(?)を同梱するのはv2.3.8とする予定なので、それの公開時に送付させていただくことになるかと思います。

全然問題ないです。ただ個人的な事情で申し訳ないのですが、この先2週間ほど学校の方が忙しくなってしまい対応できなさそうです。

時間がありそうなら隙間時間で対応します。


返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  
投稿者:: @yhira

個人的には、Q&Aラベルの大きさはそろっていた方が気持ち良いように思います。文字の出だしもそろうので。(あくまで僕の好みです)

質問と回答の違いは、太字か太字じゃないかで区別をつけるつもりでやっていたのですが、文字は少し小さくするのはありなのかなと思います。ただ、ここら辺はかなり好みにもよりそうですね。

そうですね、結局個人の好みが大きそうですね。わいひらさんがそのようにお考えなら全然大丈夫です。

自分ももう少し、企業のFAQなど見て研究してみます。


返信引用
reysol
(@reysol)
New Member
結合: 2か月前
投稿: 4
 

そうですか。

・ダークスキン対応

って書かれてたので、ダークスキンにも対応してるものと思ってました。

 

そうですね。

ダークスキンやダークモードの対応、カスタマイズ性を考えてみると、このままシルクを使用したほうがよさそうだなと思いました。

教えていただきありがとうございました。


返信引用
reysol
(@reysol)
New Member
結合: 2か月前
投稿: 4
 

思ったんですけど、Cocoonでもダークスキンやダークモードに対応して、各スキンの対応範囲を減らしたりってことはできないものなんですかね?

 

普通はCocoonの設定で文字や背景の色を変えるだけでも、ダーク系とかはあてられたCSS全部探し出して上書きしなきゃいけなかったり…

っていうのが減ったらいいなって。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hirosite

全然問題ないです。ただ個人的な事情で申し訳ないのですが、この先2週間ほど学校の方が忙しくなってしまい対応できなさそうです。

ダークスキンは次の次のバージョン以降に同梱できればと思っているので、特に急いではないです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @reysol

思ったんですけど、Cocoonでもダークスキンやダークモードに対応して、各スキンの対応範囲を減らしたりってことはできないものなんですかね?

申し訳ないですが、ちょっとこれだけではどういう仕様なのかわからないです。


返信引用
reysol
(@reysol)
New Member
結合: 2か月前
投稿: 4
 

ダークスキンやダークモードでもCocoonの設定画面から色とか変更できるといいなってことです。

スキンなしだとCocoonの色は変更できますけど、ちょっとデザイン変えたいなってときにスキンを設定すると、ほとんどは色の設定がちゃんと反映されないと思います。

そうなると、ノーマルなCocoon以外の選択肢ってシルクくらいしかなくなっちゃいます。

そこをCocoon側で対応できないかなって思いました。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 
投稿者:: @reysol

スキンなしだとCocoonの色は変更できますけど、ちょっとデザイン変えたいなってときにスキンを設定すると、ほとんどは色の設定がちゃんと反映されないと思います。

だとしたら、数十種類すべてのスキンのCSSセレクタを見直す必要があり、とても1人では無理ですし、人を雇うにしても資金的に現無料体制では厳しいです。
申し訳ないですが現状では、フォーラムに報告があれば、スキン名と該当部分を聞いて、その都度対応するということぐらいしかできないと思います。

This post was modified 2か月前 by わいひら

返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

@hirosite 

Simple‐Darkmodeを同梱したテーマを公開したので、フォーラムに登録されているメールアドレス宛にAmazonギフト券を送付させていただきました。
https://wp-cocoon.com/2-3-7/
ご査収いただければ幸いです。


返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  

@yhira すみません、返信遅れました。

ギフト券ありがとうございます!久しぶりに自分にへのご褒美をあげようかと思います(笑)

あと一点お願いなのですが、

  • キーカラー対応である事
  • ダークモードへの変更方法
  • Internet Explorerには非対応である旨

出来ればこれらを、スキンの紹介ページに記載して頂けるとありがたいです。

例えば、

このスキンはキーカラー対応となります。Cocoon設定→全体→キーカラーにある”サイトキーカラー”と、”サイトキーテキストカラー”を設定する事を推奨します。

サイトキーカラーを設定することで灰色(#757575)で設定されている部分の色を変更する事が可能です。
サイトキーテキストカラーはサイトキーカラーの背景の上にのるテキストの色です。サイトキーカラーに合わせて設定して下さい。

と、

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

iOS iPad OSの場合:設定→ディスプレイと明るさ→”ダーク”へ変更
Androidの場合:設定→ディスプレイ→”ダークテーマ”をオンに変更
Windowsの場合:設定→個人用設定→色→「規定のアプリモードを選択」を”ダーク”へ変更
Mac OSの場合:システム環境設定→一般→外観モードを”ダーク”へ変更
※バージョンによって設定方法が異なる、又は設定出来ない場合があります。

なお、Internet Explorerではダークモードが動作せず、ライトモードのみの動作となります。その他主要ブラウザ(Chrome・ Edge・Safari等)では動作確認をしています。

この様な感じでどうでしょう?僕のサイト側の説明にも追加しておきます。

入院の準備でお忙しいとは思いますが、緊急性はないのでお時間のある時にご対応頂けるとありがたいです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12939
わいひら - Facebookわいひら - Twitter
 

追記しておきました。
https://wp-cocoon.com/simple-darkmode/

投稿者:: @hirosite

Internet Explorerには非対応である旨

こちらについては、Cocoon自体がもともとInternet Explorerは非対応と明示しているので、追記した以上に書くことは必要ないかと思い書きませんでした。
https://wp-cocoon.com/downloads/


返信引用
固定ページ 2 / 2
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においての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をコピーしました