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

えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

> > 【ブログカスタマイズ】押した事が感覚的にわかるボタンをヨメレバ・カエレバに取り入れました。コピペするだけ！

【ブログカスタマイズ】押した事が感覚的にわかるボタンをヨメレバ・カエレバに取り入れました。コピペするだけ！

はてなブログ ブログカスタマイズ

f:id:mshimfujin:20161004121823g:plain

押した事が感覚的にわかるので、思わずポチりたくなる！！！

かもしれないボタン付きのヨメレバ・カエレバ・トマレバをつくりました。

なお、CSSをきちんと勉強した事の無い人間が書くCSSなので、β版のようなものとして御考え下さい。

改造や手直しした物を掲載される時は、言及してもらえると嬉しいです。

はじめに

CSSのコードが改行含めて600行を超えておりますので、ご了承下さい。
それでもCSSコピペするだけで完成します。

ボタン以外の部分は基本先日紹介したものと同じです。

以下実物です。当サイト用にカスタマイズしてあるので、掲載しているものとは色と枠が少し違うものになっていますがボタンの挙動は全く同じです。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
posted with ヨメレバ
エビスコム ソシム 2014-10-28
Amazon
Kindle
楽天ブックス
7net

いかがでしょう？挙動のあるボタンは動きがあるのでもしかするとポチってもらえる確率が上がる、かも知れません。

本格的に売り上げを気にされる方はA/Bテスト等で比較する事をオススメします。

今回のボタンは、以前書いた記事二つを応用したものになります。

blog.mshimfujin.net blog.mshimfujin.net

使えるボタンの種類

amazon、kindle、楽天、楽天kobo、yahoo、7net、価格コム、じゃらん、JTB
今のところ、これだけ用意しております。
ボタン部分のコードが長いので、ヨメレバカエレバ全対応は見送りました。

PC版

上から、カエレバ・ヨメレバ・トマレバ

f:id:mshimfujin:20161003175008p:plain

スマホ版

カエレバのみ。

f:id:mshimfujin:20161003173015p:plain

スマホ版2

ボタンをこんな感じで並べる事もできます。

f:id:mshimfujin:20161003173406p:plain

コピペする場所

まずはコピペ場所を開きます。 場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。 ここをクリックして

https://cdn-ak.f.st-hatena.com/images/fotolife/m/mshimfujin/20160925/20160925202616.png

レスポンシブで使う事を考えていますが、スマホ版で使っても大丈夫なようになっていると思います。
スマホ版のコードの張り方は目次から飛んで該当する部分を見てください。下の方にあります。

CSS

すでにカスタマイズ版を導入されている方は、それを消去してからコピペしてください。繰り返しになりますが、600行超あります。少々長くはありますが、カスタマイズ無しならコピペするだけで終わります。

/*----------------------------------------------------
  ヨメレバ・カエレバ・トマレバ 動きのあるボタン
----------------------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box {
    padding: 25px;
    margin-bottom: 10px;
    border: double #ccc;
    overflow: hidden;
    font-size: small;
    border-radius: 3px;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
    margin: 0 15px 0 0;
    float: left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img {
    margin: 0 auto;
    text-align: center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
    margin: 0;
    line-height: 120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name {
    margin-bottom: 10px;
    line-height: 1.5em;
    padding: 2px;
    border-top: 5px solid #ccc; /* 商品の上のボーダー不要ならこの行削除 */
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name {
    font-weight: bold;
    text-decoration: none;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    font-size: 8px;
    margin-top: 10px;
    font-family: verdana;
    line-height: 120%;
    padding-top: 2px;
    border-top: 1px solid #ccc;  /* postedwith上のボーダー不要ならこの行削除 */
    text-align: right; /* 左に寄せるならleftを代入 */
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-detail {
    font-size: 0.8em;
}
.booklink-powered, .kaerebalink-powerede, .tomarebalink-powered {
    text-align: right;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1 {
    margin-top: 10px;
}

/* ボタンの数を調整する */
.kaerebalink-link1 a { /* カエレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.booklink-link2 a { /* ヨメレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.tomarebalink-link1 a { /* トマレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a, .tomarebalink-link1 a:hover {
    opacity: 0.6;
}
.booklink-link2 a:active .kaerebalink-link1 a, .tomarebalink-link1 a:active {
    position: relative;
    top: 1px;
}

/* amazon */
.shoplinkamazon a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9901 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkamazon a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkamazon a:focus {
    outline: none;
}
.shoplinkamazon a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkamazon a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* 楽天 */
.shoplinkrakuten a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #c20004 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #c20004 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkrakuten a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #c20004; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkrakuten a:focus {
    outline: none;
}
.shoplinkrakuten a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkrakuten a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* kindle */
.shoplinkkindle a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #007dcd; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #007dcd ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkkindle a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #007dcd; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkkindle a:focus {
    outline: none;
}
.shoplinkkindle a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkkindle a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* 価格 */
.shoplinkkakakucom a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #314995; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #314995 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkkakakucom a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #314995; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkkakakucom a:focus {
    outline: none;
}
.shoplinkkakakucom a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkkakakucom a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* kobo */
.shoplinkrakukobo a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #990000; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #990000 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkrakukobo a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #990000; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkrakukobo a:focus {
    outline: none;
}
.shoplinkrakukobo a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkrakukobo a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* yahoo */
.shoplinkyahoo a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #7b0099; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #7b0099 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkyahoo a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #7b0099; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkyahoo a:focus {
    outline: none;
}
.shoplinkyahoo a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkyahoo a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}
.shoplinkyahoo img {
    display: none;
}
.shoplinkyahoo a {
    font-size: 10px;
}

