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

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

AMPページのGoogleフォトが小さ...
 
共有:
通知
すべてクリア

[解決済] AMPページのGoogleフォトが小さくなった

14 投稿
3 ユーザー
2 Likes
1,397 表示
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

わいひら様、いつも大変お世話になっております。

以前は、きちんと表示されていたのですが、先日から標記の件の通り、AMPページのGoogleフォトが小さく表示されてしまいました。

ちなみに、

https://sevenheaven.jp/ikumen/post-20?amp=1

このページは、Googleフォトの画像ではないので普通に表示されております。

何が原因わからずお手上げ状態です。

何か対応策などありましたらご検討いただけますと大変助かりますので、何卒よろしくお願い致します。

----------------------------------------------
サイト名:よんよんのイクメン日記
サイトURL: https://sevenheaven.jp/ikumen
ホームURL: https://sevenheaven.jp/ikumen
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.8.7
PHPバージョン:5.6.21
ブラウザ:Mozilla/5.0 (Windows NT 10.0; WOW64; rv:61.0) Gecko/20100101 Firefox/61.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:1.3.8.2
カテゴリ数:10
タグ数:52
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.2
Categories Images 2.5.3
Custom Field Template 2.3.7
Export to Text 2.4
Featured Image From URL 1.9.5
Flickr - Pick a Picture 1.2.6
Google XML Sitemaps 4.0.9
List category posts 0.78.1
Movable Type and TypePad Importer 0.4
Multisite Shared Sidebar 1.2
Network Latest Posts 3.7.1
Newpost Catch 1.3.6
Optimize Database after Deleting Revisions 4.7.2
Page Builder by SiteOrigin 2.6.7
Pixabay Images 2.14
Product CSV Import Export (BASIC) 1.2.3
Really Simple CSV Importer 1.3
Really Simple SSL 2.5.25
Recent Posts Widget Extended 0.9.9.7
Shortcodes Ultimate 5.0.4
Simple Tags 2.4.6
SiteOrigin Widgets Bundle 1.11.8
Smart Slider 3 3.2.14
WebSub/PubSubHubbub 3.0.0
Woocommerce CSV Import 3.1.4
Woo Import Export 1.0
WooSidebars 1.4.3
WordPress Popular Posts 4.2.0
WP-RSSImport 4.4.17
WP Canvas - Shortcodes 1.85
WP CSV Exporter 1.1.3
WP Masonry Layout 1.7
Wp Posts Carousel 1.3.6
----------------------------------------------


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

お疲れ様です。

AMPで画像の比率がおかしくなるのは画像にwidth・heightが入ってないからだと思います。

通常の画像でしたら以下が参考になるかも知れませんが、Googleフォトもおなじようにimgタグがあるのでしたら、以下をご確認頂けたらと思います。

amp時の画像サイズについて | Cocoonテーマに関する質問 | Cocoon フォーラム

大量にあると大変ですけどね…


   
わいひら reacted
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

かうたっく様、返信ありがとうございます。

私もググって調べたところ、AMPページでwidth、heightが入っていないせいだと思い、

https://sevenheaven.jp/ikumen/m20180801

上記の記事の画像にwidth、heightを入れてみました。

しかし、AMPページを見ると

max-width: 75px と勝手に変換されているのです。

ただ、以前は表示できていたのと、

テストサイトで他のテンプレートを使用したときは、問題無く表示されるので、質問させていただきました。

テストサイト https://sevenheaven.jp/bihada/test2/?amp=1

 

補足ですが、表示されなくなった流れの過程として、

  • cocoon-1.3.5.1使用、問題なし。
  • 画像圧縮プラグイン EWWW Image Optimize をインストールし使用。
  • cocoon高速化を行う。
  • その後、標記の件が発生。
  • 各種キャッシュ削除を行うが、改善せず。
  • 他テーマで検証するも、そちらでも発生。
  • 他テーマ削除、再インストール後、そのテーマでは改善。
  • cocoonテーマ削除し、cocoon-1.3.5.1を再インストールするも改善せず。
  • さらに最新のテーマをインストールするも改善できませんでした。

となっております。

自分でAMPページのwidth、height設定するのにはどうしたらいいのかわからないず、何か対応策などありましたらご検討いただけますと大変助かりますので、何卒よろしくお願い致します。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

ほんとですね。AMPになるとAMPのHTMLにスタイル属性が入ってしまうようですね。

style="width: 75px;"

src=" ttps://lh3.googleusercontent.com/8jjYUr5zuqV8pODNXVV18khOnNTr4LhzwBlMZ7yrXL0leH05n75huZyFtrynoAzgK41yLcqgaV26zf4w4dJiDVjjoMiOSX5j9OFZIgjRyYgBtDSyY9Ujy8XAEiT01QsO9Vot0GF_SQ=w699-h393"

外部のlh3.googleusercontent.comが出力してるっぽいと思いますけど、そのgoogleusercontent画像を自サイトに導入しては、ちょっとまずい感じですか?

