【CSSデザイン】もしもアフィリエイトでカエレバ・ヨメレバを使って商品紹介リンク作成したらレイアウトが崩れた！解決法は？

Amazonや楽天の商品を紹介する際に、同時に商品ページを紹介できる「カエレバ・ヨメレバ」というシステム。

本当に素晴らしいものを作って頂き感謝。

しかし最近「もしもアフィリエイト」を使い始めたのでそのタグを入力したらレイアウトが崩れてしまった。

なのでその対処法を備忘録代わりにまとめておく。

もしもアフィリエイトを使う前のレイアウト

もしもアフィリエイトのタグを入力する前のカエレバのレイアウトは

あーなんてきれいなんでしょうか。素晴らしいデザインですね。

参考にさせてもらったのは「Yukihy　Life」さんです。

コードはここには載せないのでリンクから見に行ってね。

もしもアフィリエイトのタグ入力後のレイアウト

もしもアフィリエイトを使い始めたので、これからはもしものタグを入力してある状態で商品リンクを生成したのだが、レイアウトが崩れてしまった。

ってな感じで楽天の方が少し下がってしまっている。

これはもしもの商品リンクはimageタグが余計についているみたいでそれが原因のようだ。まあそのimageタグを消すのはうまく売り上げが計測されない可能性があるので、タグをいじらない方向で進めていく。

やっぱりレイアウトは綺麗に揃っていてほしいから、調べてみた

違うレイアウトに変更

CSSを使ってボタンリンクの配置を変えようと思ったのだがそれがなかなかうまくいかなかったので、他サイトを参考にさせていただいた。

それが「じゃこ天ブログ」さんだ。感謝感激。使わせて頂く。

しかし問題が発生。

なんか背景に色がついている。

これは俺が求めているものではないので少しCSSをいじって色を変えようと思う。

これくらいの変更であれば俺もできる・・・やってみる。

の部分の

が背景の色を設定する項目なので

と背景を白に設定すると

はい、出来ました。

あースッキリ。

最後に

CSSとかのレイアウトでうまくいかなくて、どこが間違っているのかわからないっていう状況に陥ると、かなりモヤモヤするよね。

それを簡単に解決してくれた２つのサイト（「Yukihy Life」様と「じゃこ天ブログ」様）には改めて感謝の意を表し、そして同じ悩みを抱えている人は俺のサイトで問題解決してくれたら嬉しい。

ちなみに俺は「もしも　カエレバ　レイアウト」で検索して調べたので、そのキーワードでこの記事に飛んできてくれる人は同じ悩みを抱えているのではないだろうか。

それでは以上！

 

追記　平成２９年１０月１８日

今まではAmazonと楽天のボタンしか設置していなかったが、「Yahooショッピング」のボタンを追加した。

（バリューコマースでYahooショッピングと提携すればOK。）

そのため、ちょっとレイアウトは変わって以下の様になった。

「Yahooショッピングを探す」が２段になってレイアウト崩れみたくなっちゃっているが、これはしょうがないかな。