読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

コピペOK!はてなブログにヨメレバを導入して、一瞬でおしゃれにする方法。

こんばんわ。小畑です。

コピペOK!はてなブログを一瞬でおしゃれにする方法。」はご覧になられましたでしょうか。まだの方は、是非ご一読を!

www.kobatatakayuki.com

さて!

ブログやってる方にはお馴染みのヨメレバ。

http://yomereba.com/

導入しようと思いながらも、なかなか手を伸ばせなかったのですが、ようやく導入することができましたw 今回の改変では、「コピペ一発!はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜」のサイトを参考にさせていただきました!大いに役立った!

www.ituore.com

ありがとうございます!

ということで、「はてなブログを一瞬でおしゃれにする」シリーズ第二弾!一瞬でヨメレバをおしゃれにする方法です。

ヨメレバとは

そのまえに。。。ヨメレバって何?って方のために。。。公式サイトから引用させていただきます。

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

とてつもなく便利なツールです。僕はAmazonしかターゲットにしてないのですが、Kindleと紙の書籍とリンクを張ることができるので、これは超絶嬉しいですね〜!もっと早く導入しておけばよかった。。。

表示例

では、まず初めに完成図をどうぞ。実際には、下記のように表示されます。

ヨメレバ

ボタンが一際目立ってますね!

はてなのAmazon商品紹介

ソースコード

ソースコードは、自分のサイト用に少しカスタマイズしてます。各自ご自身のサイトに合わせて調整してみてください。

PC版

/*カエレバ・ヨメレバ(PC版)*/
.kaerebalink-box, .booklink-box {
    border: 2px solid #CCCCCC;
    padding: 20px;
    width: 100%;
    max-width:680px;
    margin:0 auto;
    box-sizing: border-box;
}
.kaerebalink-image, .booklink-image {
    width:20%;
    float: left;
}
.kaerebalink-image a img,.booklink-image a img {
    width:100%;
}
.kaerebalink-info, .booklink-info {
    width:70%;
    margin-left: 2em !important;
    float: left;
}
.kaerebalink-name > a, .booklink-name > a {
    font-size: 16px;
    color: #256CC5;
    text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
    font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
    color: #256CC5;
    text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
    margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
    margin-right: 5px;
    margin-bottom:3px;
    text-align: center;
    float:left;
    width: 45%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
    border-top:3px solid #FFFFFF;
    margin-bottom: none;
    box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    display:block;
    width: 100%;
    height: 40px;
    line-height: 40px;
}
.shoplinkamazon {
    background: #FF9900;
    box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
    background: #FFB23F;
}
.shoplinkkindle {
    background: #0079BA;
    box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
    background: #2797D4;
}
.shoplinkrakuten {
    background: #BF0000;
    box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
    background: #DC3939;
}
.shoplinkkakakucom {
    background: #25388E;
    box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
    background: #485CB7;
}
.shoplinkyahoo {
    background: #750992;
    box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
    background: #8F0FB3;
}
.booklink-footer {
    height:0;
    clear: left;
}
.booklink-link2 {
    margin-top: 0.3em !important;
}

SP版

<style type=text/css>
/*カエレバ・ヨメレバ(スマホ版)*/
.kaerebalink-box, .booklink-box {
    border: 2px solid #CCCCCC;
    padding: 20px;
    width: 80%;
    margin:0 auto;
}
.kaerebalink-image, .booklink-image {
    margin:0 auto;
    text-align:center;
}
.kaerebalink-info, .booklink-info {
    margin:10px auto;
    padding-top:10px;
    border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
    font-size: 16px;
    color: #256CC5;
    text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
    font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
    color: #256CC5;
    text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
    margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
    margin:5px auto;
    text-align: center;
    width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    display:block;
    width: 100%;
    height: 40px;
    line-height: 40px;
}
.shoplinkamazon {
    background: #FF9900;
}
.shoplinkkindle {
    background: #0079BA;
}
.shoplinkrakuten {
    background: #BF0000;
}
.shoplinkkakakucom {
    background: #25388E;
}
.shoplinkyahoo {
    background: #750992;
}
.booklink-footer {
    height:0;
    clear: left;
}
</style>

さいごに

ヨメレバもこれでおしゃれになりました!で。勢い余って鈴木こあらさんの書籍「プラス月5万円で暮らしを楽にする超かんたんアフィリエイト」を読んでみました。

suzukidesu.com

これは、わかりやすい!さくっと読める内容ですし、インタビュー記事もあるのでこれは面白かったです。今なら、Kindle Unlimited 対象商品になってるので読んでおくべきでしょう。

www.kobatatakayuki.com

そろそろ記事のリライトをしていこうかなぁ。。。

おわり。