ブログに商品リンクを貼る際に多くの方が使っているであろう『カエレバ』
当ブログでも利用しているサービスになります。
そのカエレバでトラブルが発生します。
今回はこの発生したトラブルの解決策の紹介です。
カエレバ・ヨメレバの表示に段差ができてしまう問題
カエレバのボタンにYahooショッピングも追加してみようとしたところ、なぜか段差が発生してしまう状態に。
斬新なデザインとしてはいいだろうけど、このままでは使えません。
デザインCSSで修正をかけようとするも、まだHTMLやCSSについては勉強中の身。
ましてや人様が作ったコードなので何が原因なのか分かりません。
ちなみにカエレバのカスタマイズコードは、このページで紹介されているものを使っています。
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
段差ができる原因
この段差ができてしまう原因を調べてみると、どうやら赤枠部分に見えないimgデーターが表示されているようです。
原因の生みの親
この目に見えないimgデーターを生み出しているの一体誰なのか？
それは『もしもアフィリエイト』や『バリューコマース』が原因の生みの親です。
カエレバ・ヨメレバを利用する際に、もしもアフィリエイトやバリューコマースの入力箇所にコードを入れるとトラッキング用のimgコードが追加されてしまいます。
このトラッキング用のimgこそが見えないimgデーターになります。
デザインCSSにコードを追加で問題解決
この問題はデザインCSSにコードを追加することで解決します。
.kaerebalink-link1 img, .booklink-link2 img{display:none;}
このコードをカエレバのカスタマイズコードの先頭に追加すればOKです。
私の場合だとこの部分になりますね。
/*--------------------------------------
ヨメレバ・カエレバ（PC）
--------------------------------------*/.kaerebalink-link1 img, .booklink-link2 img{display:none;}
.booklink-box, .kaerebalink-box{
問題解決後の表示
コードを追加して再度リンク表示を確認してみると段差は無くなっています。
これで問題は解決となりました。
今回の解決策を教えてくれたサイトはこちら。
