特典機能について

ダークモードスキンの作成について | わいひらに連絡 | 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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

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

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

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

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

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

固定ページ 1 / 2

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

わいひらさんこんにちは。以前ダークモードに対応してくれないか?とトピックを立てた者です。

当時はあまり知識も無かったのでこの様なことを投稿したのですが、無論わいひらさんへの負担を考えたら大変失礼なことをしたと反省しております。

教えて頂いたプラグイン式のものはうまく動作せず、Cocoonのダークモードに関する簡単なカスタマイズ情報も無かったため、「誰も作らないなら自分が作ろう!」の精神で1からCSSを勉強し、なんとかある程度形になるものを作る事が出来ました。

簡単にスキンの説明をさせていただくと、ダークモードキーカラー(メインカラーとメインのテキストカラーのみ)に対応したスキンとなっております。今までのようなダークスキンではない為、様々なブログにも扱いやすいかと思います。

一般のCocoonユーザー含め、今後スキンを開発される皆様の参考になればいいなと思い、また数名の方には開発途中にも「使って良いか?」の連絡をわざわざくださる方もいらっしゃいましたので、ぜひCocoonへの同梱をお願いしたいです。

「スキン同梱に関する注意点」は確認済みですので、わいひらさんのその他の仕事が落ち着きたら対応のご検討をよろしくお願いします。

説明及びダウンロードページ: https://hirosite.com/simple-darkmode/

また投げやりの様で申し訳ないのですが、マイクロコピーバルーンの不具合に関してはどんなに試行錯誤しても改善出来なかったので、もしわいひらさんの方で解決出来そうであれば解決して頂けると大変助かります。

 

さて、もう一点相談があるのですが、今回このスキンは”青色”ベースに開発を行いました。しかしこのスキンはキーカラーにも対応させた為、せっかくならできる限り多くのベース色を用意しようと思っていました。

しかし僕の技量不足でどうしても青色以外の所に能力を割けず、今後スタンダードになって行くダークモード対応を早くcocoonで行わなければという気持ちが強まったので、現状で同梱をお願いしています。

そこで他の色への対応ですが、このスキンの特性上、変数を利用して配色を決定しているので、開発者ではない方でも追加CSSを子テーマに記入すれば、それぞれの色に対応できると考えています。
(子テーマに開発スキンを入れ、子テーマのテーマエディターに記載した所一部は成功したので、親テーマにインストールしても確認が取れるかと考えています。もし無理そうであればご教授下さい。)

したがって、このフォーラムの皆さんにもこのスキン、特に配色についてのご意見を伺い、いくつかの意見が上がれば、「赤色はこの様に指定すると上手くいきます。」みたいな事をスキンの説明に記載しておきたいです。

現状雑談フォーラムに投稿する予定なのですが、もし「このフォーラムを利用して」みたいな指定(雑談ではなく開発向けを使ってなど)がありましたら、ご指定頂けると幸いです。
また、既にこの投稿を見てご利用された方がいらっしゃいましたら、ご意見や上で述べた配色案を送って頂けるとありがたいです。

 

余談ですが、初めてプログラミングを触るレベルの高校生なのでとてつもない時間がかかってしまいました。修正出来ないバグがあるのもこの為です。どうかお許し下さい。

早く同梱をすることを決めたのも、受験勉強であまりパソコンをいじっていられる時間も取れなくなるとの判断もありました。


わいひら, リフィトリー, Akira と 2 人の方がいいね!
引用
トピックタグ
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 786
Akira - FacebookAkira - Twitter
 

とても見やすいダークモードカラーです。素晴らしい。

マイクロコピーバルーンの不具合の解決

この部分を

.micro-balloon,
.micro-balloon:after{
  background-color: var(--bg3);
}

こうすれば解決します。

.micro-balloon {
  background-color: var(--bg3);
}

.micro-balloon::after {
  border-top-color: var(--bg3);
}

● 気になった点

