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カスタマイズ依頼

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

スキン作成しました
 
共有:
通知
すべてクリア

[解決済] スキン作成しました

20 投稿
3 ユーザー
14 Reactions
2,356 表示
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

わいひら様いつもお世話になっております。

寄付特典のメールアドレス間違いの件ではご迷惑をおかけしました。

さて、早速ですがタイトルのとおり久しぶりにスキンを作成しましたのでお知らせします。

oneという名前のスキンです。

これは「PC1カラムでもスマホみたいにサイドバーを出せたらなー」という思いから作成しました。

特徴としては

  • PCでもモバイルフッターメニューを表示できる
  • ウィジェットエリアの追加
  • カスタマイザーでデザインを変更できる
  • キーカラー、背景色、文字色など自分の好きな色を設定できる
  • ダークスキンとしても使用できる

といったものです。

ダウンロードページURLは https://haiji-blog.com/cocoon/skin-one/ です。

Cocoon用に作って間もないサイトなのでスカスカですがご容赦ください。

もしよろしければぜひ同梱していただければと思います。


   
さる子 and はる reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

他のスキンとは違ったコンセプトのすてきなスキンを作成していただき、ありがとうございます!

試しに、当サイトに適用して試してみました。
https://wp-cocoon.com/?theme-switch=one

ただ、当サイトで動作確認してみたところ、いくつか不具合があるようです。
例えば、トップモバイルボタンを表示させていた場合は、添付画像のように表示されてしまうとか(詳しく見てないですがもし当サイト特有の問題でしたら申し訳ないです)。

こういった不具合に対応していただくことは、可能でしょうか。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

あと、暗色の背景となっているボックスで文字が見づらくなっている不具合もあるようです。
確認した限りでは、アイコンボックスとか、引用とか吹き出しとかで。
以下のページとかで不具合を確認できるかと思います。
https://wp-cocoon.com/layout/?theme-switch=one
https://wp-cocoon.com/cocoon-blocks-response-status/?theme-switch=one


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

あと、「トグル(アコーディオン)ボックス」が基本的に灰色系になってしまうようです。


   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

ご確認ありがとうございます!

このスキンはコクーン設定から背景色をダーク系(文字色を白系)にした時にカスタマイザーで「ダークスキン対応にする」というチェックボタンをチェックしてもらうことでbodyにis-dark-onというクラスを付与し、その場合アイコンボックスや吹き出しなどの背景を黒にする、という仕組みになっています。

そのカスタマイザーのチェックはデフォルトでチェックされた状態なのでアイコンボックスなどの背景が黒くなり、黒い文字が見にくくなったのだと思います。

本当はカスタマイザーの「ダークスキン対応にする」はデフォルトでチェックされない状態にしたかったのでそのようにしたつもりなんですが、

何故かチェックはされないんですがis-dark-onが付与されている状態になってしまい、とりあえずデフォルトでオンにした次第です。

カスタマイザーでチェックを外せばis-dark-onも消えるのは確認出来たのでいいかな?って思ってしまいました。

ちょっと認識が甘かったですね。

トグルが基本的に黒いのと、トップモバイルボタンの件はちょっと調整してみます!

 

デフォルトでチェックがされてないのにクラスが付与されてしまう件に関してはみなさんから意見やヒントを頂ければ助かります!

もちろん自分でも再度調べたりしますが、投げやりですいません。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

本当はカスタマイザーの「ダークスキン対応にする」はデフォルトでチェックされない状態にしたかったのでそのようにしたつもりなんですが、

何故かチェックはされないんですがis-dark-onが付与されている状態になってしまい、とりあえずデフォルトでオンにした次第です。

get_theme_mod の第 2 引数が true だからではないでしょうか。

if (get_theme_mod('checkbox_one4',true))

functions.php で気になった点が 3 つあります。

① 以下の部分ですが、何かをご参考にされましたか?

$content_color = get_site_background_color() ?: '#fff';

② rgb() の色が , で区切られていません。

$content_text_color = get_site_text_color() ?: 'rgb(66 66 66)';

③ 201 行目以降に何度かある else {} は不要だと思います。

else { }

   
わいひら reacted
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@akira 

ご確認ありがとうございます!

 

投稿者:: @akira

get_theme_mod の第 2 引数が true だからではないでしょうか。

if (get_theme_mod('checkbox_one4',true))

自分はtrueだとクラスが付与されてfalseだと付与されないのだと思ってましたが、ご指摘のとおりfalseにしたところ思っていた動作になりました。

$wp_customize->add_setting( 'checkbox_one4', array(
'default' => false,
'sanitize_callback' => 'one_sanitize_checkbox',
));

ここでデフォルトをfalseにしたらget_theme_modの第2引数もfalseにしないといけないってことなんですかね?

