スマホやタブレットでカエレバの埋め込み画像がおかしくなったときの対処方法（テーマ:LION MEDIA）│ITめし

1 ■カエレバ・ヨメレバの商品リンクがいきなり壊れた！
2 ■CSSに、以下のコードを追記します

■カエレバ・ヨメレバの商品リンクがいきなり壊れた！

WordPressをバージョンアップしてから、スマホでカエレバのリンクを見ると、以下のように、ででーんと、謎の空白が出るようになってしまいました。

Webで調べると、
「気づかずに、カエレバでデフォルトのデザインにしたままリンクを作成していた」
「CSSでデザインを変えていたのに、デフォルトのデザインにしてしまった」
のが理由、ということをかなり見つけました。

が、私は最初っからデフォルト（amazlet風(改-1)）のまま使っていました。

なので、この情報では改善しません。。

そこで、この機会に強引にCSSでデザインを指定することにしました。

強制的にCSSでデザインを指定することで、このピンチを脱出！

無事に、正常に表示されるようになりました。

同じような現象になった方で、デフォルトのデザインをカエレバ・ヨメレバで使用している方は、参考にしてください！

■CSSに、以下のコードを追記します

/*—– カエレバ・ヨメレバ —–*/
.kaerebalink-box,
.booklink-box {
margin: 20px;
padding: 20px;
border: 1px solid #d0d0d0;
min-height: 160px;
-webkit-box-shadow: 0 0 25px #e9e9e9 inset;
box-shadow: 0 0 25px #e9e9e9 inset;
}

.kaerebalink-image,
.booklink-image {
text-align: center;
float: left;
width: 30%;
}

.kaerebalink-image a:hover,
.booklink-image a:hover {
border-bottom: none;
}

.kaerebalink-name a,
.booklink-name a {
font-size: 1.3em;
font-weight: bold;
line-height: 1.4;
}

.kaerebalink-name p,
.booklink-name p {
margin: 0;
}

.kaerebalink-powered-date,
.kaerebalink-detail,
.booklink-powered-date,
.booklink-detail {
font-size: 0.6em;
line-height: 0.2;
}

.kaerebalink-powered-date a,
.booklink-powered-date a {
font-size: 0.6em;
}

.kaerebalink-link1 div,
.booklink-link2 div {
font-size: 0.8em !important;
margin: 10px 0 !important;
display: inline-block !important;
}

.kaerebalink-link1 div a,
.booklink-link2 div a {
font-size: 1.2em;
color: #ffffff;
line-height: 1.8;
text-decoration: none;
text-align: center;
margin: 0 0.2em 0.7em 0;
padding: 0.2em 0.7em;
border-bottom: 5px solid #777777;
width: 11em;
display: block;
border-radius: 0.3em;
}

.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover {
color: #ffffff;
text-decoration: none;
border-bottom-width: 3px;
position: relative;
bottom: -2px;
filter: alpha(opacity=60);
opacity: 0.6;
}

.kaerebalink-link1 .shoplinkamazon a,
.booklink-link2 .shoplinkamazon a,
.booklink-link2 .shoplinkkindle a {
border-bottom-color: #dd8500;
background: #ff9900;
}

.kaerebalink-link1 .shoplinkrakuten a,
.booklink-link2 .shoplinkrakuten a {
border-bottom-color: #9d0000;
background: #bf0000;
}

.kaerebalink-link1 .shoplinkyahoo a,
.booklink-link2 .shoplinkyahoo a {
border-bottom-color: #dd002c;
background: #ff0033;
}

.kaerebalink-link1 .shoplinkseven a,
.booklink-link2 .shoplinkseven a {
border-bottom-color: #008f34;
background: #00b140;
}

.kaerebalink-link1 div a img {
margin: 0;
}

.booklink-footer {
clear: left;
}

/* もしもアフィリエイトの場合不要な画像を削除 */
.kaerebalink-image img[src^=”//i.moshimo.com/af/i/impression”],
.booklink-image img[src^=”//i.moshimo.com/af/i/impression”],
.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkbellemaison img,
.shoplinkcecile img,
.shoplinkkakakucom img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkbk1 img,
.shoplinkehon img,
.shoplinkkino img,
.shoplinktoshokan img {
display: none;
}