いーぐるじゃんぷ

管理人が気になっているガジェットやゲーム、ハマっていることなどを紹介する自由奔放なレビュー系ブログ

(`・ω・´)ゞ

気になるガジェットやゲームなどを紹介するブログ

ヨメレバ・カエレバの商品ボタンリンクがずれた場合の修正方法

こんばんは、あおばです。

 

少し前にカエレバを導入したのですが、どうも商品ボタンリンクの調子が悪いのです。

 

ちゃんと正しくリンクも貼れているはずだし、CSS等の設定も間違っていないはず・・・・でも、ボタンの表示位置がずれて「なんだこりゃ?」状態だったのですが、色々と先人のブロガーさん達の知恵を借りて修正したら、無事直りましたので、今回はそんなヨメレバ・カエレバで表示がずれた際の修正方法についてお話します。

ヨメレバ・カエレバの商品ボタンリンク

ずれるとはどういう状態なのか

そもそも、ずれるってどういう状態なの?という方のために実際にカエレバを使用して表示がずれたところをスクショしましたので、ご覧いただきましょう。

ヨメレバ・カエレバの商品ボタンリンクn

このようにアマゾンのボタンリンクと楽天のボタンリンクの位置が揃っておらず、不揃いでなんだか気分がよくありません。

この微妙にずれた状態を正しく横並びにするのが今回の目的です。

原因はどこにあるのか

恐らく、何か余計な部分を表示しようとしているのが原因だと思われるので、スタイルシートの設定を確認しつつ、同様な現象が起きているブロガーさんがいないかを探していましたら、このような記事がありました。

これは・・・・完全に同じ現象や!

こちらの記事を参考にさせていただきつつ、スタイルシートの調整を行ったところ・・・・完璧に修正出来ました!感謝カンゲキ雨嵐!

結局どこが悪かったのか

結局のところ、やはり不要なイメージファイルを読み込もうとしていたのが良くなかったみたいなので、前述の記事を参考にさせていただき、下記のスタイルを追加したところ。

 

.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}
.shoplinkrakuten img{display:none;}

 

ヨメレバ・カエレバの商品ボタンリンク

このような感じに正しい横並びの表示に戻りました!やはり正しい位置にボタンがあると気持ちがいいですね!

まとめ

自分だけだと解決に時間がかかりそうな場合や分からない点が多い場合はグーグル先生や先輩ブロガーさんたちの記事を参考にすると色々と勉強になってありがたいです。

私ももっと他の方の参考になるような良質な記事が書けるように日々精進をしなければなりませんね。

 

それでは、また!

【スポンサーリンク】