A8ネットから楽天のコードを入れた画像の大きさが変わってしまいます。

imgタグに入っているsrcsetとsizesを取り除けばよいかと思うんですけれども、photonの方にキャッシュがあるんでしょうね、でそれが読み込まれるとか。キャッシュなので、アドレスやらが同じであればしばらくそれが読み込まれるでしょうね。

jQueryで該当の画像のサイズをstyle埋め込んで指定するのが手っ取り早いでしょうか。

ブログを2つ運営しています。
同じ現象です。

http://ohimaneta.com/blog-entry-373.html

記事の冒頭に楽天リンクを張る事が多いです。
全てのリンクの画像が大きくなっています！

通常はクロームを使用しています。
IE10で確認したらクロームより更に大きくなっていました。

もし原因が分かればよろしくお願い致します！

firefoxでは、特に画像が大きくなっているような所は見当たりませんでした。
chrome(chromium)でもまぁ同じ感じでした。

念の為、大きくなってる画像を貼り付けてもらうと比較ができて良いかと思います。

また、imgタグのsrcの最後にトランプキング.jpg?resize=300%2C451 こんな感じでresizeの何かしらがあるようですがこれは何でしょう？
更に、サイドバーの人気ページランキングでしょうか、document.writeが使われているのかちょっと問題ありな感じです。

＞Hidekichiさん

>imgタグのsrcの最後にトランプキング.jpg?resize=300%2C451 こんな感じでresizeの>何かしらがあるようですがこれは何でしょう？

これは調べてみたら、photonを有効にすると自動的に挿入されるみたいです。
https://keikenchi.com/wordpress-jetpack-photon

>わいひらさん。

分かり易くするためにテスト用のブログがあるため実験してみました。
simplicity1.9.3を入れました。
プラグインはJetpackのphotonのみを有効で他は全て無効です。
親テーマは何も触っていません。
子テーマはサイドバーのCSS（黄色の下線のみ）を入れてるだけで他は何も触っていません。
ほぼデフォルト状態です。

結果はphotonを有効にすると画像がやはり大きくなってしまいました。
※通常のjpgの静止画は問題ないです。
A8のAmazon広告の画像も問題ないです。
A8楽天広告の画像のみが大きくなるようです。

画像とURLをお伝えします。

クロームでphoton無効
http://nasugamama.com/wp-content/uploads/photon無効広告楽天クローム.jpg
※説明文が多いとなぜか画像が小さくなってしまいます。
この原因もよろしければ知りたいです。
これも楽天広告の画像だけがなってしまいます。

クロームでphotn有効
http://nasugamama.com/wp-content/uploads/photon有効の楽天クローム.jpg

IE10でphoton無効
http://nasugamama.com/wp-content/uploads/photon無効の楽天IE.jpg

IE10でphoton有効
http://nasugamama.com/wp-content/uploads/photon有効の楽天IE.jpg
でかくなりすぎてサイドバーまではみ出します！

今回のサイトのURLです。
photonのみ有効の状態にしてます。
http://nasugamama.com/archives/39884

ご参考になればお願いします。

画像自体は、

#the-content table img {
  width: 100%;
  height: auto;
}

を子テーマstyle.cssに追加すればよいのではなかろうかと思います。

> 説明文が多いとなぜか画像が小さくなってしまいます。
> この原因もよろしければ知りたいです。

table
 tr
  td 説明文
  td 画像
 /tr
/table

このような構造なので、説明文が長いと画像自体が狭くなります。改善方法は、説明文と画像のtdにそれぞれwidthでサイズを入れることだろうかと。
例えば説明文の方のtdにwidth:30%と入れると、画像の方は勝手に残りの70%になります。

これらを踏まえて、tableにstyleで500pxとすると、

こうなります。

全体的に子テーマでまとめるとしたら、以下のサンプルのような感じで良いのではないでしょうか？

サンプル: 子テーマstyle.cssで全て賄うためのサンプル | codepen

つまり、tableにstyleで入れるのではなく、classを追加するわけです。サンプルではjQueryでやってますが、ひとまずサンプルからstyle属性を取り除くためにやっているだけで本来は必要ありません。
記事編集でやらないといけないのは、

