iMac Mojave(10.14.1) Safari(12.0.1)ではめっちゃカッコよく、アイキャッチ表示されています。

何故その様になっているのか分かりませんが

Chromeだと表示されずFirefoxだと表示されてますね

ソースを比較した感じだとLazyloadを使っているか使っていないかの違いみたいですが

原因までは分かりません(；・∀・)

こんにちは

私の環境ではChromeでもムッチャかっこいいアイキャッチが表示されますよ。

ただLazyLoadの機能で、表示されるまで数秒間ご提示いただいた画像ように表示されますけど。

気になるようでしたら、その機能を停止してみるのも良いかもしれません。

その場合エックスサーバーの高速化にあるXアクセラレータのキャッシュも削除する必要があるかもです。

ちょっと気になることがあるので、Cocoon 設定の高速化から HTML と CSS 、JavaScript の縮小化を無効にしていただけるでしょうか。

あと、もし子テーマの javascript.js に intersection-observer.js を追加されている場合には、削除されるとどうなるでしょうか。

おそらく、chan さんのそちらのサイトは、子テーマの javascript.js に intersection-observer.js を追加されているはず。私のブログで、そんなやり取りを以前しました。

Cocoon の Lazy Load 機能を有効にすると、全く同じものが読み込まれるので、二重の読み込みが不具合の原因になるかもしれません。

 TM_BBさん、サイトの確認ありがとうございます!

haineonsさん、Lazy Load機能を無効にすると表示されました。ソース確認ありがとうございます。

かうたっくさん、いつもありがとうございます。

windows7のPCでも、一瞬文字が出てから画像が表示されているのを確認出来ました。

Akiraさん、毎度お世話になっております。ご指示通り HTML と CSS 、JavaScript の縮小化を無効にしました。

javascript.jsを貼りつけたつもりなのですが、貼りついているでしょうか?

https://notepad.pw/778gl3g

確かに、Akiraさんが書いているように、子テーマのjavascript.jsにIntersectionObserverの記述があります。
https://chan-bike.com/wp-content/themes/cocoon-child-master/javascript.js

これを削除してみていただけますか。
また、上記カスタマイズを行った際に、同時に行ったカスタマイズがあれば、それも元に戻す必要はあるかもしれません。

今回の不具合の原因になったと思われるのが、子テーマの javascript.js の 4 行目です。この 4 行目が intersection-observer.js 。

この 4 行目に関しては、このようにご判断ください。

• Cocoon の Lazy Load 機能を有効にされる場合には、削除。または、先頭に // を追加しコメントアウト。
• Cocoon の Lazy Load 機能を無効にされる場合には、そのまま残す。

これで Lazy Load 機能を有効にしても、アイキャッチ画像はきちんと表示されると思います。また、トップページなどのスクロールアニメーションは、iOS でも動くはずです。

わいひらさん、コメントありがとうございます。

Akiraさん、お手数おかけします。

圧縮した部分でないと判断して、どの行をコメントアウトすれば良いでしょうか?

全部の箇所を試してみたのですが、windows10のpcでは変わらないです。

最新の投稿記事はアイキャッチ画像が表示されてます。

