スポンサーリンク

カエレバをもしもでカスタマイズしたときのボタンのずれを解決

カエレバの表示をカスタマイズしようとして、ボタンがずれてうまく行かなかったので、備忘録として残します。

 

スポンサーリンク

もしもアフィリエイトをカエレバにしてみたら、ボタンがおかしくなる

 

当初は、アマゾンと楽天をカエレバ経由にしていたのですが、利用料のメリットを考えてもしもアフィリエイトにしました。

 

そこで、「amazlet風-2(CSSカスタマイズ用)」を使ってリンク生成してみたのですが、なぜかボタンがずれて表示。

 

 

こちらのサイトを参考にして、CSSを書き換えました。

ボタンずれも修正!カエレバ・ヨメレバのデザインをカスタマイズ!
Webのコードにはめっぽう疎いDスケです。WordPressブログで商品を紹介するようになり、「カエレバ」「ヨメレバ」というツールがあることを知りました。でもデザインのカスタマイズって何だかうまくいかない。ここではコピペと設定を行うだけでできる方法をじっくりお教えします!コードに弱い貴方にも、きっとできます!

 

しかし結果は変わらず。

 

原因不明なので他のサイトを探してみた

 

どうやってもボタンのずれが直らないので、同じ現象がないか、もしくは解決できないか探したら、ありました。

 

参考サイトは以下です。

カエレバをカスタマイズしてみたらリンクのボタンがずれた時の一つの解決法
アフィリエイトを始めるのに便利なブログパーツ、カエレバを使いました。 そのまま使うとちょっとデザインが納得いかなかったので 色々なサイトを調べてCSSを編集してカスタマイズしてみました。 その時に参考にしたサイトはこちら ↓ ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! こ…

 

こちらのサイトには、解消方法で悩んだ経過が描かれていました。

どうしてもずれるのを解消できずに、カスタマイズのときには使うなと言われている「amazlet風(改)-1」を使って解決していました。

 

私も実際「amazlet風(改)-1」でやってみたところ、直りました!!

 

これで問題なしと思っていたのですが、記事を読んでいたら、さらに書いてありました。

/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

スタイルシートで ↑ のような箇所があるのでそこに

/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

の2行を追加すればOKです。(赤字が追加した部分)

慢性胃炎克服ブログ

 

他のサイトでも似たような方法で解決しているところが多数あります。

私は最初これでやってもだめだったので、再度やってみましたが、やはりボタンはずれたまま。

 

同じ現象に当たって、このサイトでは「amazlet風(改)-1」で解消したけれど、正しい方法は「amazlet風-2(CSSカスタマイズ用)」で作る方法だと。

 

そうなると、自分はどうしてだめなのかと悩んだのですが、さらに読み進めていくと書いてありました。

CSSを編集してプレビューをしてもなぜか反映されないという場合は「ctrl」+「F5」を押してプレビュー画面を更新してみてください。

慢性胃炎克服ブログ

 

全くやっていませんでした。

画面の更新を。

 

そこで「ctrl」+「F5」もやってみました。

 

解決しました。

 

まとめ

 

今回発見だったのは、「amazlet風(改)-1」はカエレバのカスタマイズでは使わないという話が、実はそうでもなかったことです。

 

実際、「amazlet風(改)-1」を使ったときに「amazlet風-2(CSSカスタマイズ用)」と同じように表示されたので。

 

もしもカエレバがきれいに表示されず悩んでいる場合には、「amazlet風(改)-1」も試してみてください。

 

 

コメント