横長の場合
[table class=”raktable”]
縦長の場合
[table class=”raktable vertical”]

のみです。後は従来の構造のままでイケます。
css欄はscssで書いてあるのでcss欄の右側にあるview compiledボタンでcssにしたものを子テーマstyle.cssに適用して下さい。
で、必要なサイズを調整して下さい。

>> 例えば説明文の方のtdにwidth:30%と入れると、
>> 画像の方は勝手に残りの70%になります。

これは中の画像が大きいからです。セルを押し広げて残りいっぱいになるとイメージしてもらえれば良いかと思います。

ulで書き直しより応用が効く書き方をおすすめとしてサンプル作りました。
広告自体が最初からtableならしょうが無いんですが、もし改変しても良いという場合は以下のサンプルのようにすると見栄え的にも管理的にも簡単になります。

サンプル: tableをulで書きなおしたサンプル | codepen

おそらくIEは死亡でしょうが、場合によっては上手く動くかも知れません。まぁサポートももう終わりましたし良いのではないかと。

html欄を見てもらえればわかるように、

[div class="ads rakuten"]
  [ul]
    [li][/li]
    [li][/li]
  [/ul]
[/div]

このような構造で書けるようになっています。amazonの場合も同様です。
また、横並びにいくつかのアイテムを並べたい場合は、

[div class="ads rakuten wide"]
  [ul][/ul]
  [ul][/ul]
[/div]

このようにすれば横に並ぶようになってます。一応レスポンシブかと。ただし一部のサイズで正しく動かない場合があると思うので、その時はメディアクエリでアイテムを1列にするなどの工夫が必要です(追記しました)。

このようにtableを利用するよりもulやdl等でflexを利用した方がより簡単に柔軟に対応できます。設計は案外ややこしいですが、設計してしまった後は同じ構造のhtmlでリンクが違うものをペチペチと張り付けていくだけです。

>Hidekichiさん
色々とサンプルコードを作って頂いてありがとうございます。
楽天もamazonも発行されているタグはtableタグです。

今回はスタイルシートを子テーマに追記。
そして記事中で以下の様に編集するのですよね？

横長の場合
[table class=”raktable”]
縦長の場合
[table class=”raktable vertical”]

ソースコードの改変は規約に違反と書かれていたので、今回の方法は使えないかもしれません。

同じphoton無効でtableのwidthの指定もないですが、テキストの長さに関係なくIE10は画像サイズが変更されずに表示されています。
photonを有効にしても【IE10でphoton無効】のように出来るのが理想ですが、難しですね・・・。

クロームでphoton無効
http://nasugamama.com/wp-content/uploads/photon無効広告楽天クローム.jpg

IE10でphoton無効（理想系）
http://nasugamama.com/wp-content/uploads/photon無効の楽天IE.jpg

ブラウザによってこうまで違うのか不思議でした。

＞わいひらさん
指示通りに楽天の発行コードを載せてみました。

商品説明　短く　画像128×128

<table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:300px;"><tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><p style="padding:0; margin:0;"><a href="http://rpx.a8.net/svt/ejp?a8mat=2BJA1W+B5AE82+2HOM+BWGDT&rakuten=y&a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2Fg00q1c54.2bo113eb.g00q1c54.2bo12238%2Fa14030789582_2BJA1W_B5AE82_2HOM_BWGDT%3Fpc%3Dhttp%253A%252F%252Fitem.rakuten.co.jp%252Fjeijei%252Fens7038118874%252F%26m%3Dhttp%253A%252F%252Fm.rakuten.co.jp%252Fjeijei%252Fi%252F10031835%252F" target="_blank">ドラゴンボール超</a></p><p style="color:#666; margin-top:5px line-height:1.5;"></p></td><td style="vertical-align:top; border-style:none; padding:10px;"><a href="http://rpx.a8.net/svt/ejp?a8mat=2BJA1W+B5AE82+2HOM+BWGDT&rakuten=y&a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2Fg00q1c54.2bo113eb.g00q1c54.2bo12238%2Fa14030789582_2BJA1W_B5AE82_2HOM_BWGDT%3Fpc%3Dhttp%253A%252F%252Fitem.rakuten.co.jp%252Fjeijei%252Fens7038118874%252F%26m%3Dhttp%253A%252F%252Fm.rakuten.co.jp%252Fjeijei%252Fi%252F10031835%252F" target="_blank"><img border="0" alt="" src="http://thumbnail.image.rakuten.co.jp/@0_mall/jeijei/cabinet/ensky2/ens7038118874.jpg?_ex=128x128" /></a></td></tr></table>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=2BJA1W+B5AE82+2HOM+BWGDT" alt="" />

