grayishスキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

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

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

69 投稿
7 ユーザー
41 Likes
3,660 表示
(@reysol)
New Member Registered
結合: 2年前
投稿: 4
 

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

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

 

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

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

 

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

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


   
返信引用
(@hirosite)
Active Member Registered
結合: 4年前
投稿: 19
Topic starter  

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

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

投稿者:: @reysol

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

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

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

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

投稿者:: @reysol

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

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

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

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


   
わいひら reacted
返信引用
(@hirosite)
Active Member Registered
結合: 4年前
投稿: 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)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @hirosite

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @hirosite

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @hirosite

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

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

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

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

こちらが以前の状態。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

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

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


   
返信引用
(@hirosite)
Active Member Registered
結合: 4年前
投稿: 19
Topic starter  
投稿者:: @yhira

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

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

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


   
返信引用
(@hirosite)
Active Member Registered
結合: 4年前
投稿: 19
Topic starter  
投稿者:: @yhira

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

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

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

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


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

そうですか。

・ダークスキン対応

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

 

そうですね。

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

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


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

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

 

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @hirosite

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @reysol

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

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


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

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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 
投稿者:: @reysol

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

@hirosite 

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


   
返信引用
(@hirosite)
Active Member Registered
結合: 4年前
投稿: 19
Topic starter  

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

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

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

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

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

例えば、

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

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

と、

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

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

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

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

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


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16128
 

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

投稿者:: @hirosite

Internet Explorerには非対応である旨

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


   
返信引用
固定ページ 2 / 2
共有:

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

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

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

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

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

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

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

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