この変数が気になりました。

--underline-blue:#a8dafb 60%;
--underline-red:#ffd0d1 60%;
--underline: #ff9 60%;

linear-gradient を使っていない background にも指定されており、% の部分が background-position-x として使われます。サイトによっては、表示が崩れるかもしれません。

● アクセシビリティ

a タグの色をライトモードとダークモードとで変更すれば、もっと良くなると思いました。

ダークモードでの本文部分の背景色は #242529 です。そして、a タグの色は、Cocoon デフォルトの #1967d2 です。

この 2 つの色のコントラスト比は、2.85 : 1 です。フォントサイズが普通サイズであれば、コントラスト比は 4.5 : 1 以上にしなければなりません。

ダークモードでの a タグの色をもっと白に近づければ、アクセシビリティの面で最高です。

※ コントラスト比は、Contrast Ratio などで計測できます。

This post was modified 2か月前 by Akira

Hirositeわいひら 件のいいね!
返信引用
はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 802
 

閲覧者の設定に合わせて自動でダークモードに切り替わってくれるのが良いですね!

数点見つけた不具合をご報告しておきます。


style.cssの4行目

Skin URI:  https://hirosite.com/simple‐darkmode

Skin URI:  https://hirosite.com/simple-darkmode

 が正しいようです(「‐」が全角になっている)。


ダークモード時にCocoon設定>インデックス>フロントページタイプで「タブ一覧」を選ぶと、未選択のタブの文字が読めません。


検索時、メインカラムに表示される検索ボックスが意図しない表示(検索ボタンが入力欄の下に表示)になるようです。


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

スキンを作成していただきありがとうございます!
https://hirosite.com/simple-darkmode/
こちらにダークモードの切り替え方法が以下のように書かれています。

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

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

Windows10の場合は以下の変更を行うとダークモードになるということでよろしいでしょうか。
https://www.tipsfound.com/windows10/04007
僕の環境の場合Windows8.1なのでこちらの方法?
https://blog.fonepaw.jp/enable-windows-dark-theme.html

あとで、余裕のある時にスキンをインストールして動作確認させていただこうと思います。


Hirosite 件のいいね!
返信引用
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 786
Akira - FacebookAkira - Twitter
 

ダークモードへの切り替えは、ブラウザのデベロッパーツールを使うと便利です。

参考:ダークモードの検証が簡単にできるようになった!Chrome 79 デベロッパーツールの新機能


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

みなさんすぐに試して頂いてありがとうございます。

  • マイクロコピーバルーン
  • アンダーラインの変数
  • スキンURL
  • ダブ一覧
  • 検索結果画面

はなんとか修正しました。(ver 1.3.4)

Akiraさん、はるさん、本当にご協力頂きありがとうございます。

投稿者:: @akira

a タグの色をライトモードとダークモードとで変更すれば、もっと良くなると思いました。

この点ですが、パッと見た限り、ただのリンク(ブログカードでは無い方)にクラス名は無かったのでaタグの色変更を試した所、当たり前ですが全てのaタグに適用されてしまい、ブログカードやエントリカードの色が変更されてしまい、修正方法を思いつかずにいます。
(修正版、ダークモード側の変数指定にコメントアウトして残してあります。)

もしどなたかお時間がある時にご確認頂き、何か解決方法があればご教授頂けるとありがたいです。

投稿者:: @yhira

Windows10の場合は以下の変更を行うとダークモードになるということでよろしいでしょうか。

Windows 10であれば、その記事にある通りですが、「規定のアプリモードを選択します」を”ダーク”に切り替えて頂くだけで動作すると思います。ただ流石にWindows8.1の端末が手元にないので、そちらの設定はわからないです。Windows 10の設定は他のアプリにも影響を与える設定ですし、デザインの好みは分かれますから、Akiraさんが仰る通りデベロッパーツールを使われた方がいいかも知れません。

This post was modified 2か月前 by Hirosite