他のテーマのお話で申し訳ありませんがGush2だとphotonの有無に関係なく理想どおりに表示されます。

IE10でphoton無効（理想系）
http://nasugamama.com/wp-content/uploads/photon無効の楽天IE.jpg

ですのでテーマ側の編集でできると思っていました。
色々と質問して申し訳ありません。

私はsimplicityのテーマが大好きです！
たとえ出来なくてもこのテーマを使い続けます。

すいません。
上記は直接コードを書き込んでしまいました。

商品説明　短く　画像128×128のコードです。

<table cellpadding="0" cellspacing="0" border="0" style=" border:1px solid #ccc; width:300px;"><tr style="border-style:none;"><td style="font-size:12px; vertical-align:middle; border-style:none; padding:10px;"><p style="padding:0; margin:0;"><a href="http://rpx.a8.net/svt/ejp?a8mat=2BJA1W+B5AE82+2HOM+BWGDT&rakuten=y&a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2Fg00q1c54.2bo113eb.g00q1c54.2bo12238%2Fa14030789582_2BJA1W_B5AE82_2HOM_BWGDT%3Fpc%3Dhttp%253A%252F%252Fitem.rakuten.co.jp%252Fjeijei%252Fens7038118874%252F%26m%3Dhttp%253A%252F%252Fm.rakuten.co.jp%252Fjeijei%252Fi%252F10031835%252F" target="_blank">ドラゴンボール超</a></p><p style="color:#666; margin-top:5px line-height:1.5;"></p></td><td style="vertical-align:top; border-style:none; padding:10px;"><a href="http://rpx.a8.net/svt/ejp?a8mat=2BJA1W+B5AE82+2HOM+BWGDT&rakuten=y&a8ejpredirect=http%3A%2F%2Fhb.afl.rakuten.co.jp%2Fhgc%2Fg00q1c54.2bo113eb.g00q1c54.2bo12238%2Fa14030789582_2BJA1W_B5AE82_2HOM_BWGDT%3Fpc%3Dhttp%253A%252F%252Fitem.rakuten.co.jp%252Fjeijei%252Fens7038118874%252F%26m%3Dhttp%253A%252F%252Fm.rakuten.co.jp%252Fjeijei%252Fi%252F10031835%252F" target="_blank"><img border="0" alt="" src="http://thumbnail.image.rakuten.co.jp/@0_mall/jeijei/cabinet/ensky2/ens7038118874.jpg?_ex=128x128" /></a></td></tr></table>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=2BJA1W+B5AE82+2HOM+BWGDT" alt="">

#the-content table img {
  width: 100%;
  height: auto;
}

普通にこれだけで直るはずですけども。

規約については楽天側に聞いてみなければ何とも言えませんが、商品の内容が正しく表示されるような改変は別に何も言われないのではないでしょうか？
むしろ、現在の大きくなっている方がおかしいわけですから、それを修正するために手を加えることは何も言われないのでは？

問い合わせるとしたら、アクセス過多によるphotonのやむを得ない使用と、利用することで画像が大きくなることを問題視しているということで聞けば良いのではないかと思います。これらの許可が得られないならむしろ広告配信をiframeにしてcssを楽天側で埋め込めばいいじゃんと突っぱねることも可能です。
Googleもはてぶもtwitterもやってるじゃん、楽天はできないんですか？と言えば何かしらやってくれるかも。

サイズを指定してはいけないという規約があるならcssで上書きされないように!importantをつけるなり方法はあるだろうと言うことも可能です。

おそらく楽天側は、それでも改変はダメなのでphotonが原因ならphotonを利用しないでくださいと言うと思いますけれども。楽天はそういう所です。インターネットの黎明期から何も変わらない体質です。

