カエレバのブログパーツのリンクボタン前が大きなブランク表示になるので調査中
いつ頃からだったかな。。カエレバのリンクが縦に間延びしているのです。。商品画像からリンクボタンまでの間に大きなブランク表示が入ってしまうので。ネットで探してもキーワードの指定がよくないのか、一向に事例が見当たりません。
悪さをしているプラグインがあるのでは？と、ひととおりプラグインを無効にしても表示は変わらず。。色々ためしてみて、いくつか分かった事がありましたので記録しておきます。
以下のコードをスタイルシートにあったのが原因みたいです。なんでこんなコード入れていたのか。。。
img {
width:100%;
height:auto;
}
多分、ゲレンデマップを拡大したときに細かい所がはっきり見えないので色々実験していたときに入れたコードなんだろうと思います。これ削除するとまたゲレンデマップ拡大するとダメなんだろうか。。大丈夫そうだな。。
あー何か月放置したのだろうか。。やっちまったなぁぁ。
もしもアフィリエイトのインプレッションリンクが関係している
<img src="//i.moshimo.com/af/i/impression? ・・・・
仕方がないのでブログパーツのHTMLをじっくり眺めました。どうやら、もしもアフィリエイトのインプレッションリンクがあると、おかしな表示になる事までは突き止めました。
カエレバのサイトでもしもアフィリエイトIDを設定したブログパーツを作成すると、もしもアフィリエイトの方でインプレッション数をカウントできるようにするためのリンクが挿入されていました。
img src指定ですが、heght=1、width＝１なので、実際には表示されない記述になっているのですが、これがどうも。。変な結果を引き起こしています。
もしもアフィリエイトIDを設定している楽天で検索した結果でブログパーツを作るとNG
私の場合、Amazonと楽天にもしもアフィリエイトのIDを設定しています。楽天で検索した結果からブログパーツを作成すると、文字リンクの直後にモシモのインプレッションリンクが付挿入されていて、これがあると大きな空白エリアができてしまいます。
画像の矢印の先のリンクの後に、赤文字の所にあるのがインプレッションリンクです。
もしもアフィリエイトのインプレッションリンクを削除すれば解消されます が。。
～ BUFFALO｜バッファロー Wi-Fiルーター 親機 866+300Mbps AirStation ブラック WSR-1166DHPL2 [ac/n/a/g/b][無線LANルーター]～
<img src="//i.moshimo.com/af/i/impression?a_id=xxxxxx&p_id=xx&pc_id=xx&pl_id=616″ width="1″ height="1″ style="border:none;">
赤文字の部分を削るとこの表な結果になります。
リンクボタンの上の大きなブランク表示はなくなりこんな風にキレイになります。というかこれが普通なんですけど。でもよくよく見てるとボタンの下にまだ隙間があります。ボタンの所にも、もしもアフィリエイトのインプレションリンクが挿入されているのが影響していそうです。でもまあこの程度でしたらまだ許せます。
もしもアフィリエイトのIDを設定していないヤフーの検索結果でブログパーツを作るとキレイになる
ヤフーの検索結果で作成したブログパーツはキレイに表示されます。まあこれが普通なんですけどね。なんか、おかし表示を解消できたので、なんだかやけにキレイに見えてしまいます。
ふと思い出したのですが、楽天の検索結果で作るとおかしな表示になるので、ヤフーの検索結果でパーツを作ってやりすごしていた事があったような気がしてきました。。そうなるとかなり前からおかしかったのでしょうか。。
今回の調査で、楽天の検索結果で作った場合とヤフーの検索結果で作った場合に違いがでるのか？については、もしもアフィリエイトのインプレッションリンクの挿入位置が関係している所までは分かりました。
とりあえずはヤフーの検索結果でブログパーツを作る様にしておこう思います。どうしても楽天にしか掲載されていない商品を紹介したい場合は、手打ちでHTMLを調整してみようと思います。
実際のカエレバのブログパーツ
キレイに表示される例 もしもアフィリエイトIDを設定していない ヤフー検索結果で作成した例
リンクボタン前にブランク表示ができるNGな例 もしもアフィリエイトIDを設定している楽天の検索結果で作成した例
おしえてあげてもいいけど