カエレバの表示をカスタマイズしようとして、ボタンがずれてうまく行かなかったので、備忘録として残します。
もしもアフィリエイトをカエレバにしてみたら、ボタンがおかしくなる
当初は、アマゾンと楽天をカエレバ経由にしていたのですが、利用料のメリットを考えてもしもアフィリエイトにしました。
そこで、「amazlet風-2（ＣＳＳカスタマイズ用）」を使ってリンク生成してみたのですが、なぜかボタンがずれて表示。
こちらのサイトを参考にして、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;}の２行を追加すればOKです。（赤字が追加した部分）
慢性胃炎克服ブログ
他のサイトでも似たような方法で解決しているところが多数あります。
私は最初これでやってもだめだったので、再度やってみましたが、やはりボタンはずれたまま。
同じ現象に当たって、このサイトでは「amazlet風（改）-1」で解消したけれど、正しい方法は「amazlet風-2（ＣＳＳカスタマイズ用）」で作る方法だと。
そうなると、自分はどうしてだめなのかと悩んだのですが、さらに読み進めていくと書いてありました。
CSSを編集してプレビューをしてもなぜか反映されないという場合は「ctrl」＋「F5」を押してプレビュー画面を更新してみてください。
慢性胃炎克服ブログ
全くやっていませんでした。
画面の更新を。
そこで「ctrl」＋「F5」もやってみました。
解決しました。
まとめ
今回発見だったのは、「amazlet風（改）-1」はカエレバのカスタマイズでは使わないという話が、実はそうでもなかったことです。
実際、「amazlet風（改）-1」を使ったときに「amazlet風-2（ＣＳＳカスタマイズ用）」と同じように表示されたので。
もしもカエレバがきれいに表示されず悩んでいる場合には、「amazlet風（改）-1」も試してみてください。
コメント