何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
わいひら様
初めまして、らくと申します。
今回、Cocoonのスキン「ふわっと追加」を作成してみました。
スキンと呼んでいいのか微妙かもしれませんが…、ご報告させていただきます。
このスキンで出来ることはシンプルで、デザインは各スキンをそのまま使用させていただいて、そこにふわっと（フェイドイン）表示する動きを追加します。
スキン「ふわっと追加」を確認できるデモサイト、ダウンロードページは以下の通りです。
デモサイト：
https://test.lucklog.info/
※パスワード：test
ダウンロードページ（スキン詳細も書いております）：
https://lucklog.info/cocoon-raku-fadein/
仕事でサイトを作成することが多いのですが、たまに「動きが欲しい」という方がいらっしゃいます。
ですので、もしかすると「スキンは気に入ってて、ふわっと出てくるともっと嬉しい」という方もいるのでは？と思い作成してみました。
もしお時間がありましたら、ご確認いただけますと幸いです！
変なスキンで恐縮ですが、どうぞよろしくお願いいたします。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.4.5.6
カテゴリ数：19
タグ数：140
ユーザー数：1
----------------------------------------------
早速、アップロードしてみました。
手順の通り「raku-add-fadein」を以下にアップロード。
/wp-content/themes/cocoon-child-master/
表示スキン（ベース）に子テーマのスキン一覧が表示されず。（図参照）
何か使用条件がありますか？
chu-yasさん
アップロードしていただき、ありがとうございます。また、ご指摘いただきありがとうございます！
特に使用条件はありませんが、「表示スキン（ベース）」の一覧は「スキン一覧」から取得しております。その際に「aタグ」をキーにスキン名を取得しています。
そのため、各スキンの「style.css」に「Skin URI:」の設定が入っていることが前提となっていました。
■原因
chu-yasさんの添付画像を確認したところ、独自スキンかと思います。
またスキン一覧を見ると、リンクとなっていないようですので、「style.css」に「Skin URI:」の設定はないのかなと思われます。
よって、取り急ぎの回答になってしまいますが、ご利用したいスキンの「style.css」の最初のコメント部分に添付画像のようにダミーで構いませんので「Skin URI: https:// 」の1行を加えてからお試しいただけますでしょうか？
■「表示スキン（ベース）」の一覧について
「表示スキン（ベース）」の一覧の取得に関しては、別の方法も検討してみますので、お待ちいただけますと幸いです。
※対応は明日になってしまうかと思います
どうぞよろしくお願いいたします。
スキンを作成していただきありがとうございます！
ローカル環境で動作テストしてみたところ、僕の環境では動作しているようでした。
試しに当サイトでもテスト的に適用してみました。
https://wp-cocoon.com/?theme-switch=raku-add-fadein
これでしばらく動作確認してみて、動作に問題なさそうなら同梱させていただければと思います。
@lucklog さん
確認したのは、作成した独自スキンです。
子テーマのスキンCSSには、Skin Name、Version、Priorityしか定義していません。
●確認結果
指摘の通り、子テーマのスキンCSSに、Skin URIを定義しました。
表示スキン（ベース）に、スキン名が表示されることを確認しました。
●余談
スキン一覧の選択から、スキン名を取得し、表示スキン（ベース）一覧を作成。
要素labelから、スキンの説明（Description）を除いた、テキスト（スキン名）を取得したい。
その手段として、li.find('a').eq(0).textで、スキン名を取得。
少し考えましたが、スキン名だけをうまく取得する術が思いつかず。
本件は、本来の運用とは異なる為、説明マニュアルに前提条件を記せばよいかと。
一つ不具合を発見したので報告です。
当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。
https://wp-cocoon.com/
※一旦スキン設定を元に戻しました。
ご確認いただきありがとうございます！
また、不具合についてご指摘いただきありがとうございます！
当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。
こちらの不具合の件、修正いたしました。
原因は下記と同じようでした。「animation-fill-mode」が設定されていると「z-index」が正常に機能しないようです。
https://stackoverflow.com/questions/26099421/css-animation-fill-mode-and-z-index-issue
ただ、ふわっと機能に「animation-fill-mode」の設定は必要なため、グローバルメニューの「li」「a」タグのホバー時に「header-container」の「animation-fill-mode」を無効化する処理を行いました。
ダウンロードページにもアップしましたが、こちらにもスキンを添付させていただきます。
お手数をお掛けいたしますが、ご確認いただけますでしょうか？
どうぞよろしくお願いいたします。
Skin URIを定義して、ご確認いただきありがとうございます！
また、表示スキン（ベース）一覧の取得方法も考えてくださりありがとうございます！
説明マニュアルに前提条件
こちらを対応させていただこうかと思ったときに、方法を思いついたので試してみてました。
先ほど、わいひらさんに添付させていただいたZIPファイルに対応済です。
■対応方法
要素labelと「.tooltip」よりスキンの説明を取得し、ラベルの方から説明部分のみ「replace」を使って除外するという対応を行いました。
テストでは上手くいきました。
お時間がありましたら、chu-ya さんの方でもお試しいただけますと有難いです。
どうぞよろしくお願いいたします。
ご確認いただきまして、ありがとうございます。
良い勉強になりました、ありがとうございます。
そのように言っていただけて嬉しいです！
ご確認等お時間を使っていただきまして、本当にありがとうございます。
昨日から見ている感じでは、他に不具合は見当たりませんでした。
よろしければ、次の次あたりのバージョン（v2.4.7）でスキンを同梱させていただいてよろしいでしょうか。
ただ、同梱は以下の注意点にご許可がいただけた場合になります。問題ありませんでしょうか。
https://wp-cocoon.com/skin-make/
主なものを簡単に言うと、ライセンスが100％GPLになるのと、修正が必要な場合はこちらで修正する場合もある等です。
※ダウンロードページにライセンスに関する記述があるので既知のこととは存じますが確認させていただければと。
よろしければ、次の次あたりのバージョン（v2.4.7）でスキンを同梱させていただいてよろしいでしょうか。
ありがとうございます！そのように仰っていただき、たいへん嬉しいです！
同梱に関する注意点、問題ありません。
ただ、少し心配な点があります。
■少し心配な点
GPLになることを考慮し、「jquery.inview.min.js」「animate.min.css」の2件はCDNで外部ファイルを読み込む形にしました。
上記含め、その他の点に関しても、GPLを確認し問題ないという認識です。
ただ、そこまでライセンスに関して詳しくはないので、不備な点等何かお気づきの点がありましたら、ご教示いただけますと幸いです。
上記心配な点が問題ないようでしたら、同梱はたいへん有難いお話ですので、ぜひお願いできればと思います！
お手数をお掛けいたしますが、どうぞよろしくお願いいたします。
「jquery.inview.min.js」はDO WHAT THE FUCK YOU WANT TO PUBLIC LICENSEで問題なさそう。
https://github.com/protonet/jquery.inview/blob/master/LICENSE
ただ、「animate.min.css」のHippocratic Licenseは、使用を制限するという点においてGPLとバッティングする部分はありそうですね。
https://animate.style/
倫理に反している者は使用してはいけないみたいなライセンスで、かなり主観的な部分を含むので判断が難しいところですね。
ただ、CDNとしたことで、Cocoonの配布ファイル内には含まれないので「プログラムの実行（使用）、コピー、配布（再配布）、研究、変更、改良する自由」は保たれるので、GPL的には大丈夫そう？？
僕も専門家ではないので、はっきりとしたことはわかりませんが多分大丈夫なように思います。
※CocoonのReadmeに注意書きは必要かも
v2.4.7以降で同梱させていただくと思います。
スキンファイルが同梱されたCocoonが公開された時点で同梱料をAmazonギフト券で送らせていただければと思います。
わいひら様
「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして（少し気になりまして）、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。
合わせて「animate.min.css」のCDN読み込み処理は削除しました。
フェイドインのスピード感や移動範囲（左からフェイドインの移動距離など）が若干変わるかとは思いますが、誤差程度だと思います。
修正後のスキンを添付させていただきましたので、ご確認いただけませんでしょうか？
※ダウンロードページには反映済みです
数日間スキンをご確認いただいているのに申し訳ありません…。
■確認した内容
各スキン（カラーバリエーションなどは除く）で「４．ヘッダー部分は上から、メインは左から、サイドは右からふわっと」の動作確認を行いました。
また、Chrome、Firefox、Edge、iPhoneSE(ver2)Safari で動作確認を行いました。
お手数をお掛けいたしますが、どうぞよろしくお願いいたします。
「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして（少し気になりまして）、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。
お気を使わせてしまい申しわけありません。
テーマライセンスのGPL的には大丈夫そうだったので、大丈夫と思ってはいました。
ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます！
僕も今回、Hippocratic Licenseというのは初めて知ったので「こういうライセンスもあるんだな」と改めて勉強になりました。
最新版を当サイトに適用しておきました。
動作もすべて確認してみました。
以前の動作をはっきりと覚えているわけではないですが、タイミングが少し早くなったような感じで、個人的には今の方が好きです。
もし以前と全く同じ動作タイミングだったら申し訳ない^^;
とんでもありません！僕自身も気になりましたので^^;
僕もHippocratic Licenseに関しては初めて知りました。わいひらさんに、ご指摘いただいて僕も勉強になりました。
ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます！
そのように仰っていただけて良かったです！
また、最新版の適応ありがとうございます！
個人的には今の方が好きです
タイミングは不自然ではないように調整しましたので、以前とは異なっていると思います。
このように仰っていただけて嬉しいです ?
タイミングは不自然ではないように調整しましたので、以前とは異なっていると思います。
だったらよかったです ?
完全にタイミングは現在の方が好みです。
ここしばらく動作確認してみて、外観は問題なかったんですが、エディタースタイルに不具合があるかもしれません。
例えばアイコンボックスのエディター上でのスタイルが「ふわっと追加」スキンだと添付画像のように表示されるようです。
何か心当たりなどありますでしょうか。ないようでした私も確認してみます。
※添付画像はブロックエディタークラシックブロックの表示。
添付画像のページはこちら。
https://wp-cocoon.com/cocoon-custom/
不具合のご指摘ありがとうございます！
調査したところ、プログラムにミスがありました。失礼いたしました。
修正しましたので、添付させていただきます。
※ダウンロードページにも反映済み
■PGミス詳細
「add_filter('cocoon_gutenberg_stylesheets', [$this, 'cocoon_gutenberg_stylesheets'], 1);」によって、選択されたスキンのエディタスタイルの読み込みをしているのですが、
メソッド「cocoon_gutenberg_stylesheets」内で処理を加えたスタイルをリターンしていませんでした。
※他のメソッドも同じ点をチェックしましたが、他は問題ありませんでした
お手数をお掛けいたしますが、ご確認の程よろしくお願いいたします。
Cocoon 2.4.7の公開の際にスキンを同梱させていただきました。
https://wp-cocoon.com/2-4-7/
同梱させていただき、ありがとうございます。
同梱料として、わずかではありますが、当フォーラムに登録されたメールアドレス宛に
10,000円分のAmazonギフト券を送付させていただきました。
・スキン新作1点（1回目）：10000円
＝10000円
同梱料内訳
https://wp-cocoon.com/skin-make/
ご確認いただければ幸いです。
※念のためこちらにもメールと同様の文を書き込ませていただきます。ギフト券もしくはメールが届いていない場合はご連絡ください。
わいひら様
「ゆっくり色が変化」ページの修正ありがとうございました。
今回はスキン「ふわっと追加」に関して少しご相談があります。
いつでも大丈夫ですので、ご確認いただけますと幸いです。
スキンを利用してくださった方から、
・ふわっと追加を入れたら、Google Search Consoleの「ウェブに関する指標（LCPの問題）」で不良なURLが増えたような気が…
といったご質問をいただきました。
おそらくですが、「jquery.inview」を外部読み込みしているためかなと思います。
対策としては、「『jquery.inview』を「javascript.js」に書き込む」かなと思っています。
以前わいひら様に調べていただいた通り、
「jquery.inview」のライセンスは「WTFPL」のバージョン２です。
https://github.com/protonet/jquery.inview/blob/master/LICENSE
「WTFPL」はかなり緩い上、
https://ja.wikipedia.org/wiki/WTFPL
（フリーソフトウェア財団により？）GPLと両立しそうなので、
https://www.gnu.org/licenses/license-list.html#WTFPL
「javascript.js」に書き込むことは可能なのかなと思っていますが、
わいひら様のご意見もいただければと思い、ご連絡させていただきました。
少しでも微妙そうであれば、無理にまで同封する必要はないかと思っています。
その場合は、対処法を記事に追記しようかと思っています。
※ただ、本当にこれで解決するかあまり自信はありません…不確実な内容で申し訳ありません
以上、お手数をお掛けして申し訳ありませんが、ご確認の程よろしくお願いいたします。
WTFPL（Do What The Fuck You Want To Public License）とは、パブリックドメインへの供与と同等条件のライセンスである。
ウィキペディアに上記のようにあるように、パブリックドメインの場合は、ほぼほぼ権利放棄に近いライセンスだと思うので、「javascript.js」に書き込むことに問題ないと僕も考えます。
ブラウザへの負荷も考慮すれば、スクロールイベントが使われている jquery.inview より Intersection Observer がいいように思えます。
例えば、fadein_type1 であれば、これだけの JavaScript で済みます。
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('raku_fadeIn');
observer.unobserve(entry.target);
}
});
});
const targets = document.querySelectorAll('#header-container, #main, #main > *, #main .article > *, #sidebar, #sidebar > *');
targets.forEach((target) => {
observer.observe(target);
});
Akira様に教えていただいた方法で対応し、動作確認もできましたので、ご連絡させていただきます。
「スキンをアップデートしていただける際の手順」を元に最新版をダウンロードし、「Intersection Observer」を用いて対応し直したものをテストページおよびダウンロードページへアップロードしました。
・テストページ
https://test.lucklog.info/
※Chrome、Edge、Firefox、Safari（iPhone）にて動作確認しました
・ダウンロードページ
https://lucklog.info/download-cocoon-raku-fadein/
本メッセージにも「対応後のスキンのzipファイル」を添付させていただきましたが、別途メールでお送りした方がよろしいでしょうか？
今回、お二方ともご教示いただき本当にありがとうございます！
たいへん勉強になりました。
以上、ご確認の程よろしくお願いいたします。
改良していただきありがとうございます！
僕の開発環境で確認してみたところ、ふわっとのエフェクト全てで正常に動作しているの確認いたしました。
最新版のスキンでGitHubの親テーマアップデートしておきました。
https://github.com/xserver-inc/cocoon/commit/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89
そう言えば、以下の部分に関する z-index ですが…
この CSS で解決する気がします。ヘッダーに関する Cocoon 設定に悪影響が出るかは確認していません。
.header-container {
position: relative;
z-index: 1;
}
@akira さん
ご提案ありがとうございます！
ただ、ご提案いただいた内容は、chu-yaさんが書いてくださったように、「z-indexが無効」になってしまうようです。Chromeのデベロッパーツールにて検証したところ、「z-indexが無効」になることが確認できました。
また、スキン作成時に「元々設定されているIDやclassに対して、あまりCSSを適応したくなかった」という意図がありました。
※今回だと「header-container」です
理由としては、下記の可能性をなるべく減らしたかったためです。
・自分では把握できていない既存のCSSとバッティングしてしまう
（出来る限り調べてはいましたが、念のため…）
・CSSの設定変更があった際、CSSがバッティングしてしまう
いろいろなご提案・ご指摘をいただきまして、ありがとうございます！
たいへん助かっておりますm(__)m
@lucklog さん
また、スキン作成時に「元々設定されているIDやclassに対して、あまりCSSを適応したくなかった」という意図がありました。
それであれば、CSS の指定は避けるべきですね。
ただ、1 つ疑問点があります。
animation-fill-mode は both でないといけないのでしょうか。
backwards であれば、animation-fill-mode を none にしたり、z-index を追加したりする必要はないと思います。ただ、both にされている理由が分かっていません。CSS を見る限り、@keyframes の to の値をアニメーション後も維持する必要はない気はします。
@akira さん
ご指摘ありがとうございます。
Akiraさんの仰るとおりでした。
実際に下記「both」を「backwards」に変更し、
https://github.com/xserver-inc/cocoon/blob/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89/skins/raku-add-fadein/style.css#L25-L26
下記2か所を削除し、
https://github.com/xserver-inc/cocoon/blob/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89/skins/raku-add-fadein/style.css#L13-L16
https://github.com/xserver-inc/cocoon/blob/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89/skins/raku-add-fadein/javascript.js#L3-L11
動作確認を行ったところ、問題ありませんでした。（ソースは、後ほどわいひらさんにご連絡する際に添付させていただきます）
https://test.lucklog.info/
※パスワード：test
当時も「animation-fill-modeの不具合」とは関係なく「backwards」を試した記憶があるのですが、その時はアニメーションがうまく動作せず「both」に変更することで動作したため、「both」にしていたと記憶しています。
ただ、「animation-fill-mode」とは違う設定でうまく動作していなかったのかもしれません。検証不足でした...。失礼しました。
Akiraさんのおかげで無駄な処理を削除することができました。
ありがとうございます！
@yhira さん
度々申し訳ありません。
Akiraさんにご指摘いただいた箇所を修正し、動作確認もできましたので、ご連絡させていただきます。
先日アップロードしていただいたソースを元にテストページおよびダウンロードページへアップロードしました。
・テストページ
https://test.lucklog.info/
※Chrome、Edge、Firefox、Safari（iPhone）にて動作確認しました
・ダウンロードページ
https://lucklog.info/download-cocoon-raku-fadein/
前回同様、本メッセージにも「対応後のスキンのzipファイル」を添付させていただきました。
たいへんお手数をお掛けしますが、よろしければ、こちらもご確認いただけますと幸いです。
どうぞよろしくお願いいたします。
アップデートいただきありがとうございます。
Cocoonの親テーマ内のスキンもアップデートさせていただきました。
https://github.com/xserver-inc/cocoon/commit/701fd40191aaf90aaddae6c1ef3fc1e8f508877f
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。