/* 7net */
.shoplinkseven a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #82c36f ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #82c36f ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkseven a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #82c36f; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkseven a:focus {
    outline: none;
}
.shoplinkseven a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkseven a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* jalan */
.shoplinkjalan a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9901 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkjalan a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkjalan a:focus {
    outline: none;
}
.shoplinkjalan a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkjalan a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* jtb */
.shoplinkjtb a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9900 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9900 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkjtb a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9900; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkjtb a:focus {
    outline: none;
}
.shoplinkjtb a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkjtb a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

@-webkit-keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


.booklink-footer {
    display: none;
}

@media screen and (max-width: 480px) {
.booklink-box, .kaerebalink-box, .tomarebalink-box {
    padding: 15px;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
    width: 100%;
    min-width: initial;
    display: block;
    float: none;
    align-text: center;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a, {
 font-size: 15px;
 font-weight: bold;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name {
    margin-bottom: 3px;
    margin-top: 5px;
    font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    margin-top: 5px;
    text-align: right;
}
/* スマホ表示で購入ボタンを横長にする。 不要なら各々を削除 */
 /* カエレバ購入ボタン */
.kaerebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* ヨメレバ購入ボタン */
.booklink-link2 a { 
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* トマレバ購入ボタン */
.tomarebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
 /* ここまで */
}

以上です。ボタン部分の表現一つに40行ほど使ってしまったので、とんでもなく長いCSSになってしまいました。

スマホでもアイテムが縦並び表示にならないバージョン

完成図

f:id:mshimfujin:20161003174438p:plain

CSS

/*----------------------------------------------------
  ヨメレバ・カエレバ・トマレバ 動きのあるボタンver2
----------------------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box {
    padding: 25px;
    margin-bottom: 10px;
    border: double #ccc;
    overflow: hidden;
    font-size: small;
    border-radius: 3px;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
    margin: 0 15px 0 0;
    float: left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img, .tomarebalink-image img {
    margin: 0 auto;
    text-align: center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
    margin: 0;
    line-height: 120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name {
    margin-bottom: 10px;
    line-height: 1.5em;
    padding: 2px;
    border-top: 5px solid #ccc; /* 商品の上のボーダー不要ならこの行削除 */
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a {
    font-weight: bold;
    text-decoration: none;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    font-size: 8px;
    margin-top: 10px;
    font-family: verdana;
    line-height: 120%;
    padding-top: 2px;
    border-top: 1px solid #ccc;  /* postedwith上のボーダー不要ならこの行削除 */
    text-align: right; /* 左に寄せるならleftを代入 */
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-detail {
    font-size: 0.8em;
}
.booklink-powered, .kaerebalink-powerede, .tomarebalink-powered {
    text-align: right;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1 {
    margin-top: 10px;
}

/* ボタンの数を調整する */
.kaerebalink-link1 a { /* カエレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.booklink-link2 a { /* ヨメレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.tomarebalink-link1 a { /* トマレバ */
    width: 30%; /* 横に並べたい項目が二つなら46% */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 2px 0 0;
    padding: 10px 1px;
    text-align: center;
    float: left;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a, .tomarebalink-link1 a:hover {
    opacity: 0.6;
}
.booklink-link2 a:active .kaerebalink-link1 a, .tomarebalink-link1 a:active {
    position: relative;
    top: 1px;
}

/* amazon */
.shoplinkamazon a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9901 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkamazon a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkamazon a:focus {
    outline: none;
}
.shoplinkamazon a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkamazon a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* 楽天 */
.shoplinkrakuten a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #c20004 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #c20004 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkrakuten a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #c20004; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkrakuten a:focus {
    outline: none;
}
.shoplinkrakuten a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkrakuten a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* kindle */
.shoplinkkindle a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #007dcd; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #007dcd ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkkindle a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #007dcd; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkkindle a:focus {
    outline: none;
}
.shoplinkkindle a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkkindle a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* 価格 */
.shoplinkkakakucom a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #314995; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #314995 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkkakakucom a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #314995; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkkakakucom a:focus {
    outline: none;
}
.shoplinkkakakucom a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkkakakucom a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* kobo */
.shoplinkrakukobo a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #990000; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #990000 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkrakukobo a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #990000; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkrakukobo a:focus {
    outline: none;
}
.shoplinkrakukobo a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkrakukobo a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* yahoo */
.shoplinkyahoo a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #7b0099; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #7b0099 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkyahoo a:hover {
    color: #fff; /* カーソルを重ねた時の文字の色 */
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    background-color: #7b0099; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkyahoo a:focus {
    outline: none;
}
.shoplinkyahoo a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkyahoo a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}
.shoplinkyahoo img {
    display: none;
}
.shoplinkyahoo a {
    font-size: 10px;
}

