----------------------------------------------
テーマ名：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
これでしばらく動作確認してみて、動作に問題なさそうなら同梱させていただければと思います。

「ふわっと追加」スキンは、他のスキンをベースにエフェクトを追加できるので、てがきノート(ブルーコーラル) スキンをベースに、Cocoon設定でサイト全体に適用させてみました。

使用したエフェクトは「ふわっと」です。

@lucklog さん

確認したのは、作成した独自スキンです。
子テーマのスキンCSSには、Skin Name、Version、Priorityしか定義していません。

●確認結果

指摘の通り、子テーマのスキンCSSに、Skin URIを定義しました。
表示スキン（ベース）に、スキン名が表示されることを確認しました。

●余談

スキン一覧の選択から、スキン名を取得し、表示スキン（ベース）一覧を作成。
要素labelから、スキンの説明（Description）を除いた、テキスト（スキン名）を取得したい。
その手段として、li.find('a').eq(0).textで、スキン名を取得。

少し考えましたが、スキン名だけをうまく取得する術が思いつかず。
本件は、本来の運用とは異なる為、説明マニュアルに前提条件を記せばよいかと。

一つ不具合を発見したので報告です。
当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。
https://wp-cocoon.com/

※一旦スキン設定を元に戻しました。

「てがきノート(ブルーコーラル) 」スキンオンリーだと不具合は出ないようなので、おそらく「ふわっと追加」スキン側の不具合ではないかと思います。

このトピックページのトップで試すとこんな感じです。

@yhira 

ご確認いただきありがとうございます！

また、不具合についてご指摘いただきありがとうございます！

投稿者:: @yhira

当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。

こちらの不具合の件、修正いたしました。

原因は下記と同じようでした。「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」を無効化する処理を行いました。

ダウンロードページにもアップしましたが、こちらにもスキンを添付させていただきます。

お手数をお掛けいたしますが、ご確認いただけますでしょうか？

どうぞよろしくお願いいたします。

@chu-ya 

Skin URIを定義して、ご確認いただきありがとうございます！

また、表示スキン（ベース）一覧の取得方法も考えてくださりありがとうございます！

投稿者:: @chu-ya

説明マニュアルに前提条件

こちらを対応させていただこうかと思ったときに、方法を思いついたので試してみてました。

先ほど、わいひらさんに添付させていただいたZIPファイルに対応済です。

■対応方法

要素labelと「.tooltip」よりスキンの説明を取得し、ラベルの方から説明部分のみ「replace」を使って除外するという対応を行いました。

テストでは上手くいきました。
お時間がありましたら、chu-ya さんの方でもお試しいただけますと有難いです。

どうぞよろしくお願いいたします。

@lucklog さん

●確認結果
Version: 1.0.1
表示スキン（ベース）に、スキン名が、正しく表示されることを確認しました。（図参照）

●余談
該当の要素（テキスト）を特定することだけを考えていました。
全体から不要なテキストを削除（label - tooltip）と言う発想に至らず。
良い勉強になりました、ありがとうございます。  

@chu-ya 

ご確認いただきまして、ありがとうございます。

投稿者:: @chu-ya

良い勉強になりました、ありがとうございます。  

そのように言っていただけて嬉しいです！

ご確認等お時間を使っていただきまして、本当にありがとうございます。

修正いただきありがとうございます！
不具合箇所の修正を確認いたしました。

現在当サイトは、以下の設定にしてあります。
これでまたしばらく動作確認させていただければと思います。

@yhira 

ご確認いただきましてありがとうございます！

投稿者:: @yhira

これでまたしばらく動作確認させていただければと思います。

どうぞよろしくお願いいたします。

昨日から見ている感じでは、他に不具合は見当たりませんでした。
よろしければ、次の次あたりのバージョン（v2.4.7）でスキンを同梱させていただいてよろしいでしょうか。
ただ、同梱は以下の注意点にご許可がいただけた場合になります。問題ありませんでしょうか。
https://wp-cocoon.com/skin-make/
主なものを簡単に言うと、ライセンスが100％GPLになるのと、修正が必要な場合はこちらで修正する場合もある等です。
※ダウンロードページにライセンスに関する記述があるので既知のこととは存じますが確認させていただければと。

@yhira 

投稿者:: @yhira

よろしければ、次の次あたりのバージョン（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ギフト券で送らせていただければと思います。

@yhira 

わいひらさん、詳しく調べていただき、ありがとうございます。

CDNで読み込んでいることもあり、確認を怠っておりました。失礼しました…。
僕の方でも改めてどちらのライセンスも確認しました。

たしかに、「animate.min.css」のライセンスが微妙なところですね。この「ふわっと追加」のスキンを使用する方にまでに倫理的な制限が掛かるというイメージでしょうか。

僕もGPLとしては問題ないように思います。

ややこしいスキンとなってしまい、申し訳ありません ? 

どうぞよろしくお願いいたします。

@yhira 

わいひら様

「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして（少し気になりまして）、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。

合わせて「animate.min.css」のCDN読み込み処理は削除しました。

フェイドインのスピード感や移動範囲（左からフェイドインの移動距離など）が若干変わるかとは思いますが、誤差程度だと思います。

修正後のスキンを添付させていただきましたので、ご確認いただけませんでしょうか？
※ダウンロードページには反映済みです

数日間スキンをご確認いただいているのに申し訳ありません…。

■確認した内容

各スキン（カラーバリエーションなどは除く）で「４．ヘッダー部分は上から、メインは左から、サイドは右からふわっと」の動作確認を行いました。

また、Chrome、Firefox、Edge、iPhoneSE(ver2)Safari で動作確認を行いました。

