スポンサードリンク

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
拍手する

FC2ブログをIEで見るとマイショップ(Amazonアソシエイト)の画像だけが表示されず

 FC2ブログでは、2年以上前からインターネットエクスプローラー(以降IE)での閲覧にはIEの互換表示を強制されています。これ自体は旧い共有テンプレートなどがIE6を基準として表示の最適化等をしていたりすれば、最新のブラウザーで閲覧すると崩れたりして対策が大変(共有テンプレートの登録数 5713件)だからなのかなとは想像しますが、この情報自体は公式には公開されてはいません。

また、こちらの記事のような考え方なのかなとも思います。

@IT さんの IISのサイト設定でIE8の互換表示モードを強制する

なので、ユーザー側で対応できる人は勝手にやってね!という、いつものスタイルなのかなとも思います。既に、このブログでも(記事:ブログをいじった時のメモ 2011/1/13)IE8標準モードで表示されるように対策はしています。

マイショップ(Amazonアソシエイト)の画像だけが表示されない

マイショップというのは、FC2ブログでAmazonのアフィリエイト(Amazonアソシエイト)が簡単に出来る機能です。

FC2ヘルプ>FC2ブログ>マニュアル>アマゾン商品を記事に掲載する

マイショップのコード例:
<table style="width:75%;border:0;" border="0"><tr><td style="border:none;" valign="top" align="center"><<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00BUCDF2M/muyoublog-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51XKtndYwlL._SL160_.jpg" alt="機動戦士ガンダム Blu-ray メモリアルボックス" border="0"></a></td><td style="padding:0 0.4em;border:0;" valign="top"><a href="http://blog.fc2.com/goods/B00BUCDF2M/muyoublog-22" target="_blank">機動戦士ガンダム Blu-ray メモリアルボックス</a><br />(2013/08/28)<br />古谷徹、鈴置洋孝 他<br /><br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00BUCDF2M/muyoublog-22/ref=nosim/" target="_blank">商品詳細を見る</a></td></tr></table>

ヘルプにあるように、コードを記事に貼り付けるだけで画像つきで表示されるはずなのが画像が表示されないようです。
このことを最初に知ったのは、ユーザーフォーラムのこの投稿です。

ユーザーフォーラム>質問・疑問>記事内のマイショップ商品の画像が表示されない

確かに質問された方のブログを表示するブラウザーをIE8にしてみるとマイショップの画像だけが表示されなくなってたので、【F12】キーで開発者ツールを起動させてIE8標準モードにすると正常に表示されました。なので、多分使ってるテンプレートの方に問題がありそうなので、他のテンプレートで同じ表示になるものを探してみたらあったので、HTMLとCSSでimgを【ctrl】+【F】で検索して原因をみつけ出しました。

max-widthプロパティがあると画像が表示されなくなる

マイショップの画像が表示されないテンプレートに共通しているのが、

img {
max-width : 100%;
height:auto;
}

スタイルシート(CSS)に書かれているmax-widthの部分でした。

HTMLクイックリファレンス さんの max-width

こちらのサイトの説明では対応しているのが、IE8からしか書かれていないのでテンプレートのこの部分を無効にしてIEで互換表示にして見てみるとマイショップでの画像が表示されるようにはなりました。確かにスタイルシートから削除すれば表示されるようにはなるけど...それがいい方法かどうかは別ですしね。

また、上記のようにスタイルシートで書かれている場合には、記事内にテーブルタグを使って画像を複数表示するような使い方をしているとブラウザーごとに全て違う表示になってしまうようです。
例: http://yosoilue.blog74.fc2.com/blog-entry-1022.html テーブルタグ内に複数の画像のあるページ
  • Google Chrome26 :IEの互換表示に同じ
  • Firefox19 :無視される
  • IE8互換表示 :縦横比を維持したまま縮小された表示
  • IE8標準モード :横を縮小した状態で縦方向だけが元のサイズのまま
要するにテーブルタグ内に画像が複数ある使い方は想定してないのかなと思えます。

FC2ブログはIEの互換表示を止める気はないようです

かなり前にFC2リクエストで出されていたリクエストが見送りになっていました。

FC2リクエスト の レスポンスヘッダでの描画モードの指定について(5_1281804466_3281472)

なので、metaタグに1行追加して対応するのが現実的なんでしょうね。でも、IEの互換表示でマイショップの画像が表示されない共有テンプレートはいっぱいあるみたいなので個々人が対応するべきなのかな?

まとめると

  1. FC2ブログでは、IE8以降のバージョンで閲覧すると互換表示モードに強制的になる。
  2. FC2ブログのマイショップで、作られる貼付けコードにはテーブルタグが使用されている。
  3. FC2ブログの共有テンプレートの一部では、画像の表示サイズを幅に合わせて自動的に調整するためにスタイルシートで max-widthプロパティ を使っている。
  4. テーブルタグに画像を配置している場合には、 max-widthプロパティ を使うと表示に不具合が起こる事がある。
やはり、max-widthプロパティを使う場合には、登録する方が標準モードにするためのmetaタグを1行追加するようにしたほうがいいのではないかとは思います。

関連記事:ブログをいじった時のメモ

スポンサーサイト

タグ : FC2ブログ_ユーザーフォーラム FC2リクエスト Amazon_アソシエイト IE互換表示 

拍手する

スポンサードリンク

【関連する記事(zenback)】

コメント

コメントの投稿

非公開コメント

【広告看板】 
UUカウンター
+6500以上?
現在の閲覧者数:
PVカウンター
次のキリ番は90万です
Twitter
Twitterの過去の
まとめはtwilogバナー
記事のランキング

ブログパーツ

リンク集:ブログ
リンク
アクセスのランキング

アクセスランキング

CG使用許可番号
CG使用許可番号0166
プロフィール
記事に関連しないコメント等は
ゲストブックにお願い致します

ロギラキ

Author:ロギラキ
level:52/150
プロフへのリンク
 ブクログ

【商品リンク】

VF-19 ADVANCE
超時空要塞マクロス
VF-1J アーマードバルキリー
超時空世紀オーガス
オーガス
鋼鉄ジーグ
宇宙円盤大戦争
UFOロボグレンダイザー
銀河旋風 ブライガー
電人ザボーガー
ストロングザボーガー お売りください。駿河屋です。
FC2拍手数(ロギラキ遷紀)
公開したのは【1529】記事
拍手が貰えたのは【1338】記事
応援バナー
応援しています♪
萌えゲーアワード2015 バナー ユニゾンシフト:ブロッサム新作応援中
ブログランキング
FC2ブログランキングへ 人気ブログランキングへ ブログランキング・にほんブログ村へ blogram投票ボタン このBlogのはてなブックマーク数
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。