( function() {
const list = document.querySelectorAll( '.entry-card-wrap' );

const observer = new IntersectionObserver( function( entries ) {
entries.forEach( function( entry ) {

それと、コメントアウトしてしまうと一覧リストのアニメーションは動かなくなると理解してよろしいでしょうか?

と、いうか動かなくなりました。

その圧縮した部分が、4 行目です。

コメントアウトが必要なのは、コードを縮小し長い 1 行になっている、この 4 行目です。

「//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。」の真下に、!function(t,e){"use strict";function から始まり、IntersectionObserverEntry=n}(window,document); で終わっている、その 4 行目のみをコメントアウトします。

この 4 行目をコメントアウトしても、Cocoon の Lazy Load 機能を有効にされると、一覧リストのアニメーションは動きます。

一方、Cocoon の Lazy Load 機能を無効にされると、一覧リストのアニメーションは動かないため、4 行目のコメントアウトの解除が必要です。

Akiraさん、コメントありがとうございます。

• Cocoon の Lazy Load 機能を有効にされる場合には、削除。または、先頭に // を追加しコメントアウト。
• Cocoon の Lazy Load 機能を無効にされる場合には、そのまま残す。

つまり、どちらか一方を選択するしかないということですね。

ようやく理解出来ました。

一覧リストのアニメーション機能がとても気にいっているので、こちらを優先させることにします。

コメントを下さった、TM_BBさん、haineonsさん、かうたっくさん、わいひらさん、大変ありがとうございました<(_ _)>

つまり、どちらか一方を選択するしかないということですね。

ようやく理解出来ました。

一覧リストのアニメーション機能がとても気にいっているので、こちらを優先させることにします。

こちらに書かれたことが気になったので、念のため書いておきます。

Lazy Load 機能と一覧リストのアニメーションは併用できます。

その併用する方法が、「Cocoon の Lazy Load 機能を有効にされる場合には、削除。または、先頭に // を追加しコメントアウト。」です。

Akiraさん、コメントありがとうございます。

こちら、何度かトライしたのですが4行目をコメントアウトしてもwindows10のchromeではアイキャッチ画像が表示されなかったので、ダメなのかと思ってました。

私のやり方がどこか違うのかもしれないですね。

• Cocoon の Lazy Load 機能を有効
• 先頭に // を追加しコメントアウト

これだけなので、間違いようがないような気がするのですがダメなようです。

コメントアウトした行はちゃんと色が変わっているので間違いないと思うのですけど。

何か違う所があるのかも、しれないです。

また、不思議なのはこの投稿記事だけはアイキャッチ画像が表示されているのです。

その他の記事はアイキャッチ画像がでてないです。

https://chan-bike.com/whats-the-difference-between-handbuilt-machine-built-bicycle-wheels

私のやり方がどこか違うのかもしれないですね。

いえ、正しく修正されています。

それなのに、なぜか Windows 10 の Chrome でアイキャッチ画像が表示されないですね。

私のテスト環境に、chan さんのサイトの JavaScript をコピペし、同じテーマ設定にして Windows 10 で試してみました。

結果は、アイキャッチ画像はきちんと表示される、一覧リストのアニメーションは動く、Lazy Load もしっかりと動くと、不具合を再現できませんでした。

デベロッパーツールのコンソールにそれらしきエラーが出ていないので、申し訳ありませんがアイキャッチ画像が表示されない原因が分かりません。

悔しいですけど、chan さんのサイトでは Lazy Load を無効にされるしかないのかな。

しかも、なぜ Windows 10 の Chrome だけで不具合が出るかも分からない。ちなみに、Chromebook では、アイキャッチ画像は表示されています。

2つの記事を確認したら、アイキャッチはキッチリ出てますよ。私の環境では。ChromeWindows 10

https://chan-bike.com/whats-the-difference-between-handbuilt-machine-built-bicycle-wheels

https://gyazo.com/69449dd5351bf898dea03bbcf2475448

https://chan-bike.com/duotrap-setup

https://gyazo.com/5b9387c79581d8dd034f2bcf0617f40e

Akiraさん、お手数おかけします。

かうたっくさん、確認ありがとうございます。

表示されないwindows10は、娘のものでwindows10Home TOSHIBAのdynabookでRE73/TBE アニバーサリー仕様のものです。

変えたといえばssdで128GBしかなかったので、お立ち台で256GBにしたくらいです。

それ以外は、普段触らないので良く分からないです。

たちまち、このPCだけ不都合が出ているようなので、もう少し様子をみることにします。

こんにちは。

その違いがわかりました。Lazy Load がよみこまれてるか、そうでないかのようです。

表示されるページ

class="attachment-1068x601 size-1068x601 wp-post-image"

表示されないページ

https://chan-bike.com/duotrap-setup

class="attachment-575x430 size-575x430 wp-post-image lozad lozad-img"

質問

今はLazy Load の機能を有効にしてますか？

• 表示されるページは2018.12.12の更新になってます。

12日に更新した際、Lazy Load の機能を一時的にOFFにしてませんでしたか？

その場合

なんらかのブラウザキャッシュが残ってそうだかな。と思うのですが、エックスサーバーのサーバーパネルにある高速化。

3つありますけど、Xアクセラレータのキャッシュを削除を試すと今が有効であれば、Lazy Loadのclass属性が付くと思います。 lozad lozad-img

検証画面か、SearchConsoleURLの検証？検査？などなど…でHTMLを確認すれば分かると思います。

ただLazy Loadが読み込まれると表示されないようになる気もしたり、おそらくOFFにすれば表示されると思ったりです。※コチラの環境では表示されてます

⇧

なぜかが分かりません＾＾；

シークレットモードで確認して同じですよね？？

かうたっくさん、コメントありがとうございます。

やったこと

1. Xアクセラレータのキャッシュを削除を最初に　→　変わらず
2. Xアクセラレータの高速化をon (してませんでした)  →　変わらず
3. Xアクセラレータのキャッシュを削除を最初に　→　変わらず

かうたっくさんの質問に対する回答

• 12日に更新した際、Lazy Load の機能を一時的に多分OFFにしてました。
• 今はLazy Load の機能を有効にしてます。
• シークレットモードも一緒でした。

検証をすると、何故だかアイキャッチ画像が現れます。検証から戻ると又消えてます。

Lazy Load機能をoffにするとアイキャッチ画像は現れます。

Lazy Loadのclass属性は、アイキャッチが表示されない記事では検証しても見当たらないです(目が悪いだけかも。字がちいっちゃすぎて見えない!   ハズキルーペがいりそうです。)

追加です。

右側の人気記事の2・4・5・6位はアイキャッチ画像が出ました。

検証を押してみてみると、

class="attachment-x size-x wp-post-image lozad lozad-img"

と、なっていました。

よくわからないですね。

Xアクセラレータの高速化をon (してませんでした)

とりあえずOFFでも大丈夫です。と言うのは、どのキャッシュかが特定できないってことでです。※onにしていてもコチラの機能は簡単にキャッシュの削除は可能です。

Lazy Load機能をoffにするとアイキャッチ画像は現れます。

上記のoff上記で以下引用の通りでしょうか？

右側の人気記事の2・4・5・6位はアイキャッチ画像が出ました。

コチラは lozad lozad-imgがある状態。

であればキャッシュが影響している可能性がありそうですね。

Cocoon設定の高速化にあるブラウザキャッシュの設定もチェックを外せば、Cocoonのキャッシュは消えるはずです。

※Xアクセラレータの高速化をon にしている場合は、キャッシュの削除もお願いします。

まだあるんですが、

エックスサーバー、サーバーパネルの高速化『ブラウザキャッシュ』はonですか？これがonであればOFFに切り替えるのに、多少サーバー側で時間が必要です。※20分後くらいにはoffに切り替わってます。#かなりややこしい＾＾；

上記の状態ではない場合は、Lazy Load：on状態ではclass属性に lozad lozad-imgがある状態が正常です。ない状態は何かのキャッシュが残っている可能性もあるので

もううんざりするかもですけど…。キャッシュが無い状態：変更がキチンと反映された状態でご確認して、うまく表示されてれば良いんですが、どんな感じでしょうかね？

Lazy Loadのclass属性は、アイキャッチが表示されない記事では検証しても見当たらないです(目が悪いだけかも。字がちいっちゃすぎて見えない!   ハズキルーペがいりそうです。)

確かに目が疲れますよね。

検証画面にカーソルを置いた状態でcontrolキー ＋ プラス＋キーで字が大きくなるのでハズキルーペいらずカモです。お試しくださいね❦

現在の状況は

• Lazy Load：on状態
• Xアクセラレータの高速化をon
• Xアクセラレータのキャッシュを削除
• サーバーパネルの高速化『ブラウザキャッシュ』はoff
• cocoonの高速化のブラウザキャッシュの有効化のチェックを外した状態

この状態で、右側の人気記事の2・4・5・6位はアイキャッチ画像は出ます。

アイキャッチが出る記事も出ない記事もwp-post-image lozad lozad-img"がついています。

単純に

• Lazy Load：off

の状態にすると、wp-post-image　に変わります。当たり前ですよね。

ついでに、見ているwindows10のキャッシュも削除したのですが変わらずです。

• Xアクセラレータのキャッシュを削除
• cocoonの高速化のブラウザキャッシュの有効化のチェックを外した状態
• サーバーパネルの高速化『ブラウザキャッシュ』はoff

上記のキャッシュをクリアーしたことでやることはあってますか?

中々難しいです。現実にwindows10で見ている人にアイキャッチ画像がない状態だと変なので、素直にlazy loadをoffにするのが良いかもしれないですね。

最後のあがきとして、これをお試しになってはいかがでしょうか。たぶん解決しない気はしますが、これでダメなら Lazy Load を無効にされるのがいいと思います。

子テーマの javascript.js の 6 行目から 43 行目を、このように書き換えます。

(function() {
  const list = document.querySelectorAll('.entry-card-wrap');
  
  const observerEntry = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('list-animation');
      } else {
        entry.target.classList.remove('list-animation');
      }
    });
  }, {
    rootMargin: '40px 0px',
  });
  
  Array.prototype.forEach.call(list, function(card) {
    observerEntry.observe(card);
  });
})();

(function() {
  const sample = document.querySelectorAll('.sample');
  
  const observerSample = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add('sample-animation');
      } else {
        entry.target.classList.remove('sample-animation');
      }
    });
  });
  
  Array.prototype.forEach.call(sample, function(img) {
    observerSample.observe(img);
  });
})();

