る〜子のヲタく拝見

Enjoy Otaku LIFE

カエレバ・ヨメレバの表示に段差ができてしまった時の解決策

カエレバ・ヨメレバの表示に段差ができてしまう問題 

カエレバ 段差

カエレバのボタンにYahooショッピングも追加してみようとしたところ、なぜか段差が発生してしまう状態に。

斬新なデザインとしてはいいだろうけど、このままでは使えません。

 

デザインCSSで修正をかけようとするも、まだHTMLやCSSについては勉強中の身。

ましてや人様が作ったコードなので何が原因なのか分かりません。

 

ちなみにカエレバのカスタマイズコードは、このページで紹介されているものを使っています。

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life

 

段差ができる原因

f:id:ruko036:20180802092204p:plain

この段差ができてしまう原因を調べてみると、どうやら赤枠部分に「見えないimgデーターが表示されている」ようです。

 

原因の生みの親

この目に見えないimgデーターを生み出しているの一体誰なのか?

それは「もしもアフィリエイト」や「バリューコマース」が原因の生みの親です。

 

f:id:ruko036:20180802092205p:plain

カエレバ・ヨメレバを利用する際に、もしもアフィリエイトやバリューコマースの入力箇所にコードを入れるとトラッキング用のimgコードが追加されてしまいます。

 

このトラッキング用のimgこそが「見えないimgデーター」になります。

 

コード追加で問題解決

この問題はデザインCSSにコードを追加することで解決します。

 

.kaerebalink-link1 img, .booklink-link2 img{display:none;} 

このコードをカエレバのカスタマイズコードの先頭に追加すればOKです。

 

私の場合だとこの部分になりますね。

/*--------------------------------------
ヨメレバ・カエレバ(PC)
--------------------------------------*/

.kaerebalink-link1 img, .booklink-link2 img{display:none;} 
.booklink-box, .kaerebalink-box{ 

 

問題解決後の表示

f:id:ruko036:20180802092202p:plain

コードを追加して再度リンク表示を確認してみると段差は無くなっています。

これで問題は解決となりました。

 

今回の解決策を教えてくれたサイトはこちら。

ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