そのような画像が膨大:大量にある感じでしょうか?

 

あと

以前は、きちんと表示されていたのですが、

以前はCocoonの以前ですか。それとも別テーマでプラグインを使用してのことでしょうか?

質問の意図はわいひらさんが分かれば良いって事です。


   
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

かうたっく様、返信ありがとうございます。

cocoon-1.3.5.1使用で、問題なく使えておりました。

先ほど記入しましたが、再度使えなくなった経緯を記載しておきます。

  • cocoon-1.3.5.1使用、問題なし。
  • 画像圧縮プラグイン EWWW Image Optimize をインストールし使用。
  • cocoon高速化を行う。
  • その後、標記の件が発生。
  • 各種キャッシュ削除を行うが、改善せず。
  • 他テーマで検証するも、そちらでも発生。
  • 他テーマ削除、再インストール後、そのテーマでは改善。
  • cocoonテーマ削除し、cocoon-1.3.5.1を再インストールするも改善せず。
  • さらに最新のテーマをインストールするも改善できませんでした。

 

また、画像を自サーバーに置くというのは、もともと、サイトを軽くするため、Googleフォトに画像を置いてましたこともあり、悩ましいところでもあります。

とりあえず、もう少し自分でも色々やってみます。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

すみません。

凄く丁寧に見てるかたと言った印象でしたが、色々考えてみているうちに、そこを忘れて書き込んでしまいました。ゴメンナサイです。


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

どうやら、アプリーチの画像対応用に追加したコードが良くなかったのかもしれません。
アプリーチでは、Googleフォトの画像も利用しているので以下の正規表現を利用していました。

googleusercontent\.com|

これが、通常のGoogleフォト画像にもヒットして、画像が縮小化されてしまったようです。
https://github.com/yhira/cocoon/commit/42b045cb6ae87a04a6b3234be81ae6764f24fa01

「アプリーチで使用されているアイコンURLがGoogleフォトを利用している人」よりも、「普通にGoogle フォトを利用している人」の方が圧倒的に多いと思うので、前者は除外するように変更しました。
修正版はこちら。
https://github.com/yhira/cocoon/archive/master.zip


   
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

かうたっく様、いつも返信ありがとうございます。

こちらこそ、長々と要点をまとめず書いてしまい、見にくかったと思います。

今後も何かありましたら、ご教授お願いします。


   
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

わいひら様、返信ありがとうございます。

修正されたテーマを再インストールしたところ、width、heightを設定している画像は、そのサイズで表示されるようになりました。

ありがとうございます。

ただし、以前は、特にwidth、heightを設定していなくても問題ありませんでしたが、今回の修正テーマでも、設定していない画像は、

width="300" height="300" sizes="(max-width: 300px)

このように変換されておりました。

とはいえ、width、heightを設定したほうが、今後のサイト構築にもいい影響が出ると思いますので、修正していきたいと思います。

 

お忙しい中、対応ありがとうございました。


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

ただし、以前は、特にwidth、heightを設定していなくても問題ありませんでしたが、今回の修正テーマでも、設定していない画像は、

width="300" height="300" sizes="(max-width: 300px)

このように変換されておりました。

それは以前からの仕様です。
外部の画像のサイズは取得できないので(できるけどすべて外部から取得していたら遅くなるので)。
AMPページで外部の画像を使用する場合は、基本として画像のwidth、heightを指定していただく方針は以前から変わっていません。


   
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

わいひら様、いつもお世話になっております。

他サイトの違うテーマと混同して、以前から使用できていたとの認識は、私の勘違いかもしれませんでした。申し訳ありませんでした。

色々お手数をおかけしてすみませんでした。今後もよろしくお願いします。

ありがとうございました。

 

 

 

 


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

他サイトの違うテーマとは、これと同じテーマでしょうか?
https://sevenheaven.jp/bihada/test2/?amp=1
このテーマだと、width, heightが設定されていない外部画像でも、画像の幅と高さを取得してAMPページではwidth, heightが自動挿入されるのでしょうか。
もしそうなら、無料テーマならソースコードを見てみようかなと思います。
一応テーマ名も教えていただければと思います。似たようなのがいくつかあるので。


   
stinger
(@stinger)
Eminent Member Registered
結合: 5年前
投稿: 20
Topic starter  

わいひら様、いつもお世話になっております。

https://sevenheaven.jp/bihada/test2/?amp=1

上記サイトのテーマは、LION MEDIA ですが、このテーマではありません。

Luxeritas でしたが、バージョンはわかりません。

ただ、今考えればampテストをすると、「robots.txt によってブロックされています」と表示されることもあったりと、とても不安定でしたので、何か不具合が出ていて、それで表示されていたのかなぁと思ったりします。


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

あ、そうなんですね。
Luxeritasですね。ありがとうございます。


   
共有:

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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