/* 7net */
.shoplinkseven a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #82c36f ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #82c36f ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkseven a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #82c36f; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkseven a:focus {
    outline: none;
}
.shoplinkseven a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkseven a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* jalan */
.shoplinkjalan a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9901 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkjalan a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkjalan a:focus {
    outline: none;
}
.shoplinkjalan a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkjalan a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

/* jtb */
.shoplinkjtb a {
    font-size: 0.875em;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    color: #FF9900 ; /* 文字の色 */
    background-color: #fff; /* 背景色 */
    border: solid 1px #FF9900 ; /* ボーダー色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.shoplinkjtb a:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #fff; /* カーソルを重ねた時の文字の色 */
    background-color: #FF9900; /* カーソルを重ねた時の背景色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

.shoplinkjtb a:focus {
    outline: none;
}
.shoplinkjtb a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.shoplinkjtb a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}

@-webkit-keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


.booklink-footer {
    display: none;
}

@media screen and (max-width: 480px) {
.booklink-box, .kaerebalink-box, .tomarebalink-box {
    padding: 15px;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image {
    width: 100px;
    min-width: initial;
    float: left;
    align-text: center;
}
.booklink-name > a, .kaerebalink-name > a, .tomarebalink-name > a, {
 font-size: 15px;
 font-weight: bold;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name {
    margin-bottom: 3px;
    margin-top: 5px;
    font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    margin-top: 5px;
    text-align: right;
}
/* スマホ表示で購入ボタンを横長にする。 不要なら各々を削除 */
 /* カエレバ購入ボタン */
.kaerebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* ヨメレバ購入ボタン */
.booklink-link2 a { 
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* トマレバ購入ボタン */
.tomarebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
 /* ここまで */
}

スマートフォン用の設定

スマートフォンを用のページを設定している方は、proの方限定ですが以下の位置の方法でコードを貼り付けてください。 場所は「デザイン」→「カスタマイズ」→「スマートフォン」→「ヘッダ」→「タイトル下」です。

f:id:mshimfujin:20161003182026p:plain

f:id:mshimfujin:20161003182148p:plain

コードを貼りつける前には、下記のコードを事前にコピペしておいてください。

<style type="text/css"> 
/* ここの真下にCSSをペースト */

</style>

ここの真下にCSSをペースト、とかいてある部分にCSSをペーストしてください。<style>〜</style>の間にCSSを挟み込む感じです。
以下は例ですよ

<style type="text/css"> 
/* ここの真下にCSSをペースト */
/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box {
    padding: 25px;
    margin-bottom: 10px;
    border: double #ccc;
    overflow: hidden;
    font-size: small;
    border-radius: 3px;
}
中略
/* トマレバ購入ボタン */
.tomarebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
 /* ここまで */
}
</style>

こんな感じです。

カスタマイズの仕方を少し解説

カエレバで設定されているリンクの数はそれぞれ違うはずなので、
各環境にあった設定に変えられる事をお勧めします。 例えば、「ヨメレバ」で、当サイトと同じように、amazon、kindle、楽天ブックス、7netと並べようと思うと、ヨメレバのcssの中から以下の部分を

width: 30%;  /* 横に並べたい項目が二つなら46% */
width: 46%;  /* 横に並べたい項目が二つなら46% */

このように調節する必要が出てきます。
初期の状態ではどれもボタンが三つ横に並ぶようにしています。

それと、スマホでボタンを縦に並べたく無い場合は

 /* カエレバ購入ボタン */
.kaerebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* ヨメレバ購入ボタン */
.booklink-link2 a { 
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
/* ここまで */

/* トマレバ購入ボタン */
.tomarebalink-link1 a {
    width: calc(100% - 4px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 2px 0px;
    padding: 10px 0px;
}
 /* ここまで */

コードの最後にある、「/* 〜購入ボタン */」から「 /* ここまで */」をざっくり削除してください。
これでボタンが横に並ぶようになります。

コードの部分が大部分を占めていたとは言え、4万文字を超えたエントリーは初めてです・・・長かった！！！
ではでは、また次の記事で

ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座
posted with ヨメレバ
菅家 伸,かん吉 ソーテック社 2016-10-08
Amazon
Kindle
楽天ブックス
7net

mshimfujin

にほんブログ村 家族ブログ 明るく楽しい家族へ ブログランキング・にほんブログ村へ
コメントを書く