お手数をお掛けいたしますが、どうぞよろしくお願いいたします。

投稿者:: @lucklog

「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして（少し気になりまして）、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。

お気を使わせてしまい申しわけありません。
テーマライセンスのGPL的には大丈夫そうだったので、大丈夫と思ってはいました。
ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます！
僕も今回、Hippocratic Licenseというのは初めて知ったので「こういうライセンスもあるんだな」と改めて勉強になりました。

最新版を当サイトに適用しておきました。
動作もすべて確認してみました。
以前の動作をはっきりと覚えているわけではないですが、タイミングが少し早くなったような感じで、個人的には今の方が好きです。
もし以前と全く同じ動作タイミングだったら申し訳ない^^;

@yhira 

とんでもありません！僕自身も気になりましたので^^;

僕もHippocratic Licenseに関しては初めて知りました。わいひらさんに、ご指摘いただいて僕も勉強になりました。

投稿者:: @yhira

ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます！

そのように仰っていただけて良かったです！

また、最新版の適応ありがとうございます！

投稿者:: @yhira

個人的には今の方が好きです

タイミングは不自然ではないように調整しましたので、以前とは異なっていると思います。

このように仰っていただけて嬉しいです ? 

投稿者:: @lucklog

タイミングは不自然ではないように調整しましたので、以前とは異なっていると思います。

だったらよかったです ? 
完全にタイミングは現在の方が好みです。

ここしばらく動作確認してみて、外観は問題なかったんですが、エディタースタイルに不具合があるかもしれません。

例えばアイコンボックスのエディター上でのスタイルが「ふわっと追加」スキンだと添付画像のように表示されるようです。
何か心当たりなどありますでしょうか。ないようでした私も確認してみます。
※添付画像はブロックエディタークラシックブロックの表示。

添付画像のページはこちら。
https://wp-cocoon.com/cocoon-custom/

元のスキン「てがきノート(ブルーコーラル) 」だけだと以下のように正常に表示されます。

アイコンボックスブロックだとこんな感じです。

「てがきノート(ブルーコーラル) 」オンリーのアイコンボックスブロック。

@yhira 

不具合のご指摘ありがとうございます！

調査したところ、プログラムにミスがありました。失礼いたしました。

修正しましたので、添付させていただきます。
※ダウンロードページにも反映済み

■PGミス詳細

「add_filter('cocoon_gutenberg_stylesheets', [$this, 'cocoon_gutenberg_stylesheets'], 1);」によって、選択されたスキンのエディタスタイルの読み込みをしているのですが、

メソッド「cocoon_gutenberg_stylesheets」内で処理を加えたスタイルをリターンしていませんでした。
※他のメソッドも同じ点をチェックしましたが、他は問題ありませんでした

お手数をお掛けいたしますが、ご確認の程よろしくお願いいたします。

修正いただきありがとうございます！
不具合箇所のスタイルが問題なく適用されているのを確認致しました。
プロジェクトとサイトに適用しておきました。

@yhira 

ご確認いただきありがとうございます！
良かったです！また、適応の方もありがとうございます。

Cocoon 2.4.7の公開の際にスキンを同梱させていただきました。
https://wp-cocoon.com/2-4-7/
同梱させていただき、ありがとうございます。

同梱料として、わずかではありますが、当フォーラムに登録されたメールアドレス宛に
10,000円分のAmazonギフト券を送付させていただきました。

・スキン新作1点（1回目）：10000円
＝10000円
同梱料内訳
https://wp-cocoon.com/skin-make/

ご確認いただければ幸いです。

※念のためこちらにもメールと同様の文を書き込ませていただきます。ギフト券もしくはメールが届いていない場合はご連絡ください。

@yhira 

わいひら様

同梱いただきありがとうございます！嬉しい限りです！

また、Amazonギフト券もありがとうございます！
同梱含め、確認できました。
※メールも確認できております

ご確認いただきありがとうございます！
加えて、同梱させていただきありがとうございます。

@yhira 

わいひら様

「ゆっくり色が変化」ページの修正ありがとうございました。

今回はスキン「ふわっと追加」に関して少しご相談があります。

いつでも大丈夫ですので、ご確認いただけますと幸いです。

スキンを利用してくださった方から、

・ふわっと追加を入れたら、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);
});

@yhira 

ご返信ありがとうございます！

「javascript.js」に処理を書きこむ形で対応してみます。

また、Akira様よりご教示いただいた方法で実装してみます。
対応の方できましたら、改めてご連絡させていただきます。

@akira 

Akira様

ブラウザへの負荷を考慮した方法をご教示いただきありがとうございます！

僕の勉強不足で、「Intersection Observer」で対応する方法を知りませんでした。
ご指摘いただいたとおり、ブラウザ負荷も軽減するのがベストなので、書いてくださったソース・参考URLを元に対応してみます。

まずは、お礼のみにて失礼いたします。

@yhira

@akira

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 ですが…

https://github.com/xserver-inc/cocoon/blob/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89/skins/raku-add-fadein/javascript.js#L3-L11

この CSS で解決する気がします。ヘッダーに関する Cocoon 設定に悪影響が出るかは確認していません。

.header-container {
  position: relative;
  z-index: 1;
}

[Cocoon設定]→[ヘッダー]→ヘッダーの固定「ヘッダーを固定する」

とした時、.header-containerが固定解除さると、potision:staticになってしまい。
z-indexが無効に。

@yhira さま

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

また、GitHubの親テーマアップデートもありがとうございます！

@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 でないといけないのでしょうか。

https://github.com/xserver-inc/cocoon/blob/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89/skins/raku-add-fadein/style.css#L25-L26

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

@yhira さま

アップデートいただき、ありがとうございます！