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

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

スキン「ふわっと追加」の作成のご報告
 
共有:
通知
すべてクリア

[解決済] スキン「ふわっと追加」の作成のご報告

50 投稿
4 ユーザー
31 Likes
822 表示
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

わいひら様

初めまして、らくと申します。

今回、Cocoonのスキン「ふわっと追加」を作成してみました。
スキンと呼んでいいのか微妙かもしれませんが…、ご報告させていただきます。

このスキンで出来ることはシンプルで、デザインは各スキンをそのまま使用させていただいて、そこにふわっと(フェイドイン)表示する動きを追加します。

スキン「ふわっと追加」を確認できるデモサイト、ダウンロードページは以下の通りです。

デモサイト:
https://test.lucklog.info/
※パスワード:test

ダウンロードページ(スキン詳細も書いております):
https://lucklog.info/cocoon-raku-fadein/

 

仕事でサイトを作成することが多いのですが、たまに「動きが欲しい」という方がいらっしゃいます。

ですので、もしかすると「スキンは気に入ってて、ふわっと出てくるともっと嬉しい」という方もいるのでは?と思い作成してみました。

 

もしお時間がありましたら、ご確認いただけますと幸いです!

変なスキンで恐縮ですが、どうぞよろしくお願いいたします。

This topic was modified 8か月前 2回 by らく

   
わいひら reacted
トピックタグ
chu-ya
(@chu-ya)
Noble Member Registered
結合: 10か月前
投稿: 744
 

----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.5.6
カテゴリ数:19
タグ数:140
ユーザー数:1
----------------------------------------------
早速、アップロードしてみました。
手順の通り「raku-add-fadein」を以下にアップロード。
/wp-content/themes/cocoon-child-master/

表示スキン(ベース)に子テーマのスキン一覧が表示されず。(図参照)
何か使用条件がありますか?


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

chu-yasさん

アップロードしていただき、ありがとうございます。また、ご指摘いただきありがとうございます!

 

特に使用条件はありませんが、「表示スキン(ベース)」の一覧は「スキン一覧」から取得しております。その際に「aタグ」をキーにスキン名を取得しています。

 

そのため、各スキンの「style.css」に「Skin URI:」の設定が入っていることが前提となっていました。

 

■原因

chu-yasさんの添付画像を確認したところ、独自スキンかと思います。

またスキン一覧を見ると、リンクとなっていないようですので、「style.css」に「Skin URI:」の設定はないのかなと思われます。

よって、取り急ぎの回答になってしまいますが、ご利用したいスキンの「style.css」の最初のコメント部分に添付画像のようにダミーで構いませんので「Skin URI: https:// 」の1行を加えてからお試しいただけますでしょうか?

 

■「表示スキン(ベース)」の一覧について

表示スキン(ベース)」の一覧の取得に関しては、別の方法も検討してみますので、お待ちいただけますと幸いです。
※対応は明日になってしまうかと思います

 

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

This post was modified 8か月前 by らく

   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

スキンを作成していただきありがとうございます!
ローカル環境で動作テストしてみたところ、僕の環境では動作しているようでした。

試しに当サイトでもテスト的に適用してみました。
https://wp-cocoon.com/?theme-switch=raku-add-fadein
これでしばらく動作確認してみて、動作に問題なさそうなら同梱させていただければと思います。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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

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


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 10か月前
投稿: 744
 

@lucklog さん

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

●確認結果

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

●余談

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@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」を無効化する処理を行いました。

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

 

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

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


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@chu-ya 

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

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

投稿者:: @chu-ya

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

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

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

 

■対応方法

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

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

 

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


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 10か月前
投稿: 744
 

@lucklog さん

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

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


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@chu-ya 

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

投稿者:: @chu-ya

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

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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

投稿者:: @yhira

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

投稿者:: @yhira

よろしければ、次の次あたりのバージョン(v2.4.7)でスキンを同梱させていただいてよろしいでしょうか。

ありがとうございます!そのように仰っていただき、たいへん嬉しいです!

同梱に関する注意点、問題ありません。
ただ、少し心配な点があります。

 

■少し心配な点

GPLになることを考慮し、「jquery.inview.min.js」「animate.min.css」の2件はCDNで外部ファイルを読み込む形にしました。

上記含め、その他の点に関しても、GPLを確認し問題ないという認識です。
ただ、そこまでライセンスに関して詳しくはないので、不備な点等何かお気づきの点がありましたら、ご教示いただけますと幸いです。

 

上記心配な点が問題ないようでしたら、同梱はたいへん有難いお話ですので、ぜひお願いできればと思います!

 

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

This post was modified 8か月前 2回 by らく

   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

「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ギフト券で送らせていただければと思います。


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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

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

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

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

 

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

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


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

わいひら様

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

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

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

 

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

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

 

■確認した内容

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

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

 

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

This post was modified 8か月前 by らく

   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 
投稿者:: @lucklog

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

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

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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

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

 

投稿者:: @yhira

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

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

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

 

投稿者:: @yhira

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

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

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 
投稿者:: @lucklog

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

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


   
らく reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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

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

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

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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

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

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

 

■PGミス詳細

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

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

 

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

This post was modified 7か月前 3回 by らく

   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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

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

・スキン新作1点(1回目):10000円
=10000円
同梱料内訳
https://wp-cocoon.com/skin-make/

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

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


   
らく reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

わいひら様

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

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

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


   
らく reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

わいひら様

 

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

 

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

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

 

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

・ふわっと追加を入れたら、Google Search Consoleの「ウェブに関する指標(LCPの問題)」で不良なURLが増えたような気が…

といったご質問をいただきました。

 

おそらくですが、「jquery.inview」を外部読み込みしているためかなと思います。

対策としては、「『jquery.inview』を「javascript.js」に書き込む」かなと思っています。

 

以前わいひら様に調べていただいた通り、

「jquery.inview」のライセンスは「WTFPL」のバージョン2です。

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」に書き込むことは可能なのかなと思っていますが、

わいひら様のご意見もいただければと思い、ご連絡させていただきました。

 

少しでも微妙そうであれば、無理にまで同封する必要はないかと思っています。

その場合は、対処法を記事に追記しようかと思っています。

※ただ、本当にこれで解決するかあまり自信はありません…不確実な内容で申し訳ありません

 

以上、お手数をお掛けして申し訳ありませんが、ご確認の程よろしくお願いいたします。

This post was modified 3週間前 by らく

   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

WTFPL(Do What The Fuck You Want To Public License)とは、パブリックドメインへの供与と同等条件のライセンスである。

ウィキペディアに上記のようにあるように、パブリックドメインの場合は、ほぼほぼ権利放棄に近いライセンスだと思うので、「javascript.js」に書き込むことに問題ないと僕も考えます。


   
らく reacted
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1224
 

ブラウザへの負荷も考慮すれば、スクロールイベントが使われている 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);
});

   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira 

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

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

 

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


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@akira 

Akira様

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

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

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


   
わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira

@akira

Akira様に教えていただいた方法で対応し、動作確認もできましたので、ご連絡させていただきます。

 

スキンをアップデートしていただける際の手順」を元に最新版をダウンロードし、「Intersection Observer」を用いて対応し直したものをテストページおよびダウンロードページへアップロードしました。

・テストページ
https://test.lucklog.info/
※Chrome、Edge、Firefox、Safari(iPhone)にて動作確認しました

・ダウンロードページ
https://lucklog.info/download-cocoon-raku-fadein/

本メッセージにも「対応後のスキンのzipファイル」を添付させていただきましたが、別途メールでお送りした方がよろしいでしょうか?

 

今回、お二方ともご教示いただき本当にありがとうございます!
たいへん勉強になりました。

 

以上、ご確認の程よろしくお願いいたします。

This post was modified 3週間前 by らく

   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

改良していただきありがとうございます!
僕の開発環境で確認してみたところ、ふわっとのエフェクト全てで正常に動作しているの確認いたしました。
最新版のスキンでGitHubの親テーマアップデートしておきました。
https://github.com/xserver-inc/cocoon/commit/dcb65f3bf7e6de4f8a3eec93966b9f34d33e5d89


   
らく reacted
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1224
 

そう言えば、以下の部分に関する 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;
}

   
わいひら and らく reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 10か月前
投稿: 744
 

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

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

 


   
わいひら and らく reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira さま

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

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


   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@akira さん

ご提案ありがとうございます!

ただ、ご提案いただいた内容は、chu-yaさんが書いてくださったように、「z-indexが無効」になってしまうようです。Chromeのデベロッパーツールにて検証したところ、「z-indexが無効」になることが確認できました。

また、スキン作成時に「元々設定されているIDやclassに対して、あまりCSSを適応したくなかった」という意図がありました。
※今回だと「header-container」です

理由としては、下記の可能性をなるべく減らしたかったためです。
・自分では把握できていない既存のCSSとバッティングしてしまう
(出来る限り調べてはいましたが、念のため…)
・CSSの設定変更があった際、CSSがバッティングしてしまう

いろいろなご提案・ご指摘をいただきまして、ありがとうございます!
たいへん助かっておりますm(__)m

This post was modified 3週間前 2回 by らく

   
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1224
 

@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 の値をアニメーション後も維持する必要はない気はします。


   
らく and わいひら reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@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さんのおかげで無駄な処理を削除することができました。
ありがとうございます!

This post was modified 3週間前 2回 by らく

   
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira さん

度々申し訳ありません。

Akiraさんにご指摘いただいた箇所を修正し、動作確認もできましたので、ご連絡させていただきます。

先日アップロードしていただいたソースを元にテストページおよびダウンロードページへアップロードしました。

・テストページ
https://test.lucklog.info/
※Chrome、Edge、Firefox、Safari(iPhone)にて動作確認しました

・ダウンロードページ
https://lucklog.info/download-cocoon-raku-fadein/

前回同様、本メッセージにも「対応後のスキンのzipファイル」を添付させていただきました。

たいへんお手数をお掛けしますが、よろしければ、こちらもご確認いただけますと幸いです。
どうぞよろしくお願いいたします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14353
 

アップデートいただきありがとうございます。
Cocoonの親テーマ内のスキンもアップデートさせていただきました。
https://github.com/xserver-inc/cocoon/commit/701fd40191aaf90aaddae6c1ef3fc1e8f508877f


   
らく reacted
らく
(@lucklog)
Eminent Member Registered
結合: 8か月前
投稿: 29
Topic starter  

@yhira さま

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

This post was modified 3週間前 by らく

   
わいひら reacted
共有:

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

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

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

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

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

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

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

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