マイナス×マイナスみたいな?この考えが合っているかわかりませんが。

とりあえず、アドバイスのおかげで出来ました!ありがとうございます。

投稿者:: @akira

① 以下の部分ですが、何かをご参考にされましたか?

$content_color = get_site_background_color() ?: '#fff';

はい、Simple Darkmodeというスキンを参考にさせていただきました。

こちらに関してはその旨を明記しないといけないようですね。すみません、配慮が足りていませんでした。対処します。

投稿者:: @akira

② rgb() の色が , で区切られていません。

$content_text_color = get_site_text_color() ?: 'rgb(66 66 66)';
投稿者:: @akira

③ 201 行目以降に何度かある else {} は不要だと思います。

else { }

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

 

まだちょっと対処済みのをダウンロードページに用意出来ていませんので用意出来ましたらまたこちらへ書き込みます。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

修正ありがとうございます。
ダウンロードできるようになったらサイトにも適用して確認してみます。

あと1点、確認なんですがサイトで下にスクロールした際に、モバイルボトムメニューが少し見切れているのはこういう仕様でしょうか。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

haijiさんのサイトをよく見たら、ありますね。白で気づきませんでした ? 
仕様っぽいですね。すいません。


   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@yhira 

フッターモバイルボタンが見切れているのは仕様です ? 

カスタマイザーで「ダークスキン対応にする」にチェックを入れた場合のみそれも黒くなるのでそこまで目立たないかな?と思います。

あと、指摘を頂いた部分を修正しましたのでご確認いただければと思います。

https://haiji-blog.com/cocoon/skin-one/


   
わいひら reacted
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

サイトの問い合わせから指摘いただきましたが、Cocoonのスキン、SILKのコードも使用していてその旨を明記しないのはGPL違反とのことでしたので、その旨をoneのファイルとダウンロードページにも明記しておきました。

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

修正していただきありがとうございます!
https://wp-cocoon.com/cocoon-blocks-response-status/?theme-switch=one

当サイトの環境でも、デフォルトがライトカラーで適用されるようになりました。
次の次のバージョン(v2.3.9)あたりで同梱させていただこうと思います(現在はv2.3.7)。
同梱されたバージョンが公開された時点で、当フォーラムの登録メールアドレス宛にAmazonギフト券を送付させていただこうと思います。
同梱に関する詳細はこちら。
https://wp-cocoon.com/skin-make/


   
ごー reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

あと、紹介記事を書く際は、こちらのアイキャッチ画像を使用させていただいてよろしいでしょうか。
https://haiji-blog.com/cocoon/skin-one/


   
ごー reacted
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@yhira

投稿者:: @yhira

当サイトの環境でも、デフォルトがライトカラーで適用されるようになりました。

ご確認ありがとうございます!デフォルトがライトカラーで適用されてよかったです。

投稿者:: @yhira

あと、紹介記事を書く際は、こちらのアイキャッチ画像を使用させていただいてよろしいでしょうか。

はい、大丈夫です。

投稿者:: @yhira

次の次のバージョン(v2.3.9)あたりで同梱させていただこうと思います(現在はv2.3.7)。

ありがとうございます!楽しみに待っています。


   
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

すみません、何点か修正しましたのでダウンロードページから最新版をダウンロードお願いします。

  • 旧バージョン(?)のアイコンボックス等へのCSS適用漏れ
  • 端末がダークモードのときプロフィールボックスの背景が黒になる

等修正しました。

ダークモードの検証をしててそれを消すの忘れてました ?

お手数おかけしますがよろしくお願いします。

投稿者:: @yhira

同梱に関する詳細はこちら。
https://wp-cocoon.com/skin-make/

あと、上記の件も了解しております。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 
投稿者:: @haiji

すみません、何点か修正しましたのでダウンロードページから最新版をダウンロードお願いします。

ありがとうございます。
当サイトにも適用しておきました。

同梱されたバージョンが公開された際には、メールとともにこちらに書き込ませていただきます。


   
ごー reacted
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@yhira 

すみません、複数サイトを管理するのは難しいと感じたためスキンのダウンロードページを変更しました。

https://haiji-blog.com/cocoon-skin-one/

スキン内のstyle.css内の表記も変更し、いくつかの修正をしたバージョンをアップしております。

お手数おかけしますがご確認よろしくお願いします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

承知いたしました。
当サイトもアップデートしておきました。
書いた記事(下書き)もURLを修正しておきます。


   
ごー reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

Cocoon2.3.9を公開いたしましたので、スキンの同梱料をメールアドレス宛に送信させていただきました。
ご確認いただければ幸いです。


   
ごー reacted
ごー
(@go)
Eminent Member Registered
結合: 7年前
投稿: 23
トピックスターター  

@yhira 

アマゾンギフト券確認いたしました!

ありがとうございます!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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