すたすた式
Blogger
ヨメレバでリンクを作成したときにボタンがズレた（レイアウトが崩れた）ので修正しました。
もしもアフィリエイト、バリューコマース + カスタムCSSの組み合わせです。
カスタムCSSはカエレバ・ヨメレバCSSジェネレーター | つばさのーとで作ったものをベースにしました。。
カエレバ・ヨメレバCSSジェネレーター | つばさのーと
カエレバ・ヨメレバのCSSデザインをカスタマイズするジェネレーターを作成しました。よければ試してみてください。
追記：新しいデザインのものを作ってみました。
カエレバ・ヨメレバのデザインを変更しました。＋アクセシビリティ-すたすた式
カエレバ・ヨメレバのデザインを変更しました。ver.2-すたすた式
前に作ったカエレバ、ヨメレバ、デザインの修正版です
こんな感じになっていました。
スマホの時
商品リンクをつくるとき、width="1"とheight="1"のイメージ(img)が挿入されるようで、これが原因です。
width="1"
height="1"
こんな感じのものが挿入されます <img src="//i.moshimo.com/af/i/impression?***********" width="1" height="1" style="border:none;">
調べてみたところヨメレバでは、Amazonとkindleだけ1px のイメージが挿入されないようです。（2019年2月 現在）
今後、どのような形でリンクが生成されるかわからないので、とりあえず以下の方法をとりました。
１、挿入されるimage をdisplay:none;を使って非表示にする。
image
display:none;
２、各リンクボタンの下に間隔つくる。
ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ
リンク先にあるように、下記コードを使ってimageを非表示にします。
.kaerebalink-link1 img, .booklink-link2 img{display:none;}
.booklink-link2と.kaerebalink-link1の中（子要素）のdivに対して margin-bottom:20px;を追加しました。
.booklink-link2
.kaerebalink-link1
div
margin-bottom:20px;
.booklink-link2 > div, .kaerebalink-link1 > div { margin-bottom:20px; /* 各リンクボタンの下に間隔をつくる */ }
貼り付ける場所は .booklink-link2, .kaerebalink-link1 {} の下あたりにしました。
.booklink-link2, .kaerebalink-link1 {}
.booklink-link2, .kaerebalink-link1 {} /* ここらへんに挿入 */ .booklink-link2 a, .kaerebalink-link1 a { width: 90%; display: block; margin: 0px auto 0px; /* mod 2017.12.21 default 0px auto 0px */ padding: 10px 1px; text-decoration: none; font-size: 14px; font-weight: bold; border-radius: 5px; transition: all .5s; text-decoration: none; }
こんな感じです。
.booklink-link2, .kaerebalink-link1 {} /* リンクボタン ズレ対策 */ .booklink-link2 img, .kaerebalink-link1 img{display:none;} .booklink-link2 > div, .kaerebalink-link1 > div { margin-bottom:20px; /* 各リンクボタンの下に間隔をつくる */ } .booklink-link2 a, .kaerebalink-link1 a { width: 90%; display: block; margin: 0px auto 0px; /* mod 2017.12.21 default 0px auto 0px */ padding: 10px 1px; text-decoration: none; font-size: 14px; font-weight: bold; border-radius: 5px; transition: all .5s; text-decoration: none; }
もしもアフィリエイトやバリューコマースでヨメレバ・カエレバのカスタムCSSリンクを作るときに、1pxのimageが挿入されることでリンクボタンがズレることがある。ということは知っていました。
カエレバ・ヨメレバCSSジェネレーター | つばさのーとを使って作ったものは特に問題なく利用できるものと思っていましたが、今回、ヨメレバのリンクを作るときに問題が発生したので調べてみました。
Amazonはカエレバとshoplinkが共通だったので、ヨメレバ用にこれを追加
/* ヨメレバ amazon のリンクボタンの下に間隔をつくる */ .booklink-link2 > .shoplinkamazon a { margin-bottom:20px; }
kindle は ヨメレバだけだったので margin-bottom:20px;を追加
.shoplinkkindle a { color: #fff; background: #90b82a; border: 2px solid #90b82a; box-shadow:2px 2px 2px #555; margin-bottom:20px; /* ヨメレバ 下に間隔をつくる */ }
としても望み通りの結果が得られました。
しかし今後、各リンクに対してどのような変更（ img が挿入されたり、しなくなったり）があるかわからないので、とりあえず挿入される img はすべて非表示、リンクボタンの下に間隔を作る、という方法をとりました。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