現在デフォルトスキンとして「 Fuwari -海松茶(みるちゃ)-」を適用中。

iPhoneでサイドバーの画像が表示されない | 不具合報告 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
iPhoneでサイドバーの画像が表示さ...
 
Share:

[解決済] iPhoneでサイドバーの画像が表示されない  

  RSS

kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月10日 17:53  

いつもお世話になっております。

iPhoneiPadでサイドバーの画像が、触る(スクロールする)まで表示されません。トップ、投稿ページとも同様の状態です。
AMPでは表示されています。

気がついたのは、1ヶ月以上前になります。

 

繰り返しになってしまいますが、サイドバーを開いても画像が表示されず、スクロールをしたときに表示されます。
触らなければ 画像は表示されないままスリーブで画面が暗くなります。

Cocoonと私のサイトがこのような状態です。
かうたっくさんと草村さんのサイトを確認してみると、表示されました。

 

●iPhoneでサイトバーの画像が表示されないサイト
https://wp-cocoon.com/

https://xn--w8jte276hx5vdnebu3f.com

●サイドバーの画像が表示されるサイト
https://bibabosi-rizumu.com/

https://web.monogusa-note.com/cocoon-breadcrumb-clone
(投稿記事のサイドバーに新着一覧があるのでそちらのURL)

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


未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5862
2019年2月10日 20:18  

申しわけないのですが、僕はiPhoneを持っていないので動作確認はできていません。

ただ、原因の切り分けのために一点確認させてください。
高速化設定のLazy Loadを無効にすると表示されますでしょうか?


がっきぃ
(@gackey-21)
Active Memberサイト
参加: 5か月 前
投稿: 18
2019年2月10日 20:56  

iPhoneで確認してみました。

●iPhoneでサイトバーの画像が表示されないサイト
https://wp-cocoon.com/

https://xn--w8jte276hx5vdnebu3f.com

Cocoonサイトは1分ほど待っても表示されませんでした。

kchanさんのサイト(?)は暫く待っても表示されませんでしたが、カルーセルが切り替わるタイミングでサイドバーの画像も表示されました。


わいひら 件のいいね!
kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月10日 21:04  

がっきいさん、わいひらさん
ありがとうございます。

Lazy Loadを無効すると最初から表示されました。

他のトピックでLazy Loadで画像が表示されないと質問しているのに、そこに気づかずにすみませんでした。


がっきぃ
(@gackey-21)
Active Memberサイト
参加: 5か月 前
投稿: 18
2019年2月10日 21:16  

ん〜。ただ私のサイトはLazy Load有効なのですが、サイドバーを開いて3〜5秒位で表示されるんですよね、、、

https://thx.jp


わいひら 件のいいね!
kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月10日 21:34  

ほんとですね。
がっきぃさんのサイトは、3秒くらいで表示されました。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 3013
2019年2月11日 02:13  

もし有効化しておきたいって事でしたら、高速化のLazy Loadを除外する□欄に以下を追記すれば表示されると思います。

size-thumb120

ただリサイズされた120pxの画像が使われた場所も除外されると思います。

  • トップなどのエントリーカード・次へ前へのページ送りナビ。
  • 記事下の関連記事。
  • あとどこだろ!?

ただkchanさんの設定で、この辺見ると使われてないようなので、多分?大丈夫かもです。

 

●サイドバーの画像が表示されるサイト

私はLazy Loadをoffにしてるので、表示される感じだと思います 🤗 


わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 8か月 前
投稿: 141
2019年2月11日 03:02  

IntersectionObserverがiOS Safariでは未実装みたいなので、
未実装ブラウザではスクロールとかリサイズとかのタイミングに画像位置を取得して画像をロードしているとか?かもしれませんね。

https://caniuse.com/#feat=intersectionobserver

確認するにも私には難しすぎてざっくりとした推測ですが… 😫


わいひら 件のいいね!
kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月11日 04:10  

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

size-thumb120

と入れたら表示されました!
1ヶ月以上表示されないなぁ…と思っていたので嬉しいです。

今は、一旦 追記を消しておきますね^^

 

草村さん
いつもありがとうございます。
くわしく調べてくださったのですね!

表示されるようになるといいのですが…

 

 


草村わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 8か月 前
投稿: 141
2019年2月12日 00:59  