返信引用
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 786
Akira - FacebookAkira - Twitter
 

これでどうでしょう?

@media (prefers-color-scheme: dark) {
  a {
    color: #99ccff;
  }

  a:hover {
    color: #f7a488;
  }
}

Cocoon では a タグで :link や :visited での指定はないため、指定すると全部に適用されます。

参考ページ


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

Cocoon では a タグで :link や :visited での指定はないため、指定すると全部に適用されます。

それは頭にありませんでした。ご指摘頂きありがとうございます。

とりあえず最新バージョン(ver1.3.5)に追加しておきました。


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

ブラウザでも変更できるんですね。
パソコンの場合は、デベロッパーツールを開いている必要があるんですね。
デベロッパーツールを閉じてもダークモードを使う方法を調べたら、Chromeのダークテーマを使用するか、ダークモード拡張を利用するとできるみたいですね。
https://www.amamoba.com/pc/chrome-darkmode.html
Chromeのダークモードテーマ Just Black
https://chrome.google.com/webstore/detail/just-black/aghfnjkcakhmadgdomlmlhhaocbkloab
ダークモード拡張 Dark Reader
https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh/related
※Dark Readerはダークモード対応テーマではなくてもダークモード表示になってしまうため動作確認には良くないのかも


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

Simple‐Darkmodeを小一時間ばかり使ってみました。
ダークモードの色合いがよく素晴らしいスキンですね。
ぜひ次のバージョン(2.3.7)あたりで同梱できればと考えています。

ちょっと動作確認した限りでは、ハイライト表示が無効になっているコード表示(preタグ)の文字色を黒系にする必要があるようです。


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

ハイライト表示されているコードに関しては大丈夫のようです。

 


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

Dark Readerはダークモード対応していないサイトでもかなり綺麗にしダークモードにしてくれるみたいですね。
ダークモードの配色の参考になりそうですね。


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

すいません。よくよく試してみたら、「Chromeのダークモードテーマ Just Black」でも「ダークモード拡張 Dark Reader」で設定をいじくっても、prefers-color-scheme:darkの状態にはならないっぽいですね。。
確実にスキン対応のダークモードにするには、OSで変更するか、Akiraさんが書かれた以下の方法しかないっぽいですね。

参考:ダークモードの検証が簡単にできるようになった!Chrome 79 デベロッパーツールの新機能

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

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

Simple‐Darkmodeを手軽に動作確認できるように、サイトにテスト的にスキンを適用できるようにしてみました。
https://wp-cocoon.com/?theme-switch=simple-darkmode

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

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

キーボードキーの文字色も黒系にする必要があるようです。
https://wp-cocoon.com/cocoon-blocks-response-status/


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

LINE吹き出しの文字色も黒系にする必要があるようです。


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

何度もすいません。
ボックス系のデフォルト色もみたいです。

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

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

何度も失礼します。
コメントウィジェットもみたいです。


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

わいひらさんご指摘ありがとうございます。自分があまり使っていなかった機能はまだまだでしたね…すいません。

コメントウィジェット、キーボード文字色、ハイライト無効のソースコード、吹き出しは最新バージョン(1.3.7)で直しておきました。

一点ボックス系ですが、

投稿者:: @yhira

何度もすいません。
ボックス系のデフォルト色もみたいです。

これは全ての見出し?の部分を黒色に変更するということでしょうか?

例えば、
https://wp-cocoon.com/cocoon-blocks-response-status/#toc23  
ここの一番最初の見出しボックスの見出しは白(シルバー?)背景に黒文字ですが、自分がテスト環境で使う限り、ダークエンジやスキン無しでも、見出しの部分が白背景(又は白っぽい)に白文字になってしまいます。

自分の使い方が悪いとは思うのですが、どのような条件で黒文字になるのでしょうか?

僕個人的には他の着色された枠であれば、白文字のままでいいと思っています。
つまり、白背景の時だけ何か黒文字にする方法があればご教授頂けるとありがたいです。


