Loading…

記事内にプロモーションが含まれています。

カスタマイズ カスタマイズ ツール 伝えたいこと

カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法

カエレバのデザイン選択画像

所要時間目安:5

This session is using  IPv4  is established in

この記事は2019年2月2日のものです。現在は状況が異なる可能性がありますのでご注意ください。

カスタマイズ カスタマイズ ツール 伝えたいこと

目次に行く・戻る

メルカリ招待コード:

カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法?がAmazonから国内の市場に協力?することやAmazonのPA-APIの仕様変更?により、楽天(国内)メインに仕様変更がされました。

2019年1月初旬に、カエレバ・ヨメレバは、メインデータをAmazonから楽天に移行することになりました。これまでは、Amazonの商品画像をメインに、他のショッピングモールを紹介する形でしたが、これからは楽天市場の商品をメインに、Amazonと他ショッピングモールを紹介する形となります。

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


そこで、これまでカエレバ・ヨメレバのサービスの恩恵を受けていた私たちですが、以前から楽天商品メインで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に追記してみてください。

おそらく、ボタン表示のズレなどが解消されると思われます。

うーん、じつに読みにくい(;´д`)トホホ…。すみません。。。。

カスタマイズ, カスタマイズ, ツール, 伝えたいこと」同じカテゴリーの記事一覧

あなたにおすすめ

別のユーザーでPlugfree NETWORKが起動しています。

PC Windows10 伝えたいこと 備忘録 設定

別のユーザーでPlugfreeNETWORKが起動しています。解決方法

ここ数日の間ですが、タイトルのように「別のユーザーでPlugfree NETWORKが起動しています。」というポップアップ通知が表示されるようになりました。 このアプリケーションは、富士通製PCにイン…

もっと読む

インフィード広告アドセンス

年賀状

PC インターネット カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

年賀状無料テンプレート無料イラスト素材でGoogleスライドで作成方法

今年も残すところあとわずかとなりました。ちょうど、あと20日間です。21日後には2017年、新年(←本当は要らないです)あけましておめでとうございます。の挨拶が飛び交っています。年賀状を元旦に届くよう…

もっと読む

インフィード広告アドセンス

Windows10 update Assistant is already running

PC Windows10 伝えたいこと 備忘録

Windows10サポート期間一覧表

Windows10がリリースされて早いものでもう2年と7ヶ月経ちます。そんなWindowsの最新バージョンであるWindows10ですがサポート期間があるのをご存知でしょうか。

インフィード広告アドセンス

インフィード広告挿入方法

AdSense AFFINGER4Pro STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

インフィード広告を記事一覧の間に表示させる方法

今月初頭に(上旬)アドセンスの広告表示方法に通常のコンテンツ連動型広告にプラスで、インフィード広告と記事内広告が解禁されました。 以前に、トップページの記事一覧にきれいにアドセンス広告を挿入する方法を…

もっと読む

インフィード広告アドセンス

スマホ電波状態が悪い時の改善方法

Android iPhone スマホ 伝えたいこと 備忘録 旅行

スマホの電波状態が悪い時に手っ取り早く改善する1つの方法

今では携帯電話の電波が悪いというよりスマホの電波状態が悪いということの方が多いと思われます。 そんなスマホの電波が悪くて途切れ途切れになってしまったりした時に、電波が悪い状態を一発で改善するひとつの方…

もっと読む

インフィード広告アドセンス

熊本県熊本地方震度7地震

伝えたいこと 備忘録 時事ネタ

安否情報確認方法、熊本県熊本地方で震度7地震について

本日、(日付が変わってしまったので昨日)21:26分頃に熊本県にて震度7という大きな地震がありました。まだ、時間も経っていなくさらに夜で暗いということもあって、 正確な被害情報は全ては収集できていない…

もっと読む

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Googleニュース

2024-05-02

アルファロメオMiTo 徹底メンテナンス! 2024年5月2日. テーマ:輸入車メンテブログ. コラムカテゴリ:くらし. 明日からゴールデンウイーク休業として、6日まで ...

2024-05-02

高級をはじめ様々なモデルのインテリアに採用される本革。しかし本革はデリケートな素材でもあるため、メンテナンスには気を使わなければならなかったりも ...

Total245


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-カスタマイズ, カスタマイズ, ツール, 伝えたいこと

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください