サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022-07-25 23:21
こんにちは。
Cocoonのアイキャッチ画像はgif画像で登録できると思います。
しかし、gif画像は自動でプレビューされるため、重くなります。
そこで、「 https://github.com/ctrl-freaks/freezeframe.js/」こちらを導入し、ホバーしたgif画像のみ動かせるようにしました。
さらに、アイキャッチにこれらを導入するためには、アイキャッチ画像のclass（entry-card-thumb-image card-thumb-image wp-post-image）を「my_class_2 freezeframe-responsive」に置き換える必要があることが分かりました。
データファイルのどの部分を置き換えればいいか分かりません。
もしよろしければ、ご教示お願いいたします。
2022-07-26 01:32
BB.comさん
GIF動画（アニメーションGIF）ってことですね？
やってみましたが、以下のようなイメージでしょうか。
（マウスポインタ―が見づらいと思いますが。）
以下のページを参考にするとできました。
アニメーションGIFをマウスホバーやクリックで再生・停止できるようになるJavaScriptライブラリ「Freezeframe.js」
https://techmemo.biz/javascript/freezeframe/
https://techmemo.biz/javascript/freezeframe/
上記の、「ステップ1」と「ステップ3」でできるみたいです。
（「ステップ2」は必要なかったです。）
「ステップ3」の以下の部分。
特定のクラスのみに適用したい場合は、クラス名を指定してあげます。
このクラス名に「.eye-catch-image」を指定するだけで、私は上記のような動作でした。
【追記】
申し訳ないですが、フロントページのインデックスカードの確認を忘れました。
既にPCを使えない状態です。
2022-07-26 01:37
1 つ疑問点があります。
gif画像は自動でプレビューされるため、重くなります。
そこで、「 https://github.com/ctrl-freaks/freezeframe.js/」こちらを導入し、ホバーしたgif画像のみ動かせるようにしました。
とのことですが、Freezeframe.js を使っても GIF は自動で再生されます。
このライブラリは、最初は GIF を CSS で非表示にしておいて、代わりに canvas で GIF の静止画を表示しています。そして、ホバーなどをした際に GIF を CSS で表示して、代わりに canvas を非表示にします。ホバーした時だけ GIF が動くのではなく、ホバーしていない時も GIF は動いています。
公式のデモ の最初の画像をデベロッパーツールでご確認ください。<canvas> に opacity: 0 、<img> に opacity: 1 を指定すると GIF が動いているのが分かります。
Freezeframe.js は、ご要望に合っているでしょうか？
Topic starter
2022-07-26 22:41
2022-07-26 23:41
@bb-com さん
子テーマの tmp-user/head-insert.php に以下を追加するのが最も簡単なやり方です。
<script defer src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<script type="module">
new Freezeframe('.eye-catch-image[src$=".gif"]');
</script>
※ 非同期で JavaScript を読み込むようにしています。非同期での読み込みがお気に召さない場合は、defer と type="module" を削除してください。
class を変更するのではなく、Freezeframe.js にセレクターを指定します。指定するセレクターの書き方は、CSS と同じです。そのため、以下の書き方は…
.eye-catch-image[src$=".gif"]
class 属性に eye-catch-image があって、かつ src 属性の最後が .gif で終わる要素を指します。
※ アイキャッチ画像の上にカテゴリー名を表示している場合は、以下の CSS が必要かもしれません。
.eye-catch .cat-label {
z-index: 1;
}
Freezeframe.jsを使用しても軽くならないのですね。
形式を GIF ではなく WebP にすれば、サイズ（容量）が小さくなると思います。例えば、以下のオンラインツールは、GIF を WebP に変換できます。
2022-07-27 15:42
@bb-com さん
申し訳ありません。私が書いたセレクターでは、ご希望に沿わないかもしれません。
投稿ページのアイキャッチ画像であれば、先に書いたセレクターで指定できます。
new Freezeframe('.eye-catch-image[src$=".gif"]');
ただ、最初にこのようにお書きになっているのを見逃していました。
class（entry-card-thumb-image card-thumb-image wp-post-image）
この class があるのは、カテゴリーページなどの記事一覧のサムネイル画像です。もし、サムネイル画像であれば、以下のセレクターで指定できます。
new Freezeframe('.entry-card-thumb-image[src$=".gif"]');
もし、アイキャッチ画像もサムネイル画像も対象にされる場合は、以下のセレクターで指定できます。
new Freezeframe(':is(.entry-card-thumb-image, .eye-catch-image)[src$=".gif"]');
対象とされたい画像のセレクターをご指定ください。
わいひら reacted
Topic starter
2022-07-27 21:47
@akira 様
ご指導、ありがとうございます。
アイキャッチ画像もサムネイル画像も、両方対象にしたいです。
以下のコードを子テーマの tmp-user/head-insert.phpにいれればよろしいのでしょうか？
new Freezeframe(':is(.entry-card-thumb-image, .eye-catch-image)[src$=".gif"]');
2022-07-27 22:30
@bb-com さん
子テーマの tmp-user/head-insert.php に追加する全文は以下のものです。
<script defer src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<script type="module">
new Freezeframe(':is(.entry-card-thumb-image, .eye-catch-image)[src$=".gif"]');
</script>
アイキャッチ画像やサムネイル画像の上にカテゴリーを表示されている場合は、ホバーしていない時にカテゴリーが見えなくなります。カテゴリーを表示されている場合は、以下の CSS を子テーマの style.css に追加します。
.cat-label {
z-index: 1;
}
また、Freezeframe.js を非同期で読み込んでいるため、サイトの表示速度によってはページを表示した際に動いている GIF が一瞬見えるかもしれません。その場合は以下の CSS を子テーマの style.css に追加すれば、動く GIF が一瞬見えることがなくなります。
:is(.entry-card-thumb-image, .eye-catch-image)[src$=".gif"] {
opacity: 0;
}
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。