実は私もLazyLoadを有効にするとiPhoneでサイドバーの画像が初見で表示されないのが気になっていたんですよね 😥 

スマホだとサイドバーが画面外の右の方に隠れている状態なので、試しに発火点が初期では左右20pxになっているところを

rootMargin: "500px 20px"

左右も500pxになるように変更してみました。

rootMargin: "500px"

私のブログでLazyLoadを有効にして試しているのですが、スクロールしなくても表示されるでしょうか?

https://web.monogusa-note.com/


わいひら 件のいいね!
kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月12日 01:35  

草村さん

表示されています!
スクロールしなくても、表示されてます^^


わいひら草村 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 8か月 前
投稿: 141
2019年2月12日 05:24  

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

恐らく他のIntersectionObserver未実装のブラウザでも開いた時から表示出来るようになってるかと思います。

とりあえず私がやった事ですが、子テーマのfunctions.phpにLazyLoad読み込み用のコードをコピペしてrootMarginの値を書き換えました。

https://github.com/yhira/cocoon/blob/master/lib/utils.php#L366-L373

function wp_enqueue_lazy_load(){
if (is_lazy_load_enable() && !is_login_page()) {
wp_enqueue_script( 'polyfill-js', get_template_directory_uri() . '/plugins/polyfill/intersection-observer.js', array(), false, true );
wp_enqueue_script( 'lazy-load-js', get_template_directory_uri() . '/plugins/lozad.js-master/dist/lozad.min.js', array('polyfill-js'), false, true );
$data = 'const observer = lozad(".lozad", {rootMargin: "500px",threshold: [0, 0.5, 1.0]});observer.observe();';
wp_add_inline_script( 'lazy-load-js', $data, 'after' ) ;
}
}

以前kchanさんはPHPはあまり触りたくないと仰っていたと思うので、現状はかうたっくさんの書き込みの除外設定が一番簡単な対応方法だと思います。

もしくは何か他の、もっとスマートな解決方法があったらいいのですが~…


わいひらAkira 件のいいね!
Akira
(@akira)
Reputable Memberサイト
参加: 1年 前
投稿: 332
2019年2月12日 17:54  

さすが、草村さん。これは、わいひらさんが修正される気がします。

もし、修正されるのなら、threshold: [0, 0.5, 1.0] の削除もされた方がいいかもしれません。

lazy load で使われている lozad.js は、交差を検出した要素に対しては監視を停止します(lozad.js の 57 行目から 69 行目)。

https://github.com/ApoorvSaxena/lozad.js/blob/master/src/lozad.js#L57

なので、threshold の 0.5 と 1.0 のタイミングではコールバックが呼び出されません。また、threshold のデフォルト値は 0 なので、0 だけの指定はいらない。ということで、この threshold の指定は不要かなと思います。


草村わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5862
2019年2月12日 20:01  

おお!草村さんありがとうございます!いいねを10個つけたい 🤩 
その部分については、思いもつきませんでした。
確かに、スライドインメニューは画面の右側に、20px以上はみ出して格納されているので、発火しないのも今言われてみれば、ありえますね。

草村さんとAkiraさんが書かれたことを参考に、修正してみました。
https://github.com/yhira/cocoon/commit/33b6f1bc43b22828dbe5e118d431ba3f59db77a6

当サイトにも適用してみましたので、よろしければiPhoneでご確認いただけると幸いです。


草村 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5862
2019年2月12日 20:02  

一応、修正版はこちらになります。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。


kchan
 kchan
(@kchan)
ゲスト
参加: 9か月 前
投稿: 51
2019年2月12日 21:32  

iPhone、iPadとも表示されています!
とてもいい感じです。
みなさん、スゴイ😊


わいひら草村 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 8か月 前
投稿: 141
2019年2月13日 13:05  

おかしな対処法じゃないか不安だったので安心しました!よかったです。

私の方でもiPhoneで確認したら、開いた時からちゃんと表示されていました。
修正ありがとうございます!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 5862
2019年2月13日 20:00  

皆様、解決策と動作確認をありがとうございます 🙂 
iPhoneノンホルダーの僕だけだったら、多分原因はわからなかったと思います。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:11ヶ月

「12ヶ月」「24ヶ月」「36ヶ月」契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年11ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:9ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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