続・カエレバとヨメレバのcssカスタマイズ

前回、カエレバとヨメレバのカスタマイズ用cssを修正しました。機能的には十分になりましたが、ボタンが大きいこともありけっこうな場所を取ります。

そこで、今回はもっとシンプルに表示するように手を加えて行きます。

スポンサーリンク

ボタンを絞り込んで省スペース化

前回のカスタマイズではカエレバではAmazonと楽天の2つを、ヨメレバではAmazon,Kindle,楽天ブックス,楽天koboの4つのボタンを表示することを想定していました。

前回のカスタマイズは以下をご参照ください。

関連 カエレバとヨメレバのcssカスタマイズ

これをどちらも3個のボタンに統一したいと思います。カエレバにはYahoo!ショッピングを追加、ヨメレバは楽天koboを削除しそれぞれ3個にします。

ボタンを3個にするにあたって、こちらのサイトを参考にさせていただきます。

参照 コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ

上記サイトのカスタマイズは僕が思うところの理想形です。テーマがStingerならそのままコピペで良いかなとも思います。

違うテーマでも多少手直しすれば利用できますが、後学のために現在のcssに必要な要素を組み込むことで対応します。

以下はこの記事作成時のカスタマイズ結果をあらわしています。(画像化してあります)

カエレバ

カエレバ カスタマイズ 2016年8月26日現在

ヨメレバ

ヨメレバ カスタマイズ 2016年8月26日現在

最新のカエレバとヨメレバ

cssソースコード

以下に掲載しているものが最新のコードです。

当サイトのテーマはSimplicity2を利用しているので、次の場所にcssを貼り付けます。
「外観」-「テーマの編集」→Simplicity2 child: スタイルシート (style.css)

/* カエレバ,ヨメレバ カスタマイズ */
.kaerebalink-link1 img, .booklink-link2 img{display:none;}

.kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
}
.kaerebalink-image, .booklink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img, .booklink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info, .booklink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name, .booklink-name {
  font-size: 18px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
  float: left;
  width: 30%;
  text-align: center;
  margin: 15px 1% 0 auto;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
/* ショップリンクの文字色をAMPページと統一 */
/* 以下 Simplicityのamp.cssから拝借 */
.shoplinkamazon a {
  color: #ff9901;
}
.shoplinkrakuten a {
  color: #c20004;
}
.shoplinkkindle a {
  color: #007dcd;
}
.shoplinkyahoo a {
  color: #7b0099;
  font-size:14px;
}
/* 楽天koboはamp.cssになかった */
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkrakukobo a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 580px) {
  .kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image, .booklink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img, .booklink-image img {
  margin: 0 auto;
}
.kaerebalink-info, .booklink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name, .booklink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
  float: none;
  width: 96%;
  margin: 10px 0; 
  padding: 5px 0;
}
}/* カエレバ,ヨメレバ カスタマイズ END */

【変更点 その1】

ショップリンクの文字の色を変更しています。文字の色を変更したのは、AMPページと統一するためです。AMP化はSimplicityの機能を使って実行しています。AMPページではSimplicity内のcssに従ってショップリンクの色が決定されます。

AMPページの色がいい感じだったので、通常のページも合わせることにしました。(Yahooショッピングは文字数が多く、はみ出してしまうのでフォントサイズを調整しています。)

/* ショップリンクの文字色をAMPページと統一するため */
/* 旧設定をコメントアウト
.shoplinkamazon a{
  color: #565656;
}
.shoplinkrakuten a{
  color: #FF0040;
}
.shoplinkyahoo a{
  color: #00A4CC;
  font-size:14px;
}
.shoplinkkindle a{
  color: #FE9900;
}
.shoplinkrakukobo a{
  color: #00A4CC;
}
*/
/* 以下 Simplicityのamp.cssから拝借 */
.shoplinkamazon a {
  color: #ff9901;
}
.shoplinkrakuten a {
  color: #c20004;
}
.shoplinkkindle a {
  color: #007dcd;
}
.shoplinkyahoo a {
  color: #7b0099;
  font-size:14px;
}
/* 楽天koboはamp.cssになかった */

※変化が見られないという方は、ブラウザのキャッシュをクリアする必要がります。

【変更点 その2】

楽天アフィリエイトのリンクを『もしもアフィリエイト』に置き換えた際、楽天のボタンがはみ出すようになってしまいました。

カエレバ 楽天市場のボタンがはみ出している

もしものリンクの中に、トラッキング用imgコードがあるためだそうです。

先頭に次の行を追加することで直りました。

.kaerebalink-link1 img, .booklink-link2 img{display:none;}

状況が変わった時に、変更を加えています。以下のカエレバ、ヨメレバは今現在のカスタマイズの状態が分かるように設置してあります。もちろん広告として機能しているのでクリックできます。

カエレバ

ヨメレバ

フォローする

スポンサーリンク