テーマ側としては、photonを使わず表示したら何も問題はないのと規約でサイズがいじれないというのであれば手の入れようがないかと思います。

ただし、最初に何かしら広告の画像サイズを間違えてしまっていて、そのキャッシュがphoton側に残っているのであればこれはもう何もできません。任意にphotonのキャッシュをクリアすることはできないのですから、違う商品で正しく表示されるようにした状態でキャッシュを効かせるようにする必要があります。

ここがどうなるかが気になる所ですね。貼ったことのない画像の入った広告を入れてみたらどうなるか。

画像.jpg?resize=128,128 と書き変えたらどうなるかも気になる所です。
photonを利用したら勝手に画像サイズが書き換わるというのは楽天の規約には触れないですかね？これが問題ないなら、#the-content table img { width: 100%; heght: auto; }も別に問題ないように思います。

#the-content table img {
  width: 100%;
  height: auto;
}

このコードを追加しました。
IEの馬鹿でかい画像も修正されていい感じになりました。

こちらがそのテストサイトです。
photonのみ有効の状態にしてます。
http://nasugamama.com/archives/39884

色々作っていただいたコードを利用して色々と試して見ます。
ありがとうございました。

例えば、http://nasugamama.com/archives/39884 の記事編集をして、画像のimgタグの所を見ると

src=画像パス/画像.jpg?w=680

とかとなっていますか？
もし、

src=画像パス/画像.jpg?w=128

として記事を保存し、更に記事編集で見た時にw=の値は元の680になりますでしょうか？
それとも、記事編集の画面では、src=画像パス/画像.jpg?w=680この太字の部分は表示されていませんか？
もし、w=128が保存できるのであれば、これを手動で訂正すれば128pxの横サイズを持った画像になるかと思います。

[img src=”画像パス/画像.jpg” width=”128px” height=”128px”]
※heightは128pxかはわかりませんが。

本来こうなっている所が、
[img src=”画像パス/画像.jpg?w=128″]
こうなっていたりして保存されているかどうかです。photon apiは触れるというのを聞いたことがあります。ので編集画面で[img src=”画像パス/画像.jpg?w=680″]こうなっていればwidth:680pxと思うんです。それが修正保存できたらphotonでもイケるのかも知れないとふと思ったりしました。

ただし、テーブルなので、aのリンクが広くなれば自ずと画像の方は小さくなるかも知れません。

>Hidekichiさん
imgタグを確認しました。

「商品説明　短く　画像128×128」のソースコードです。
コードの後半にあるimgタグになります。

<img alt="" src="http://i2.wp.com/thumbnail.image.rakuten.co.jp/@0_mall/jeijei/cabinet/ensky2/ens7038118874.jpg?w=680" data-recalc-dims="1" /></a></td>
</tr>
</table>
<p><img src="http://i1.wp.com/www13.a8.net/0.gif?resize=1%2C1" alt="" data-recalc-dims="1"></p>

「記事編集画面で見たソース」

<img border="0" alt="" src="http://thumbnail.image.rakuten.co.jp/@0_mall/jeijei/cabinet/ensky2/ens7038118874.jpg?_ex=128x128" /></a></td></tr></table>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=2BJA1W+B5AE82+2HOM+BWGDT" alt="">

「記事編集画面で見たソース」は楽天で発行されたソースコードそのままです。
photon有効の場合はやはり書き換えられてしまうみたいです。
[?w=680]や[?resize=1%2C1]がついてしまいます。

無効にすると発行されたコードのままのソースになりました。

>それとも、記事編集の画面では、src=画像パス/画像.jpg?w=680この太字の部分は> >表示されていませんか？

これについては表示されていないということになります。

>わいひらさん

>Simplicityにこういった機能はないので、やはりプラグインが何かしら作用をして>いるとしか考えにくいです。

エックスーサーバからも勧められて、他サイトでも簡単という事だったのでphotnを使っていました。
ソースが書き換えられて変になってしまうのは残念です。
しかし、CSSの追記で画像もほぼ問題なさそうです。
このまま色々テストしてみます。
ありがとうございました。