つんどくダイアリー

つんどくダイアリー

わりと好き勝手書いてるからネタバレてたらごめんね。旧「怒濤の詰ん読解消日記」。積まれてしまったマンガ、ラノベなどを読んで感想を書いています。結果として面白い本の紹介だったりまとめだったりになってる。/端末の表示によると、あと740冊/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

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

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

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

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

 

 はてブのものだと書籍と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;
}

 とりあえず文字のデフォルト色はグレーにしています。

このへんの色を変えたいときは、クラス別に追加していく感じで。

 

 これで最初の画像のような感じになりました。

f:id:kagerou_ts:20160228162224j:plain

 

(2016/5/8追記) スマートフォン向けカスタム

 スマートフォンでの表示はこのままだとおかしくなってしまうので、少し修正します。

[class^="shoplink"] {
float:left;

の「float:left」を削除。これでボタンの回り込みがなくなります。

 

 またその下の

width:45%;

のパーセンテージを変更することで、ボタンの大きさを変えます。

うちは80%にしています。

 

 できたらこれを、「デザイン > スマートフォン > 記事 > 記事下」に貼り付けます。

ここはHTMLに直接反映されるところなので、

<style type="text/css">
</style>

タグで囲んで下さい。

 

するとこんなかんじになります。

f:id:kagerou_ts:20160508160559j:plain

 

よくわからないこと

 ほんとはバリューコマースのIDも取得して、紀伊國屋とかe-honとかも追加していたのですが、それらのリンクはバリューコマースのサイトに飛ばされるだけで商品リンクとして動いていなかったので外しています。

また申請して間もないからでしょうかね…

(3/6追記 申請通ってから試してみたらちゃんとジャンプするようになっていました。やはり少し時間がいるみたい?)

 

 バリューコマースを見ていたらBOOK☆WALKERもあるみたいなので是非対応して欲しい。対応してくれないかなあ。

 

 あと、ISBNで特定してるってことは紙本として出ていないものはどうなるんだろうとブックマークレットからやって見てみたら「この商品は書籍ではありません」と言われました。

これは仕方ないといえばそうですね…