返信引用
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 786
Akira - FacebookAkira - Twitter
 

わいひらさんではありませんが…。

自分の使い方が悪いとは思うのですが、どのような条件で黒文字になるのでしょうか?

デフォルトでは黒です。具体的には、body タグに指定される color の色が適用されます。

この body タグの color は、Cocoon 設定の「全体」タブにある「サイトフォント」の「文字色」で変更できます。この設定が、テスト環境で変わってはいないでしょうか。

つまり、白背景の時だけ何か黒文字にする方法があればご教授頂けるとありがたいです。

見出しボックスを例にします。

このように書くと…

.caption-box:not(.has-border-color, [class*=cb-]) .caption-box-label {
  color: red;
}

枠の色を設定していない一番上だけ文字色が赤になります(※ 添付画像)。

Cocoon のボックスは、現行バージョンと旧バージョンとがあります。現行バージョンは、.has-border-color で簡単に除外できます。

ただ、旧バージョンでは、枠の色がある時の共通の class がないため、属性セレクターで除外するのが最も簡単な気がします。尚、ブロックによって class が違い、cb-〇〇 は見出しボックスだけの class です。

This post was modified 2か月前 2回 by Akira

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

これは全ての見出し?の部分を黒色に変更するということでしょうか?

デフォルトとは、色を変えていないボックスなのですべて提示したスクリーンショットの一番上だけになります。
他のものはオプションで色を変更しているのでデフォルトではないという認識でした。


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

自分がテスト環境で使う限り、ダークエンジやスキン無しでも、見出しの部分が白背景(又は白っぽい)に白文字になってしまいます。

僕の環境では、ダークエンジのデフォルト色のボックスの文字色は黒色になっているようです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 
/*
  Skin Name: Simple‐Darkmode
  Description: 装飾は控えめかつダークモードに対応したシンプルスキン。OSやブラウザーがダークモード設定の場合はダークモードで表示されます。
  Skin URI:  https://hirosite.com/simple-darkmode/ 
  Author: Hirosite
  Author URI:  https://hirosite.com/ 
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/simple-darkmode.jpeg 
  Version: 1.3.7
  Priority: 9180101000
*/

Descriptionを追記して、Screenshot URIを追加、Priority番号を割り振ったので、お手数ですが次回のバージョンアップ時から上記のスキン情報を利用して更新していただいてよろしいでしょうか。

スクリーンショットの画像には、以下のページのアイキャッチ画像を利用させて頂きました。
https://hirosite.com/simple-darkmode/
また、スクリーンショット画像だけだと、そういうデザインのスキンなのかと思われるてもいけないと思って、説明を追記しておきました。


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

あとこれまで、Cocoonのスキンフォルダ名は半角小文字で統一しているので、よろしければで良いのですが、次回バージョンアップする際にはフォルダ名は「simple-darkmode」にしていただいてもよろしいでしょうか。

加えて、ファイルにバージョン名を付け加える必要がある場合は、ZIP 圧縮して「simple-darkmode.zip」となったところを名前の変更で「ver1-3-7-simple-darkmode.zip」という手順を取っていただくことは可能でしょうか。

Cocoon自体も上記命名規則で運用しているので、その方が利用者さんもわかりやすいかと思いまして。
※毎回フォルダ名が変わると、これまでCocoonと同様フォルダでアップデートしていた方は、何個もSkin フォルダを作ってしまうので。

何か問題があったり難しいようでしたら、そのままでも大丈夫です。
ただ、Cocoonに同梱する際にはフォルダ名は「simple-darkmode」にさせていただくと思います。


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

色変更をしていないマイクロバルーンボトムの吹き出し部分にスタイルの不具合があるようです。


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

デベロッパーツールでしかテストはしていませんが、ダークモードに以下のように追記すると修正できるのかも。

.micro-bottom.micro-balloon:after {
  border-bottom-color: var(--bg3);
}
This post was modified 2か月前 by わいひら

