サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
2021年10月9日 12:11
はじめまして、いつもCocoonとシルクスキンを重宝してます。
シルクスキンを参考にして作られたスキンとあったので、試しに利用してみました。
ダークスキン対応とあったので、シルクのやり方で背景色を黒、文字色を白に設定してみたのですがうまくいきません。
ダークスキンにするにはどのように設定すればいいんでしょうか？
あと、ダークモードのときにはシルクのようにユーザーが切り替えるスイッチボタンはないんでしょうか？
TwitterとかGitHubとかと同じように、サイト単位で切り替え設定できて便利だなとは思ったんですが…
Topic starter
2021年10月9日 13:01
@reysol 試して頂いてありがとうございます。
確かにこのスキンはSILKスキンを参考にさせて頂いておりますが、メイン機能のダークモードの仕組みはSILKと全く異なる仕組みを採用しています。
参考にさせて頂いたのは、”キーカラー”への対応のみです。
ダークスキン対応とあったので、シルクのやり方で背景色を黒、文字色を白に設定してみたのですがうまくいきません。
具体的な解説は説明ページ（ https://hirosite.com/simple-darkmode/ ）をご覧頂きたいのですが、簡単に説明させて頂くとご利用の方（サイト管理者側）には特に設定等は不要で、このSimple-Darkmodeを適用した時点でダークモード対応となります。
この”ダークモード対応”というのはユーザー（サイト訪問者）が意識せずとも強制的にライトモード（一般的なCocoonのデザイン）とダークモード（他のダークスキンなどと同じデザイン）切り替える仕様です。
あくまでもこのスキンは、サイトをダーク（暗色・黒系）系のデザインにする為のものでは無いです。
あと、ダークモードのときにはシルクのようにユーザーが切り替えるスイッチボタンはないんでしょうか？
TwitterとかGitHubとかと同じように、サイト単位で切り替え設定できて便利だなとは思ったんですが…
「あくまでもユーザーが見やすい様に。」を開発のメインコンセプトにしたため、徐々に普及したスマホアプリのダークモード対応と同じ設定だけで使える様に設計しました。
”切り替えボタン”というのは日本のサイトではまだ普及しておらず、また日常的に使うスマホアプリにも存在しないため、取り払っております。
もしこれらの機能をご希望であれば、現時点ではそのままSILKスキンをご利用されるのがよろしいかと思います。
わいひら reacted
Topic starter
2021年10月9日 14:15
@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;
}
2021年10月10日 19:19
もし工賃を頂けるにしても、Cocoonのスキン同梱の決まり通りで当然結構です。
「この状況がイレギュラーだから別枠で」とわいひらさんがお考えになるなら、ご自身でお決めになって全然結構です。そもそもSimple-Darkmodeの時点で高校生のお小遣いには多いですし（笑）
そしたら、2万円とかでどうでしょうか。
ただ、Simple‐Darkmode同梱の32000円はCocoon v2.3.7公開時に、残りの2万円はSimple‐Dark(?)を同梱するのはv2.3.8とする予定なので、それの公開時に送付させていただくことになるかと思います。
2021年10月10日 19:20
言われてみれば確かに狭かったので、余白を追加しておきました。
採用いただきありがとうございます。
Cocoonも、当サイトもアップデートしておきました。
2021年10月10日 19:32
FAQのブロックの動作確認をしていて思ったのが、この様に
- Answerの部分の文字を少し小さくして、
- ”A”の文字を左から少し離す
- "Q"のサイズも大きくして"A"のサイズを小さく
した方が質問との区別がされて見やすくなりませんかね？
僕はこの方が見やすい気がするので今回のスキンに入れてみました。
こちらが以前の状態。
2021年10月10日 19:33
こちらがご提案いただいた状態。
2021年10月10日 19:39
個人的には、Q&Aラベルの大きさはそろっていた方が気持ち良いように思います。文字の出だしもそろうので。（あくまで僕の好みです）
質問と回答の違いは、太字か太字じゃないかで区別をつけるつもりでやっていたのですが、文字は少し小さくするのはありなのかなと思います。ただ、ここら辺はかなり好みにもよりそうですね。
回答に長文を書くケースが多い場合場合は、少し小さめの文字の方が適しているかも。
Topic starter
2021年10月11日 00:35
そしたら、2万円とかでどうでしょうか。
ただ、Simple‐Darkmode同梱の32000円はCocoon v2.3.7公開時に、残りの2万円はSimple‐Dark(?)を同梱するのはv2.3.8とする予定なので、それの公開時に送付させていただくことになるかと思います。
全然問題ないです。ただ個人的な事情で申し訳ないのですが、この先2週間ほど学校の方が忙しくなってしまい対応できなさそうです。
時間がありそうなら隙間時間で対応します。
Topic starter
2021年10月11日 00:38
個人的には、Q&Aラベルの大きさはそろっていた方が気持ち良いように思います。文字の出だしもそろうので。（あくまで僕の好みです）
質問と回答の違いは、太字か太字じゃないかで区別をつけるつもりでやっていたのですが、文字は少し小さくするのはありなのかなと思います。ただ、ここら辺はかなり好みにもよりそうですね。
そうですね、結局個人の好みが大きそうですね。わいひらさんがそのようにお考えなら全然大丈夫です。
自分ももう少し、企業のFAQなど見て研究してみます。
2021年10月11日 11:33
そうですか。
・ダークスキン対応
って書かれてたので、ダークスキンにも対応してるものと思ってました。
そうですね。
ダークスキンやダークモードの対応、カスタマイズ性を考えてみると、このままシルクを使用したほうがよさそうだなと思いました。
教えていただきありがとうございました。
2021年10月11日 13:10
思ったんですけど、Cocoonでもダークスキンやダークモードに対応して、各スキンの対応範囲を減らしたりってことはできないものなんですかね？
普通はCocoonの設定で文字や背景の色を変えるだけでも、ダーク系とかはあてられたCSS全部探し出して上書きしなきゃいけなかったり…
っていうのが減ったらいいなって。
2021年10月11日 19:05
全然問題ないです。ただ個人的な事情で申し訳ないのですが、この先2週間ほど学校の方が忙しくなってしまい対応できなさそうです。
ダークスキンは次の次のバージョン以降に同梱できればと思っているので、特に急いではないです。
2021年10月11日 19:09
思ったんですけど、Cocoonでもダークスキンやダークモードに対応して、各スキンの対応範囲を減らしたりってことはできないものなんですかね？
申し訳ないですが、ちょっとこれだけではどういう仕様なのかわからないです。
2021年10月15日 11:00
ダークスキンやダークモードでもCocoonの設定画面から色とか変更できるといいなってことです。
スキンなしだとCocoonの色は変更できますけど、ちょっとデザイン変えたいなってときにスキンを設定すると、ほとんどは色の設定がちゃんと反映されないと思います。
そうなると、ノーマルなCocoon以外の選択肢ってシルクくらいしかなくなっちゃいます。
そこをCocoon側で対応できないかなって思いました。
2021年10月15日 19:46
スキンなしだとCocoonの色は変更できますけど、ちょっとデザイン変えたいなってときにスキンを設定すると、ほとんどは色の設定がちゃんと反映されないと思います。
だとしたら、数十種類すべてのスキンのCSSセレクタを見直す必要があり、とても1人では無理ですし、人を雇うにしても資金的に現無料体制では厳しいです。
申し訳ないですが現状では、フォーラムに報告があれば、スキン名と該当部分を聞いて、その都度対応するということぐらいしかできないと思います。
2021年10月16日 19:31
Simple‐Darkmodeを同梱したテーマを公開したので、フォーラムに登録されているメールアドレス宛にAmazonギフト券を送付させていただきました。
https://wp-cocoon.com/2-3-7/
ご査収いただければ幸いです。
Topic starter
2021年10月17日 20:27
@yhira すみません、返信遅れました。
ギフト券ありがとうございます！久しぶりに自分にへのご褒美をあげようかと思います（笑）
あと一点お願いなのですが、
- キーカラー対応である事
- ダークモードへの変更方法
- Internet Explorerには非対応である旨
出来ればこれらを、スキンの紹介ページに記載して頂けるとありがたいです。
例えば、
このスキンはキーカラー対応となります。Cocoon設定→全体→キーカラーにある”サイトキーカラー”と、”サイトキーテキストカラー”を設定する事を推奨します。
サイトキーカラーを設定することで灰色（#757575）で設定されている部分の色を変更する事が可能です。
サイトキーテキストカラーはサイトキーカラーの背景の上にのるテキストの色です。サイトキーカラーに合わせて設定して下さい。
と、
主要なOSにおける、ダークモードへの変更方法
iOS iPad OSの場合：設定→ディスプレイと明るさ→”ダーク”へ変更
Androidの場合：設定→ディスプレイ→”ダークテーマ”をオンに変更
Windowsの場合：設定→個人用設定→色→「規定のアプリモードを選択」を”ダーク”へ変更
Mac OSの場合：システム環境設定→一般→外観モードを”ダーク”へ変更
※バージョンによって設定方法が異なる、又は設定出来ない場合があります。なお、Internet Explorerではダークモードが動作せず、ライトモードのみの動作となります。その他主要ブラウザ（Chrome・ Edge・Safari等）では動作確認をしています。
この様な感じでどうでしょう？僕のサイト側の説明にも追加しておきます。
入院の準備でお忙しいとは思いますが、緊急性はないのでお時間のある時にご対応頂けるとありがたいです。
2021年10月18日 20:08
追記しておきました。
https://wp-cocoon.com/simple-darkmode/
Internet Explorerには非対応である旨
こちらについては、Cocoon自体がもともとInternet Explorerは非対応と明示しているので、追記した以上に書くことは必要ないかと思い書きませんでした。
https://wp-cocoon.com/downloads/
固定ページ 2 / 2
前へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。