この状態で、右側の人気記事の2・4・5・6位はアイキャッチ画像は出ます。

アイキャッチが出る記事も出ない記事もwp-post-image lozad lozad-img"がついています。

Lazy Load機能の有無は関係なかったんですね。

Lazy Load機能を有効にしたい場合、カスタマイズをやめてみるとどうですか？

そのカスタマイズが反映するのは全ページですか？例えばトップページのみであれば、そこだけにカスタマイズを有効にするよう、固定ページのカスタムjs的な場所に入れて様子をみるなど…

どちらか選択するしかないのであれば、選ぶしかないかもしれないですね…

Akiraさん、コメントありがとうございます。

やってみたのですが、変わりませんでした。残念です。

かうたっくさん、ついに両方共だめになりました。

Lazy Load機能を有効にして、カスタマイズをコメントアウトしてもアイキャッチが出ない投稿記事が沢山あります。

Lazy Load機能を無効にすると、アイキャッチ画像が出ます。ただ、一覧のアニメーションはカスタマイズを止めているので出ません。

Lazy Load機能を無効にして、カスタマイズを有効にしても一覧のアニメーションも動かなくなりました(涙)

現在はLazy Load機能を有効にしてます。でも、アイキャッチが出ない記事があるので、こちらもoffにしたいです。

違うことをしたと言えば、サーバーパネルの高速化『ブラウザキャッシュ』はonにしたぐらいですが、これは今offにしてます。

そして、ついに投稿記事が一覧に出なくなりました。

最新の記事が一覧に表示されなくなりました。機材情報というカテゴリーには表示されてます。

https://chan-bike.com/category/bulgu/equipment-information

こっちのほうが問題で、これはもうこの表題の問題とは違ってきてるので、なおらなかったら違う表題で投稿しようと思います。

ご迷惑おかけしています。

現在、

• Lazy Load機能をoff
• xサーバーのXアクセラレータのキャッシュを削除

これで、windows10の記事一覧に最新記事が出ました。だいぶ時間がかかりましたけど。

windows7にも記事一覧に最新記事が出ました。

iphoneのサファリは履歴を削除すると出ました。

すべてのカスタマイズをoffにしていてもLazy Load機能をonにするとアイキャッチ画像が表示されない記事があるので、私の固有の環境だと理解してLazy Load機能はoffとしておきます。

かうたっくさん、xサーバーの高速化の技を二つ教えていただきありがとうございました。ハヅキルーペ機能も役にたってます!