Hirosite 件のいいね!
返信引用
さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 420
さる子 - Twitter
 

不具合ではないし細かいところですが…

ダークモード時のシェアボタンの「コピー」と「コメント」ボタンが背景とほぼ同化しています。

ボタンを今より少し薄めにするとライトモード、ダークモードどちらでも視認性が良くなると思います。

デフォルト(#333333)

 
ボタンを#666666に変えたもの

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

自分がテスト環境で使う限り、ダークエンジやスキン無しでも、見出しの部分が白背景(又は白っぽい)に白文字になってしまいます。

この原因は自分が枠の色を白で指定していたからでした。Akiraさんのコードを参考にして修正して起きました。

またわいひらさんが仰った不具合と、さる子さんが指摘して下さったボタン配色も修正して起きました。

皆さんご指摘ありがとうございます。


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

@yhira

フォルダー名を変更するのに問題はないの、スキン情報の更新と一緒にフォルダー名も最新バージョン(ver1.3.8)で更新しました。

ただ一点、例のアイキャッチを使って頂く事自体何も問題ないのですが、あの画像を作成したのが開発初期なので、あの画面だけでも一部デザインが変わってしまっています。

急ぐ必要は無いとは思いますが、もし変更した方が良さそうであれば、僕の方で同じような画像を作成します。


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

フォルダー名を変更するのに問題はないの、スキン情報の更新と一緒にフォルダー名も最新バージョン(ver1.3.8)で更新しました。

ありがとうございます!
フォルダごとアップデートできるので楽になりました。
当サイトのスキンもアップデートしておきました。

急ぐ必要は無いとは思いますが、もし変更した方が良さそうであれば、僕の方で同じような画像を作成します。

ご負担でないのであればよろしくお願いいたします。
ただ、ユーザーさんにおおよそのイメージが伝われば良いので、作るのに時間がかかるようであればそのままでも全然大丈夫です。


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

そしたら、もうしばらく動作確認してみて不具合がないようであれば、同梱した親テーマをバージョンアップできればと思います。
同梱した親テーマがアップデートされ次第、同梱のお礼として以下の内容のAmazon ギフト券をフォーラム登録のメールアドレス宛に送付させていただきます。
https://wp-cocoon.com/skin-make/

・新作スキン同梱:1回目→1万円
・色違い同梱:キーカラー対応ということで最大の4種類→1万2000円
・ダークスキン対応:1万円

ということで、32000円分のAmazon ギフト券送付を予定しています。


Hirosite 件のいいね!
返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 4年前
投稿: 830
 

SILKスキン開発者のろこです。

ページを拝見したところ、SILKのコードを参考にしていただいたとのこと、ありがとうございます。

https://hirosite.com/simple-darkmode/

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

ただ、SILK本体を含め、

https://dateqa.com/cocoon/

にて公開中のプログラムはすべてGPLとなっております。

最近SILKのライセンスに関するお問い合わせとその対応が増えているのもあり、該当箇所につきましてはGPLに従っていただくようよろしくお願いします。


Hirosite 件のいいね!
返信引用
Hirosite
(@hirosite)
Active Memberサイト
結合: 1年前
投稿: 19
Topic starter  
返信遅れました。申し訳ございません。
投稿者:: @yhira

同梱した親テーマがアップデートされ次第、同梱のお礼として以下の内容のAmazon ギフト券をフォーラム登録のメールアドレス宛に送付させていただきます。

ありがとうございます。せっかくなので買いたい物を買いたいと思います。

投稿者:: @yhira

ご負担でないのであればよろしくお願いいたします。
ただ、ユーザーさんにおおよそのイメージが伝われば良いので、作るのに時間がかかるようであればそのままでも全然大丈夫です。

では、後ほど作って送らせていただきますね。


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

@lococo ろこさん、わざわざご確認頂きありがとうございます。

「だたダークモードのスキンを作っても面白くない」と思っていた所、SILKの紹介ページを見て「これやってみたい!」と思い利用させて頂きました。本当にありがとうございます。

投稿者:: @lococo

最近SILKのライセンスに関するお問い合わせとその対応が増えているのもあり、該当箇所につきましてはGPLに従っていただくようよろしくお願いします。

僕が無知で申し訳ないのですが、GPLのライセンス自体「GPLライセンスを使って作ったプログラムはGPLになり、その旨を記載する」程度の知識しかなく、これ以上どのような事を行えば良いか分からずにいます。

とりあえずスキンの説明ページ( https://hirosite.com/simple-darkmode/ )にGPLライセンスである旨を記載しておきました。

これ以上必要な手順がありましたら、ご教授頂けると幸いです。よろしくお願いします。


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

@yhira 

作って先ほどスキンのimageフォルダーに入れておきました。お手数ですが、配布ページから再度落として頂き、その中をご確認下さい。( https://hirosite.com/simple-darkmode/
どれがいいのか分からないので、Webpとpngとjpegを2枚(画質の違い)入れておきました。適当に使うやつだけ使って頂ければ構わないです。

あと後ほどスキンのフォルダーからは削除するので、確認頂き使用し終わったらご連絡下さい。
(もちろん急がなくて大丈夫です。わいひらさんの都合のいい時にお願いします。)


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

画像作成していただきありがとうございます。
PNG画像を利用させていただきます。
スクショ画像を変更しておきました。
変更したスキン情報はこちら。

/*
  Skin Name: Simple‐Darkmode
  Description: 装飾は控えめかつダークモードに対応したシンプルスキン。OSやブラウザーがダークモード設定の場合はダークモードで表示されます。
  Skin URI:  https://hirosite.com/simple-darkmode/ 
  Author: Hirosite
  Author URI:  https://hirosite.com/ 
  Screenshot URI:  https://im-cocoon.net/wp-content/uploads/simple-darkmode.png 
  Version: 1.3.8
  Priority: 9180101000
*/

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

@yhira すぐにご対応頂きありがとうございます。

配布している方のデータは画像を削除して、スキン情報を更新しておきました。


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

質問させてください。
ダークモードではないとき当サイトのロゴがこのようになってしまいます。


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

これは、背景画像をセットしていないときこのような表示にするためかと思います。


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

そこで質問なんですが、.headerがあれば背景色が変わると思うのですが、.header .site-name-textも書いてある意図はなんでしょうか。
もしかしたらCocoon設定のオプション対策とかでしょうか(設定によりセレクタが変わる可能性もあるので)。もし関連するオプションがあれば教えていただければ幸いです。


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

スキンファイルの部分で言うと、スキンfunctions.phpファイルのこの部分の記述です。


返信引用
ろこ
(@lococo)
Prominent Memberサイト
結合: 4年前
投稿: 830
 

これ以上必要な手順がありましたら、ご教授頂けると幸いです。

https://licenses.opensource.jp/GPL-2.0/gpl/gpl.ja.html

https://www.gnu.org/licenses/gpl-howto.ja.html

GPLに関する具体的な手順は条件・制約を確認していただければと思います。

 

SILKのコードをどこまで使用されているのかは把握しておりませんが、各ファイル内で使用しているプログラムごとに著作権表示(無保証)を記載する形になります。


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

すみません。確認するのが遅くなりました。

投稿者:: @yhira

.headerがあれば背景色が変わると思うのですが、.header .site-name-textも書いてある意図はなんでしょうか。

このコードを書いたのがかなり前なので確証は持てませんが、わいひらさんのお考えの通り、背景画像無しの時に文字色が変わらなくてこのコードに辿り着いた記憶があります。

ただ今試してみると、.site-name-textのクラスだけで上手くいったので、それを別に分離して以下の通りにしました。

  .header{
    background-color: '.$color.';
    color: '.$text_color.';
  }
  .site-name-text{
    color: '.$text_color.';
  }

ただこの不具合の再現が出来なかったので、動作確認が出来ていません。アップロードしておいたので、お手数ですが、確認して頂いてもよろしいですか?

この状況を作るには、ただ背景画像とロゴを設定するだけじゃないんですかね?


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

@lococo ご回答頂きありがとうございます。

投稿者:: @lococo

各ファイル内で使用しているプログラムごとに著作権表示(無保証)を記載する形になります。

調べた限りプログラム側にも記載が必要そうだったので、ライセンスを記載したテキストファイルを追加しておきました。

そこでわいひらさんにお願いなのですが、もしこのファイルがCocoonに同梱するのに「必要ない」などの不都合がありましたら、削除して頂いてもよろしいでしょうか?

僕のサイトで配布してる間はそのまま追加しておこうと思います。


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

スキンをアップデートしたら表示が改善されました。
もしかしたら、僕の環境だけの問題だったのかもしれませんね^^;
修正いただきありがとうございます!


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

そこでわいひらさんにお願いなのですが、もしこのファイルがCocoonに同梱するのに「必要ない」などの不都合がありましたら、削除して頂いてもよろしいでしょうか?

「必要ない」ということはもちろんないのでそのまま同梱させていただきます。
僕も、ファイルの書式使わせてもらおうと思います。


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

今日、スキンの紹介記事を書いていて思ったのですが、もしよろしければ「ダークモード」対応でない「ダークスキン」も作っていただけないかなと思いました。
具体的に書くと、Simple‐Darkmodeの「ライトモード」のCSSを削除し通常環境でも「ダークモード」で表示される「ダーク(暗色・黒系)スキン」の作成です。
というのも、「ダークスキン」は、結構需要があって、今回の「Simple‐Darkmode」スキンも、非常に細かいところまで手の込んだ素晴らしいできなので、ダークモードだけのデザインで使用したい利用者さんも多いのではないかと思いました。
もし作成していただけるなら、作成工賃もお支払いできればと思っております(Simple‐Darkmodeの同梱報酬とまた別で)。
もし作成可能であれば、作成工賃がいかほどであればお受けいただけるか教えていただければ幸いです。

もし作成が大変なようであれば、ライセンスがGPLなので僕が作ってしまう(もちろんCopyright表記して)という手もあるのですが、作成が難しい場合は僕が作ってもよろしいでしょうか。
それくらい、Simple‐Darkmodeに"ダークだけデザイン"が無いのは非常にもったいないと思いました。

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

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

あと1点、不具合ではないのですが、カテゴリーウィジェットの左右の余白をもう少し増やしていただくことは可能でしょうか。
少し窮屈なような気がして。
もし、作者であるHirositeさんが意図的にそのようにデザインされているのであれば、尊重したいと思いますのでもちろんそのままでも大丈夫です。


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

というのも、「ダークスキン」は、結構需要があって、今回の「Simple‐Darkmode」スキンも、非常に細かいところまで手の込んだ素晴らしいできなので、ダークモードだけのデザインで使用したい利用者さんも多いのではないかと思いました。

そもそもはダークモードを追加するのが目的で、自動で切り替わるダークモードにユーザーが不満を抱かないように設計したこのデザインを評価して頂けるとはありがとうございます!

確かにダークモードのみにするのも頭のライトモードの変数指定部分を削除するだけですぐに作れそうですね。僕でよければわいひらさんの負担を増やさない為にも頑張ります。

投稿者:: @yhira

作成工賃もお支払いできればと思っております(Simple‐Darkmodeの同梱報酬とまた別で)。

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


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

あと1点、不具合ではないのですが、カテゴリーウィジェットの左右の余白をもう少し増やしていただくことは可能でしょうか。

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

ついでにmarginも少し拡大しておきました。これでもう少し見やすいかと思います。

This post was modified 2か月前 by Hirosite

返信引用
固定ページ 1 / 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をコピーしました