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

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】コピペするだけ！押した事がわかるエフェクト付きののヨメレバ・カエレバ・トマレバ

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

完成図
f:id:mshitech:20161030210354g:plain

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

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

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

何かエラーや崩れがあれば教えた頂ければ嬉しいです。
できる限り手直ししていこうと思います。

はじめに

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

mshitech.hatenablog.com

以下実物です。

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

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

使えるボタンの種類

amazon、kindle、楽天、楽天kobo、yahoo、7net、価格コム、じゃらん、JTB

コピペする場所

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

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

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

CSS

すでにカスタマイズ版を導入されている方は、それを消去してからコピペしてください。

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #5d5d5d;
 border-radius:2px;
 font-size:small;
 padding:10px;
 margin-bottom: 10px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
    margin:0 15px 0 0;
    width: 160px;
    text-align: center;
    -webkit-flex: 0.6;
    flex: 0.6;
}
.cstmreba img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
    -webkit-flex: 2;
    flex: 2;
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
    line-height:1.5em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
    text-decoration:none;
    font-weight:800;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
     background-color:#DDD;
     border-radius:2px;
     padding:2px;
     font-size:8px;
     text-align:right;
     font-family:verdana;
     line-height:120%;
     margin-bottom:5px
}
.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{
 text-decoration:none;
 font-weight:400;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{
 font-size: 12px;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
 flex-wrap: wrap;
 display: -webkit-flex;
 display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
  -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;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
  color:#fff;
}
.booklink-link2 a:active, .kaerebalink-link1 a:active, .tomarebalink-link1 a:active{
    position:relative;
    top:1px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
 width: 48%;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
/* amazon */
.shoplinkamazon a {
    color: #FF9901 ; /* 文字の色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkamazon a:hover {
    background-color: #ff9901; /* カーソルを重ねた時の背景色 */
}
/* 楽天 */
.shoplinkrakuten a {
    color: #c20004 ; /* 文字の色 */
    border: solid 1px #c20004 ; /* ボーダー色 */
}
.shoplinkrakuten a:hover {
    background-color: #c20004; /* カーソルを重ねた時の背景色 */
}
/* kindle */
.shoplinkkindle a {
    color: #007dcd; /* 文字の色 */
    border: solid 1px #007dcd ; /* ボーダー色 */
}
.shoplinkkindle a:hover {
    background-color: #007dcd; /* カーソルを重ねた時の背景色 */
}
/* 価格 */
.shoplinkkakakucom a {
    color: #314995; /* 文字の色 */
    border: solid 1px #314995 ; /* ボーダー色 */
}
.shoplinkkakakucom a:hover {
    background-color: #314995; /* カーソルを重ねた時の背景色 */
}
/* kobo */
.shoplinkrakukobo a {
    color: #990000; /* 文字の色 */
    border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkrakukobo a:hover {
    background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* yahoo */
.shoplinkyahoo a {
    color: #7b0099; /* 文字の色 */
    border: solid 1px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo a:hover {
    background-color: #7b0099; /* カーソルを重ねた時の背景色 */
}
.shoplinkyahoo img {
    display: none;
}
.shoplinkyahoo a {
    font-size: 10px;
}
/* 7net */
.shoplinkseven a {
    color: #82c36f ; /* 文字の色 */
    border: solid 1px #82c36f ; /* ボーダー色 */
}
.shoplinkseven a:hover {
    background-color: #82c36f; /* カーソルを重ねた時の背景色 */
}
/* jtb */
.shoplinkjtb a {
    color: #990000 ; /* 文字の色 */
    border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkjtb a:hover {
    background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* jalan */
.shoplinkjalan a {
    color: #FF9901 ; /* 文字の色 */
    border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkjalan a:hover {
    background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{
    font-weight:800;
    opacity: 0.6;
}
.booklink-link2 a:active,
.kaerebalink-link1 a:active,
.tomarebalink-link1 a:active{
    position:relative;
    top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
    width: 100%;
    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, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkkakakucom a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkjtb a:hover, .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; /* カーソルを重ねた時の文字色 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}
.shoplinkamazon a:focus, .shoplinkrakuten a:focus, .shoplinkkindle a:focus, .shoplinkkakakucom a:focus, .shoplinkrakukobo a:focus, .shoplinkyahoo a:focus, .shoplinkseven a:focus, .shoplinkjtb a:focus, .shoplinkjalan a:focus {
    outline: none;
}
.shoplinkamazon a::before, .shoplinkrakuten a::before, .shoplinkkindle a::before, .shoplinkkakakucom a::before, .shoplinkrakukobo a::before, .shoplinkyahoo a::before, .shoplinkseven a::before, .shoplinkjtb a::before, .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);
}
.shoplinkamazon a:hover::before, .shoplinkrakuten a:hover::before, .shoplinkkindle a:hover::before, .shoplinkkakakucom a:hover::before, .shoplinkrakukobo a:hover::before, .shoplinkyahoo a:hover::before, .shoplinkseven a:hover::before, .shoplinkjtb a:hover::before, .shoplinkjalan a:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}
.booklink-footer{display: none;}
/* アニメーション部分 */
@-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);
    }
}

スマートフォン用の設定

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

f:id:mshimfujin:20161003182026p:plain

f:id:mshimfujin:20161003182148p:plain

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

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

</style>

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

<style type="text/css"> 
/* ここの真下にCSSをペースト */
/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #5d5d5d;
 border-radius:2px;
 font-size:small;
 padding:10px;
 margin-bottom: 10px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
中略
}
.booklink-footer{display: none;}
</style>

こんな感じです。伝わりましたでしょうか・・・？

ではでは、また次の記事で

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

mshitech

コメントを書く