カエレバ・ヨメレバのカスタマイズ(ショップリンクボタン化)

モバイルブラウジング時、画像の横に商品タイトルが回り込んだままで見にくかったので、回り込みの解除ついでにショップリンクをボタン化してみました。

そんなわけで、諸々のソースをご紹介して参ります。

Contents

1 前提条件
2 PCブラウジング用
3 モバイルブラウジング用
4 ショップリンクボタンにまつわるお話
5 まとめ

前提条件

以降カエレバ・ヨメレバでブログパーツを生成する際は、デザインに「amazlet風-2(cssカスタマイズ用)」を選択してください。

これにより、カエレバ・ヨメレバ側でstyle属性によるデザイン調整ソースを出力しないようになります。今回ご紹介するソースの意図するデザインが崩れないようにするための措置です。

PCブラウジング用

下記ソースコードを使用テーマのstyle.cssにコピー＆ペーストしてください。

.kaerebalink-box,
.booklink-box {
   text-align:left;
   font-size:small;
   padding: 20px 15px;
   margin: 15px 0;
   border: 1px solid #d3d3d3;
   width: 100%;
   box-sizing: border-box;
   zoom: 1;
   overflow: hidden;
}

.kaerebalink-info,
.booklink-info {
   margin: 0;
   line-height: 120%;
   zoom: 1;
   overflow: hidden;
}

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

.kaerebalink-image,
.booklink-image {
   display: inline-block;
   *display: inline;
   zoom: 1;
   float: left;
   text-align: center;
   margin:0 15px 10px 0;
   width: 100px;
   height: 100px;
   overflow: hidden;
}

.kaerebalink-name,
.booklink-name {
   margin-bottom: 10px;
}

.kaerebalink-name > a,
.booklink-name > a,
.kaerebalink-name > p > a,
.booklink-name > p > a {
   font-size: 14px;
   line-height: 1.5;
   padding-left: 18px;
   background: url('http://img.yomereba.com/kl.gif') 0 0 no-repeat;
}

.kaerebalink-name a,
.booklink-name a {
   text-decoration: none;
}

.kaerebalink-name a:hover,
.booklink-name a:hover {
   text-decoration: underline;
}

.kaerebalink-powered-date,
.booklink-powered-date {
   font-family: verdana;
   font-size: 8pt;
   margin-top: 5px;
}

.kaerebalink-detail,
.booklink-detail {
   margin-bottom: 10px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkkakakucom {
   display: block;
   float: left;
   font-size: 14px;
   margin: 0 0.5% 5px 0.5% !important;
   width: 32%;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkkindle a,
.shoplinkkakakucom a {
   display: block;
   text-align: center;
   padding: 10px 0;
   color: #fff;
   text-decoration: none;
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
}

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover {
   color: #fff;
   background: #363636;
   text-decoration: none;
}

.shoplinkamazon a {
   background: #febd69;
}

.shoplinkrakuten a {
   background: #BF0000;
}

.shoplinkkindle a {
   background: #0066c0;
}

.shoplinkkakakucom a {
   background: #051d93;
}

するとPCブラウジング時、カエレバ、ヨメレバのブログパーツが下記のように表示されます。

▲カエレバ

▲ヨメレバ

※一行に表示するボタン数を変更したい場合

先ほどコピペしたソースの下記箇所をご覧ください。ショップリンクボタンのスタイルを定義しています。

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkkakakucom {
   display: block;
   float: left;
   font-size: 14px;
   margin: 0 0.5% 5px 0.5%;
   width: 32%;
}

デフォルトでは<width: 32%>を指定しています。この”32%”というのは、ブログパーツ大枠の32%分の横幅という意味合いです。つまり、ショップリンクボタンを大枠の32%分の横幅で表示するということです。

続いて、<margin: 0 0.5% 5px 0.5%>の部分をご覧ください。これは、ボタンの左右にブログパーツ大枠の0.5%分の隙間を設けるという意味合いです。つまりボタンひとつ辺り大枠の1%分の隙間が生じるということです。

この二点を加味すると、(横幅32%のボタン*3=96%)+(隙間1%*3=3%)=99%となり、一行に最大3つのボタンが表示されることになります。

もしも一行に表示するボタン数を変更したい場合は、widthの数値をよしなに変更してください。単位は%を推奨します。こうすることで、ユーザーオペレーションによるブラウザのサイズチェンジに合わせてボタン幅が自動変化します。

モバイルブラウジング用

次にモバイル用のソースコードを使用テーマのstyle.cssにコピー＆ペーストしてください。

@media screen and (max-width: 540px) {
   .kaerebalink-box,
   .booklink-box {
      text-align: center !important;
   }
   
   .kaerebalink-image,
   .booklink-image {
      float: none !important;
      margin: 0 !important;
      width: auto !important;
      height: auto !important;
      max-height: 100px !important;
   }
   
   .shoplinkamazon,
   .shoplinkrakuten,
   .shoplinkkindle,
   .shoplinkkakakucom {
      float: none !important;
      margin: 0 0 5px 0 !important;
      width: 100% !important;
   }
}

するとモバイルブラウジング時、カエレバ、ヨメレバのブログパーツが下記のように表示されます。

▲カエレバ

▲ヨメレバ

※モバイルブラウジングとみなす横幅の閾値を変更したい場合

デフォルトでは<@media screen and (max-width: 540px){…}>と記述しています。これは、ブラウジング時の最大幅が540px以下の場合に{}で括られたスタイルを適用するという意味合いです。ですので、もっと［小さい/大きい]画面の場合にモバイル用のスタイルを適用したければ、<540px>の部分を任意の数値に置換してください。

また<float: none>を指定することで、商品画像右側の商品タイトルやショップリンクボタンの回り込みを解除し、改行させています。モバイルブラウジング時も回り込みを解除したくなければこの指定を削除してください。

ショップリンクボタンにまつわるお話

ちなみにボタン化に対応しているショップは下記の4つです。

Amazon
Kindle
楽天
価格.com

各ショップごとのボタン色は、PCブラウジング用ソースの下記箇所により定義しています。

.shoplinkamazon a {
   background: #febd69;
}

.shoplinkrakuten a {
   background: #BF0000;
}

.shoplinkkindle a {
   background: #0066c0;
}

.shoplinkkakakucom a {
   background: #051d93;
}

たとえばAmazonのボタン色を変更したければ、<.shoplinkamazon a {…}>の{}内に記述されている<#febd69>部分を任意のカラーコードに変更してください。

Color Table

また、オンカーソル時のボタン色はデフォルトでは一括指定です。下記ソースが該当する部分です。

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover {
   color: #fff;
   background: #363636;
   text-decoration: none;
}

各ボタンごとにオンカーソル時の色を別々に指定したい場合は、下記のように記述してください。

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover {
   color: #fff;
   text-decoration: none;
}

.shoplinkamazon a:hover {
   background: [任意のカラーコード];
}

.shoplinkrakuten a:hover {
   background: [任意のカラーコード];
}

.shoplinkkindle a:hover {
   background: [任意のカラーコード];
}

.shoplinkkakakucom a:hover {
   background: [任意のカラーコード];
}