Amazon,楽天,7netで本を紹介できるヨメレバをcssカスタマイズ

2018年5月20日

ヨメレバとは?

 

 

色々な方のブログを見ているとこのように本を紹介して、アマゾンや楽天のリンクを貼り付けているのを見るかと思うのですが、これらは全てヨメレバという書籍紹介用のブログパーツを利用しています。

リンクはこちらになります。
ヨメレバ

 

こちらでAmazonのアフィリエイトIDや楽天のアフィリエイトIDを登録すると、上のようなブログパーツが出来上がります。細かい作成方法はリンク先に譲りますが、今回はそんあブログパーツを自信のサイトに導入したので共有させて頂きました。

一つのサービスのリンクしか紹介していないもったいないことしていませんか?

 

私もこの記事を書く前に設置した口なのであまり他人のこと言えませんが、設置の動機となったので書かせてもらいます。

 

サイトには、希望の本を購入したいという目的は同じであれど、Kindleで読みたいという人と楽天でポイント貯めているから楽天Booksを利用するという人など様々な事情を持った方が訪れます。

 

そこでAmazonへのリンクしかないとか楽天へのリンクしかないとかなるとサイトに訪れたユーザの希望のリンクがない場合は機会損失となってしまいます。

そんな勿体無い状態を少しでも解消できるのがこのヨメレバというツールになります。

 

オススメする本を購入して欲しいという方はこの機会にぜひこのブログパーツを導入してみましょう。

本記事では簡単な導入方法と自分が行なったカスタマイズについて紹介します。

 

ヨメレバをcssカスタマイズ(verison1の場合)

 

※必要なAmazon,楽天のアフィリエイトIDはすでに入力しているものとします。

 

ヨメレバでは、下記のような画面でISBNを入力してブログパーツを作成します。
ISBNは書籍を識別する一意のコードで「本の題名 ISBN」などでググればISBNはわかります。

 

ヨメレバでは表示形式をいくつか選択できますが当ブログ導入時は、amazlet風-2(cssカスタマイズ風)というレイアウトのものを選択しました。

 

ヨメレバブログパーツ作成フォーム

 

必要項目を入力して表示ボタンを押すと貼り付け用のHTMLが生成されます。
このHTMLを自身のブログの表示させたい部分に貼り付ければ完了です。

 

ここまでで本を紹介するという目的は達成できているのですが、自身でもう少しカスタマイズしたかったのでcssを追加して、表示をカスタマイズしました。

テーマは「ついクリックしたくなるカスタマイズ」です!!
どうでしょうか??こういう感じにしてみました。

コードは以下に張っていますので参考にして頂ければ。

 

/* Yomereba */
@media (min-width: 770px) {
    .cstmreba{display: table;}
    .cstmreba .booklink-image{
        display: table-cell; 
        float: left;
        padding: 0 30px;
     }
    .cstmreba .booklink-info{
        display: table-cell;
        padding: 0 30px;
    }

 }
.cstmreba{
    padding: 15px;
    border:1px solid #ededed;
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}
.cstmreba .booklink-image{
    text-align: center;
}

.cstmreba .booklink-info{
    text-align: center;
}
.booklink-name{
    margin-top: 30px;
    margin-bottom: 15px;
}
.booklink-name a{
    font-size: 18px;
}
.booklink-detail{
    margin: 0px  10px;
}
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkseven a {
    display: block;
    background: red;
    margin: 10px;
    padding: 15px;
    text-decoration:none;
    color: white;
    text-align: center;
    box-shadow: 0px 5px 0px 0px lightgray;
}

.shoplinkamazon a{
    border: 1px solid #E55812;
 background: #E55812;
  box-shadow: 0px 5px 2px 0px #E55812;
}

.shoplinkkindle a{
  border: 1px solid #EC058E;
  background: #EC058E;
  box-shadow: 0px 5px 2px 0px #EC058E;
}

.shoplinkrakuten a{
  border: 1px solid #2A2D34;
  background: #2A2D34;
  box-shadow: 0px 5px 5px 0px #2A2D34;
}
.shoplinkseven a{
  border: 1px solid #62BBC1;
  background: #62BBC1;
  box-shadow: 0px 5px 5px 0px #62BBC1;
}
/* Yomereba */

 

このコードを使えば上記のような本紹介のパーツが出来上がります。

 

通常では2カラムのレイアウトで表示されますが、画面サイズが狭い場合にも対応しており、画面幅が狭い場合は1カラムのレイアウトで表示されます。
※ご自身のPCのスクリーンを縮小させて見たり携帯から見てみて、ご確認ください。

もし、こちらのカスタマイズがお気に入りになったら、どんどんパクちゃってください。変更も自由にしてしまって構いません。

 

色合いを変更する場合は,

 

.shoplinkamazon a{
    border: 1px solid #E55812;
 background: #E55812;
  box-shadow: 0px 5px 2px 0px #E55812;
}

.shoplinkkindle a{
  border: 1px solid #EC058E;
  background: #EC058E;
  box-shadow: 0px 5px 2px 0px #EC058E;
}

.shoplinkrakuten a{
  border: 1px solid #2A2D34;
  background: #2A2D34;
  box-shadow: 0px 5px 5px 0px #2A2D34;
}
.shoplinkseven a{
  border: 1px solid #62BBC1;
  background: #62BBC1;
  box-shadow: 0px 5px 5px 0px #62BBC1;
}

 

ここら辺のbackgroundやborder,box-shadowあたりを変更してくだされば色合いは変更できます。

配色が難しいという方は、coolors.coあたりをお使いになると良いと思います。

 

紹介記事も書いているので興味があればどうぞ
=>サイトやfaviconを作成するときに使える配色自動生成ツール coolors.co