サイト内検索
スキン「ふわっと追加」の作成のご報告 | わいひらに連絡 | Cocoon フォーラム

Topic starter2022年6月21日 15:47
わいひら様
初めまして、らくと申します。
今回、Cocoonのスキン「ふわっと追加」を作成してみました。
スキンと呼んでいいのか微妙かもしれませんが…、ご報告させていただきます。
このスキンで出来ることはシンプルで、デザインは各スキンをそのまま使用させていただいて、そこにふわっと(フェイドイン)表示する動きを追加します。
スキン「ふわっと追加」を確認できるデモサイト、ダウンロードページは以下の通りです。
デモサイト:
https://test.lucklog.info/
※パスワード:test
ダウンロードページ(スキン詳細も書いております):
https://lucklog.info/cocoon-raku-fadein/
仕事でサイトを作成することが多いのですが、たまに「動きが欲しい」という方がいらっしゃいます。
ですので、もしかすると「スキンは気に入ってて、ふわっと出てくるともっと嬉しい」という方もいるのでは?と思い作成してみました。
もしお時間がありましたら、ご確認いただけますと幸いです!
変なスキンで恐縮ですが、どうぞよろしくお願いいたします。
This topic was modified 2週間前 2回 by らく
わいひら 件のいいね!
Topic starter2022年6月21日 18:51
chu-yasさん
アップロードしていただき、ありがとうございます。また、ご指摘いただきありがとうございます!
特に使用条件はありませんが、「表示スキン(ベース)」の一覧は「スキン一覧」から取得しております。その際に「aタグ」をキーにスキン名を取得しています。
そのため、各スキンの「style.css」に「Skin URI:」の設定が入っていることが前提となっていました。
■原因
chu-yasさんの添付画像を確認したところ、独自スキンかと思います。
またスキン一覧を見ると、リンクとなっていないようですので、「style.css」に「Skin URI:」の設定はないのかなと思われます。
よって、取り急ぎの回答になってしまいますが、ご利用したいスキンの「style.css」の最初のコメント部分に添付画像のようにダミーで構いませんので「Skin URI: https:// 」の1行を加えてからお試しいただけますでしょうか?
■「表示スキン(ベース)」の一覧について
「表示スキン(ベース)」の一覧の取得に関しては、別の方法も検討してみますので、お待ちいただけますと幸いです。
※対応は明日になってしまうかと思います
どうぞよろしくお願いいたします。
2022年6月21日 19:38
スキンを作成していただきありがとうございます!
ローカル環境で動作テストしてみたところ、僕の環境では動作しているようでした。
試しに当サイトでもテスト的に適用してみました。
https://wp-cocoon.com/?theme-switch=raku-add-fadein
これでしばらく動作確認してみて、動作に問題なさそうなら同梱させていただければと思います。
2022年6月21日 19:48
「ふわっと追加」スキンは、他のスキンをベースにエフェクトを追加できるので、てがきノート(ブルーコーラル) スキンをベースに、Cocoon設定でサイト全体に適用させてみました。
使用したエフェクトは「ふわっと」です。
2022年6月21日 19:58
@lucklog さん
確認したのは、作成した独自スキンです。
子テーマのスキンCSSには、Skin Name、Version、Priorityしか定義していません。
●確認結果
指摘の通り、子テーマのスキンCSSに、Skin URIを定義しました。
表示スキン(ベース)に、スキン名が表示されることを確認しました。
●余談
スキン一覧の選択から、スキン名を取得し、表示スキン(ベース)一覧を作成。
要素labelから、スキンの説明(Description)を除いた、テキスト(スキン名)を取得したい。
その手段として、li.find('a').eq(0).textで、スキン名を取得。
少し考えましたが、スキン名だけをうまく取得する術が思いつかず。
本件は、本来の運用とは異なる為、説明マニュアルに前提条件を記せばよいかと。
2022年6月21日 20:00
一つ不具合を発見したので報告です。
当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。
https://wp-cocoon.com/
※一旦スキン設定を元に戻しました。
Topic starter2022年6月22日 10:07
ご確認いただきありがとうございます!
また、不具合についてご指摘いただきありがとうございます!
当サイトのトップページなどのグローバルメニューにおいて、サブメニューを表示させると、サブメニューがアピールエリア等の文字エリアの裏に隠れてしまうようです。
こちらの不具合の件、修正いたしました。
原因は下記と同じようでした。「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」を無効化する処理を行いました。
ダウンロードページにもアップしましたが、こちらにもスキンを添付させていただきます。
お手数をお掛けいたしますが、ご確認いただけますでしょうか?
どうぞよろしくお願いいたします。
わいひら 件のいいね!
Topic starter2022年6月22日 10:24
Skin URIを定義して、ご確認いただきありがとうございます!
また、表示スキン(ベース)一覧の取得方法も考えてくださりありがとうございます!
説明マニュアルに前提条件
こちらを対応させていただこうかと思ったときに、方法を思いついたので試してみてました。
先ほど、わいひらさんに添付させていただいたZIPファイルに対応済です。
■対応方法
要素labelと「.tooltip」よりスキンの説明を取得し、ラベルの方から説明部分のみ「replace」を使って除外するという対応を行いました。
テストでは上手くいきました。
お時間がありましたら、chu-ya さんの方でもお試しいただけますと有難いです。
どうぞよろしくお願いいたします。
Topic starter2022年6月22日 13:36
ご確認いただきまして、ありがとうございます。
良い勉強になりました、ありがとうございます。
そのように言っていただけて嬉しいです!
ご確認等お時間を使っていただきまして、本当にありがとうございます。
Topic starter2022年6月23日 06:24
2022年6月23日 20:43
昨日から見ている感じでは、他に不具合は見当たりませんでした。
よろしければ、次の次あたりのバージョン(v2.4.7)でスキンを同梱させていただいてよろしいでしょうか。
ただ、同梱は以下の注意点にご許可がいただけた場合になります。問題ありませんでしょうか。
https://wp-cocoon.com/skin-make/
主なものを簡単に言うと、ライセンスが100%GPLになるのと、修正が必要な場合はこちらで修正する場合もある等です。
※ダウンロードページにライセンスに関する記述があるので既知のこととは存じますが確認させていただければと。
Topic starter2022年6月24日 08:43
よろしければ、次の次あたりのバージョン(v2.4.7)でスキンを同梱させていただいてよろしいでしょうか。
ありがとうございます!そのように仰っていただき、たいへん嬉しいです!
同梱に関する注意点、問題ありません。
ただ、少し心配な点があります。
■少し心配な点
GPLになることを考慮し、「jquery.inview.min.js」「animate.min.css」の2件はCDNで外部ファイルを読み込む形にしました。
上記含め、その他の点に関しても、GPLを確認し問題ないという認識です。
ただ、そこまでライセンスに関して詳しくはないので、不備な点等何かお気づきの点がありましたら、ご教示いただけますと幸いです。
上記心配な点が問題ないようでしたら、同梱はたいへん有難いお話ですので、ぜひお願いできればと思います!
お手数をお掛けいたしますが、どうぞよろしくお願いいたします。
This post was modified 2週間前 2回 by らく
2022年6月24日 20:17
「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ギフト券で送らせていただければと思います。
This post was modified 2週間前 by わいひら
Topic starter2022年6月25日 09:02
わいひら様
「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして(少し気になりまして)、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。
合わせて「animate.min.css」のCDN読み込み処理は削除しました。
フェイドインのスピード感や移動範囲(左からフェイドインの移動距離など)が若干変わるかとは思いますが、誤差程度だと思います。
修正後のスキンを添付させていただきましたので、ご確認いただけませんでしょうか?
※ダウンロードページには反映済みです
数日間スキンをご確認いただいているのに申し訳ありません…。
■確認した内容
各スキン(カラーバリエーションなどは除く)で「4.ヘッダー部分は上から、メインは左から、サイドは右からふわっと」の動作確認を行いました。
また、Chrome、Firefox、Edge、iPhoneSE(ver2)Safari で動作確認を行いました。
お手数をお掛けいたしますが、どうぞよろしくお願いいたします。
This post was modified 2週間前 by らく
わいひら 件のいいね!
2022年6月26日 19:50
「animate.min.css」のライセンスの件ですが、少しすっきりしないかと思いまして(少し気になりまして)、オリジナルのソースは見ずに独自で「keyframes.css」を作成し、イメージしていた動作を実現してみました。
お気を使わせてしまい申しわけありません。
テーマライセンスのGPL的には大丈夫そうだったので、大丈夫と思ってはいました。
ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます!
僕も今回、Hippocratic Licenseというのは初めて知ったので「こういうライセンスもあるんだな」と改めて勉強になりました。
最新版を当サイトに適用しておきました。
動作もすべて確認してみました。
以前の動作をはっきりと覚えているわけではないですが、タイミングが少し早くなったような感じで、個人的には今の方が好きです。
もし以前と全く同じ動作タイミングだったら申し訳ない^^;
Topic starter2022年6月27日 08:39
とんでもありません!僕自身も気になりましたので^^;
僕もHippocratic Licenseに関しては初めて知りました。わいひらさんに、ご指摘いただいて僕も勉強になりました。
ただ、今回の修正で完全に問題はなくなったと思います。ありがとうございます!
そのように仰っていただけて良かったです!
また、最新版の適応ありがとうございます!
個人的には今の方が好きです
タイミングは不自然ではないように調整しましたので、以前とは異なっていると思います。
このように仰っていただけて嬉しいです 😊
2022年6月29日 19:04
ここしばらく動作確認してみて、外観は問題なかったんですが、エディタースタイルに不具合があるかもしれません。
例えばアイコンボックスのエディター上でのスタイルが「ふわっと追加」スキンだと添付画像のように表示されるようです。
何か心当たりなどありますでしょうか。ないようでした私も確認してみます。
※添付画像はブロックエディタークラシックブロックの表示。
添付画像のページはこちら。
https://wp-cocoon.com/cocoon-custom/
This post was modified 1週間前 by わいひら
Topic starter2022年6月30日 10:02
不具合のご指摘ありがとうございます!
調査したところ、プログラムにミスがありました。失礼いたしました。
修正しましたので、添付させていただきます。
※ダウンロードページにも反映済み
■PGミス詳細
「add_filter('cocoon_gutenberg_stylesheets', [$this, 'cocoon_gutenberg_stylesheets'], 1);」によって、選択されたスキンのエディタスタイルの読み込みをしているのですが、
メソッド「cocoon_gutenberg_stylesheets」内で処理を加えたスタイルをリターンしていませんでした。
※他のメソッドも同じ点をチェックしましたが、他は問題ありませんでした
お手数をお掛けいたしますが、ご確認の程よろしくお願いいたします。
This post was modified 1週間前 3回 by らく
わいひら 件のいいね!