カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法?がAmazonから国内の市場に協力?することやAmazonのPA-APIの仕様変更?により、楽天(国内)メインに仕様変更がされました。
カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法
2025年6月16日 (月曜日)本日の人気記事トップ10
所要時間目安: 約 5 分
今日は2025年6月16日です。
この記事は2019年2月2日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月16日 (月曜日)↓における週間月間人気記事トップ3は?↓
- 本日
- 週間
- 月間
-
WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです 1PV
WAKO'S製品はどれも素晴らしい商品ばかりですが、その中でもハイブリッド車用の低粘度エンジンオイルに対しての添加剤です。SUPERHVは、低粘度エンジンオイルのピストンへのエンジンオイルの皮膜形成さ…
-
WordPressプレビュー出来ない。権限がありません。解決方法保存版 1PV
えー、はぁ( ´Д`)=3良かった…。 一昨日から続いていたWordPressで新規投稿記事や過去記事のプレビューが出来ないという問題・不具合について、 見事(やっと)解決できたので、 備忘録としての…
-
RSSフィードにアイキャッチ画像を表示させる方法Feedlyなど 1PV
WordPressでのブログ運営にして間もなく一年が経とうとしています。 はじめは試行錯誤でphpって何?functionって日本語だと機能って意味だけれど何?みたいな感じでした。まぁ、今でも超有名な…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
そこで、これまでカエレバ・ヨメレバのサービスの恩恵を受けていた私たちですが、以前から楽天商品メインでCSSにて表示のカスタマイズをしている場合においてスマホでの表示やパソコンでの表示に若干にズレがることが気になっていました。
特にスマホ表示の際には画像のみしか表示されないことが多々ありました。(私だけかもしれませんが・・・。)
今回の仕様変更?に伴い重い腰を上げて何がイケないのか考えてみました。
カエレバ・ヨメレバのCSSにてのカスタマイズで表示がズレてしまうのをズレないようにする方法です。
以前に、私自身のブログにて以下のようにCSSのカスタマイズを紹介させていただきました。
ただ、
上記のコードのみですとスマホ表示の際には、楽天市場メインでリンクを作成すると画像のみしか表示されませんでした。
また、パソコン表示においてもボタン部分が若干のズレがありました。
以前紹介させていただいたCSSによるカエレバ・ヨメレバの表示カスタマイズと、現在の私のCSSではだいぶ異なってしまいますが・・・。
多くの方々の参考になりましたらと思いまして記事にしています。
私の場合ですが、
前提条件としてamazlet風(改)-3にてCSSをカスタマイズしています。
他の多くの方々は、
amazlet風-2(CSSカスタマイズ用)にて使用されていると思われますが同じかと思われます。
現在のCSSは異なりますが、以下に以前のCSSを再度記述します。
そこで、
カエレバ・ヨメレバの表示をCSSにてカスタマイズした際にズレてしまったり画像のみしか表示されなかったりを解消する方法です。
/*--ヨメレバ・カエレバ-----------------------------------------------------*/
.booklink-box, .kaerebalink-box{
margin: 16px auto;
padding: 5%;
width: 85%;
overflow: hidden;
border: solid 1px #ccc;
font-size: 90%;
}
.booklink-image, .kaerebalink-image {
margin: 0 0 16px 0;
}
.booklink-image img, .kaerebalink-image img {
margin: 0 auto;
display: block;
text-align: center;
}
.booklink-info, .kaerebalink-info {
overflow: hidden;
line-height: 120%;
text-align: center;
}
.booklink-name, .kaerebalink-name {
margin-bottom: 16px;
font-size: 100%;
line-height: 120%;
}
.booklink-powered-date, .kaerebalink-powered-date {
margin-top: 16px;
font-family: verdana;
font-size: 8pt;
line-height: 120%;
}
.booklink-detail, .kaerebalink-detail {
margin-bottom: 16px;
}
.booklink-link2, .kaerebalink-link1 {
margin-top: 16px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkyahooAuc a, .shoplinkkakakucom a, .shoplinkseven a {
margin: 10px auto 0 auto;
padding: 4px;
display: block;
width: 90%;
border-top: solid 1px #dadada;
border-right: solid 1px #c7c8c8;
border-bottom: solid 1px #949494;
border-left: solid 1px #c7c8c8;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #bcbcbc;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
font-weight: 700;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -0.5px 0 rgba(1, 1, 1, .6);
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkyahooAuc a:hover, .shoplinkkakakucom a:hover, .shoplinkseven a:hover {
border-top: solid 1px #b4b4b4;
border-right: solid 1px #a0a2a2;
border-bottom: solid 1px #6e6e6e;
border-left: solid 1px #a0a2a2;
box-shadow: 0 1px 1px rgba(148,148,148,1);
}
.shoplinkamazon a:active, .shoplinkrakuten a:active, .shoplinkyahoo a:active, .shoplinkyahooAuc a:active, .shoplinkkakakucom a:active, .shoplinkseven a:active{
position: relative;
top: 1px;
border-top: solid 1px #666;
border-right: solid 1px #999;
border-bottom: solid 1px #ccc;
border-left: solid 1px #999;
box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
background-color: #bcbcbc;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .3) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .0) 100%);
}
.shoplinkamazon a {
color: #fc9711;
}
.shoplinkrakuten a {
color: #bd0000;
}
.shoplinkyahoo a {
color: bulue;
}
.shoplinkyahooAuc a {
color: #red;
}
.shoplinkkakakucom a {
color: #fc9711;
}
.shoplinkseven a {
color: #23518f;
}
.booklink-footer{
clear:left;
}
何度もいますが、
現在は上記のコードではありません。
(カスタマイズしすぎてCSSをまとめきれませんでしたので、取り急ぎ以前のものを掲載しております。)
ペコm(_ _;m)三(m;_ _)mペコ
ですが、
この中で、
以下の2行の記述が足りないことに気づきました。ということは以下の2行を追記するだけでボタン表示のズレなどが解消されました。
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
このたったの2行を追加することによって、これまで数年間悩んできていたスマホ表示の際のズレなどが解消されました。
これからは、カエレバ・ヨメレバ(ポチレバも?)のサービス提供は楽天市場メインになるようですので、
これを機にカエレバ・ヨメレバ(ポチレバも?)のCSSにてカスタマイズの見直しができてよかったと思っています。
また、
この記事が少しでも多くの方の参考になりましたら幸いだと思っています。
なんかやっつけ記事になってしまいましたが・・・。
とにかく、カエレバ・ヨメレバにおいてボタン表示やスマホ表示においてズレたり表示がおかしい場合には、上記した2行を既存のCSSに追記してみてください。
おそらく、ボタン表示のズレなどが解消されると思われます。
うーん、じつに読みにくい(;´д`)トホホ…。すみません。。。。
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
あなたにおすすめ
乙武洋匡さんもTwitter裏アカウント使ってたの…。「純愛エロメガネ」らしい
(アイキャッチ画像出典元:乙武洋匡さん公式Twitterより:https://twitter.com/h_ototake)先日、おとといかな…。 Twitter(ツイッター)に裏アカウント(通称:裏垢...
Stinger6トップページ記事間にアドセンス広告を表示・入れる方法
ここのところ WordPressにハマっている私です。 特にまだ始めたばかりなのでカスタマイズに没頭中です。(汗) トップページの記事一覧にダッシュボードのStinger管理よりいくつの記事を表示する...
YouTubeが広告ブロッカーAdblock Plusを遮断するもAdblock Plus側も対策を検討とのこと
先日の記事として、以下の記事を投稿しましたが、逆にAdblock Plus側もその広告ブロック遮断に対して対策をとあります。 どちらの言い分もあるのかもしれませんが、一応You Tubeの利用規約には...
キッチンの蛇口交換費用がかかるので自分でする方法
えー、これまで5年と3ヶ月間キッチンのワンホールタイプの水道蛇口の高さが低いので、食器を洗う際や料理を作る時などには腰をかがまなければなりませんでした。ということは、腰に負担がかかっていました。 もち...
Multiplex 広告

あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ10
おすすめの記事一部広告
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
新着コメント