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時の画像サイズについて
 
共有:
通知
すべてクリア

[解決済] amp時の画像サイズについて

10 投稿
4 ユーザー
8 Likes
4,308 表示
(@ポスト)
New Member
結合: 5年前
投稿: 2
Topic starter  

現在Cocoonを使わせていただいており、

詰まったので質問させていただきます。

CocoonはAMP時に画像のwidth,heightサイズを指定していないと

必ず300x300の画像サイズになってしまいます。

これを元の画像サイズで表示することは可能でしょうか?

解決方法あれば教えていただけると助かります

よろしくおねがいします。


   
引用
(@lightning2014)
Eminent Member Registered
結合: 5年前
投稿: 38
 

これ 私も悩みどころでampに移行できない要因になってるのですが、基本的にampはwidthとheightを指定しないといけないらしいようです。

基本的にimgにwidthとheightを書き込めば、ampで正確に表示できると思います。

が、内部ファイルは頑張れば書き換えられるとしても、動的な外部ファイルは正直難しいですよね……

phpで読み込んでサイズ取得→タグに書き足し

とかなんですかね。

すみません。答えになってませんが

 


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

これを元の画像サイズで表示することは可能でしょうか?

例えばカエレバとか。画像のwidth・heightは元々入ってない仕様になるので、手作業で入れて対応していきます。

  • やり方

1.画像のサイズをチェック。管理画面上・サイト上・カエレバ画像選択などで可能です。

要素の検証(詳細は検索すれば大量に出てきます。)画面、F12キーなどで開き、矢印ボタンを青くし、画像サイズを確認

2.画像を選択

管理画面上で画像を選択。そのままテキストエディタに

imgタグ内に width="" height=""と入れる

<img src="画像のパスjpg" />
↓ ↓ ↓
<img src="画像のパスjpg" width="160" height="268.06" />

全ページ・またはスマホ検索流入が多いページなどから、この作業を繰り返しをすれば、AMPでもキレイに画像が表示されます。

※カエレバを使うたびに指定すれば可能ですよ。


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

カエレバの画像(もしもアフィリエイト経由)の比率:縦長なものが正方形になりオカシイ件。と同様環境でカエレバ画像が小さい件。

これは、外部サイトにある画像の縦横幅は取得できないからです(やろうと思えばできるけど、画像をすべて外部サーバーから取り寄せて計測するので速さを犠牲にするので実装していないと言った方が正しいです。相手サーバにも負荷をかけることになりますし)。
なので、外部サイト画像の場合で、width、height属性が取得できない場合は、300x300サイズになります(カエレバはそのサイズのものをCSSで縮小表示されていると思われる)。
例えば、カエレバで取得できるIMGタグはこれです。

<img src="https://images-fe.ssl-images-amazon.com/images/I/31-UZxlpDWL._SL160_.jpg" style="border: none;" />

これに対してwidth、height属性があれば、それを利用するのですが、無いのでどうしようもありません。対応策としては、自前で属性を入力するか、カエレバにwidth、height属性を入れるように対応してもらうしかないです。

引用元:外部サイトにある画像の縦横幅は取得できない理由|by:MR.わいひら

※タイトルはリンク内容に変更


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14365
 

今思いついたんですが、AMP設定項目に以下の設定項目を追加すればよいのかなと。

  • サイズを取得できない画像の横幅
  • サイズを取得できない画像の縦幅

これを設定できたからといって、サイズが取得できないのには変わりないですが、サイズが取得できない不満点は、ほとんどの場合カエレバとかだと思うので、ある程度合わせたサイズには出来るのかもしません。
こういった機能があるとどうでしょう?


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 
  • 『サイズを取得できない画像の縦幅・横幅の件。』

あれば凄く便利ですよね!

  • ただAmazonの画像とか『縦横の比率』を大事にしないとイケなかったように思うんですが??

昔の情報かもしれませんし、Amazonの規約で見たのか?どこで見たか?忘れました…

 

Amazonとかに掲載する企業さんや店舗さんなども指定通りのサイズ(基準?サイズの例があればそれにならって?)にアップしてくれるとありがたいんですけどねっ。※規格外な縦長画像など、見た事があったので^^;

  • 違反の部類でなかったばあい

この機能があれば便利そうですね!Amazon画像が縦長画像の場合は、手動でHTMLにwidth・heightを入れたものが、優先的に反映すればさらに嬉しいかもです。


   
わいひら reacted
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

https://affiliate.amazon.co.jp/help/topic/t15/a11

・商品画像を加工する。
商品画像の加工はおやめください。画像のサイズを変更される際には、元のサイズの縦横の比率を変更しないようにしてください。

・商品画像をダウンロードして利用する。
商品画像を保存後、任意のAmazonではないサーバーにアップしなおしての利用はできません。Amazonが提供している商品画像URLを指定する形でご利用ください

・Amazon.co.jpでキャプチャした画像を使用する。
Amazon.co.jpでの商品画像は随時変更されることがありますので、キャプチャした画像は使用しないでください。

Amazonアソシエイトのヘルプでありました。注意点としてお願いされてるようです。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14365
 

AMPでサイズを取得できない画像サイズを設定できたとしても、現在の仕様でもどっちでもダメっぽいですね。
どうしたものか…。


   
返信引用
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14365
 

Amazon APIでは画像サイズも返却されるみたいなので、やはりサービス側に対応してもらった方が確実かもしれません。

Amazon Product Advertising APIで返却されたItemのXML構造


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

過去記事はやっぱり自力ですね・・

追記編集:

万が一採用され、実装された場合。

自力でwidth・heightを入れるか再設定が必要っぽいかも?


   
返信引用
共有:

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

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

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

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

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

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

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

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