書籍リンクに「ヨメレバ」を導入してみました

※本サイトはアフィリエイトプログラムによる収益を得ています。
　ページ内のリンクがアフィリエイトリンクの場合があります。

　今まで書籍の詳細リンクははてブのブログパーツを使っていたのですが、「ヨメレバ」というものに変えてみました。

書籍紹介ブログパーツヨメレバ

　はてブのものだと書籍とKindleがわかりづらい感じだったのですよね。どちらかしか出ないし、どちらが出ると選べたわけでもないし。

f:id:kagerou_ts:20160228162024j:plain

ヨメレバだとそれぞれにリンクがあるのでわかりやすい。

f:id:kagerou_ts:20160228162224j:plain

楽天とか7netとかにも対応しているようなので、ついでに入れてみました。

私はだいたいこの中ではAmazon一択になってしまっているんですけど、7netも電子版売ってるんですね。

ヨメレバの導入

　ブログパーツの生成はさらっと簡単。

　まずヨメレバのサイトにいって、アフィリエイトIDを保存します。

　そえからISBNコードで書籍を検索して「表示」ボタンを押すと、ブログパーツのコードが生成されます。

　あとはそれを貼り付けるだけ。はてブであれば、「HTML編集」のほうから貼り付けます。

　どうもアフィリエイトIDはブラウザの情報として保存してるみたいなので、会員登録とかはいらないみたい。これくらいなら気楽で良いですね。

デザインのカスタマイズ

　さてここで生成したままでもいいのですが、ちょっと思っていた感じではない。

f:id:kagerou_ts:20160228163142j:plain

なのでデザインのカスタマイズをしてみます。

ヨメレバの設定を変更する

　初期から何も変更していないと「amazlet風-1」という形式で生成されていると思うのですが、これを「amazlet風-2(cssカスタマイズ用)」に変更して、コードを生成します。

CSSを追加する

shufulife.com

にあるコードの「ひとつめのコード」「二カ所目のコード」を使いますが、これだと7netのリンクがそのままになってしまいました。

　どうやらそれぞれのショップリンクは別クラスになっているようで、指定を増やさないといけないよう。

クラス名を見ていると「shoplinkamazon」のように、クラス名には「shoplink」がついてるようなので、それでマッチングして定義をまとめてみました。

これで増やしてもいちいち定義をしていかなくていいはず。

という改造を施した以下のコードを、「デザイン→カスタマイズ→デザインCSS」に追加します。

/*--------------------------------------
 ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
 width:78%;
 margin: 1em 0 1em;
 padding:0 8%;
 border:double #d2d7e6;
 overflow: hidden;
 font-size:small;
 border-radius:2px;
}

.booklink-image, .kaerebalink-image{
 margin:15px 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
 display:block;
 margin:0 auto;
 text-align:center;
}

.booklink-info, .kaerebalink-info{
 text-align:center;
 line-height:120%;
 overflow: hidden;
}

.booklink-name, .kaerebalink-name{
 font-size:15px;
 margin-bottom:5px;
 line-height:1.2em;
}

.booklink-powered-date, .kaerebalink-powered-date{
 font-size:8pt;
　　　　 margin-top:10px;
 line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
 font-size:8pt;
 margin-bottom:3px;
}

.booklink-link2, .kaerebalink-link1{
 margin-top:3px;
}

[class^="shoplink"] {
 float:left;
 width:45%;
 height:15px;
 overflow:hidden;
 background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
 background-color:#ffffff;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 margin:5px 5px 0 5px;
 padding:10px 0px;
 text-align:center;
 }
 
[class^="shoplink"]:hover{
 background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
 background-color:#f6f6f6;
}

[class^="shoplink"]:active{
 position:relative;
 top:1px;
}

[class^="shoplink"] a{
 display:block;
 cursor:pointer;
 text-decoration:none;
 font-weight:800;
 text-shadow:1px 1px 1px #dcdcdc;
 font-size:11px;
 color:#808080;
}
 
.shoplinkamazon a{
 color:#FF9901;
}

.shoplinkrakuten a{
 color:#c20004;
}

.shoplinkkindle a{
 color:#007dcd; 
}

.shoplinkyahoo a{
 color:#7b0099;
 font-size:10px;
 } 

.booklink-footer{
 clear:left;
}

/*--------------------------------------
 780px ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
 width: 90%;
 margin:20px auto;
 padding:20px;
}

.booklink-image, .kaerebalink-image{
 margin:0 15px 0 0;
 float:left;
}


.booklink-info, .kaerebalink-info{
 margin:0;
 text-align:left;
}

.booklink-name, .kaerebalink-name{
 margin-bottom:24px;
 line-height:1.5;
}

.booklink-link2, .kaerebalink-link1{
 margin-top:10px;
}

[class^="shoplink"] {
 float:left;
 width:30%;
 margin:15px 1% 0 auto;
 padding:10px 0px;
}

.shoplinkyahoo a{
 font-size:10px;
}