えむしてっく

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

スポンサーリンク

> > 【CSS】コピペするだけ！スルッと背景が降りてくるデザインのヨメレバ・カエレバ・トマレバ

【CSS】コピペするだけ！スルッと背景が降りてくるデザインのヨメレバ・カエレバ・トマレバ

はてなブログ カスタマイズ CSS
＼フォロー!／
＼シェア!／

完成図
f:id:mshimfujin:20170612000830g:plain

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

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

紹介するヨメレバカエレバはCSSをきちんと勉強した事の無い人間が書くCSSなので、β版のようなものとしてお考え下さい。

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

はじめに

数ヶ月前になりますが、メインブログのデザインを刷新しました。

ヨメレバカエレバもそれに合わせたデザインに変更しまして、ボタンにアンダーバーを入れました。

また、ボタンの背景にも斜線を入れてあります。

blisk.io

モバイルデバイスの動作確認は、bliskで行っています。

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

mshitech.hatenablog.com

以下実物。（2017年9月11日現在）

ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座
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

作りとしては、スマホ版で使っても大丈夫なようになっていると思います。

注意点

作業の前には必ずバックアップを取りましょう。 f:id:mshimfujin:20161003192056p:plain ここ、重要です。必ず出力を「amazlet風-2(cssカスタマイズ用)」でデータを出力してください。これ以外で出力されたデータですと、表示が崩れる場合があります。

CSS

/*--------------------------------------
  ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
 box-sizing: border-box;
 border: solid 1px #ccc;
 border-radius: 2px;
 padding: 10px;
 margin-bottom: 10px;
 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.4;
 flex: 0.4;
}
.cstmreba img{
 margin: 0 auto;
 text-align: center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
 -webkit-flex: 1;
 flex: 1;
 margin:0;
 line-height: 1.2em;
 overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
 line-height:1.3em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
 text-decoration: none;
 font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
 background-color: #DDD;
 padding: 2px;
 font-size: .6em;
 text-align: right;
 line-height: 1.2em;
 margin-bottom: 3px;
}

.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a {
 text-decoration: none;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
 font-size: .7em;
}
.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: 3px 3px 0 0;
 padding: 10px 0px;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 font-size: 12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
 color:#fff;
 transform: scale(0.95); /* 変化するボタンの大きさ */
 transition: all 0.6s ease;
}
.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;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
 width: 100%;
}
/* 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: 9px;
}
/* 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-footer{display: none;}

マウスオーバーした時のボタンの挙動は、こちらの「9. 上から背景がするっと降りてくる」から拝借しました。

www.nxworld.net

スマートフォン用の設定

スマートフォンを用のページを設定している方は、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 #ccc;
 border-radius: 2px;
 padding: 10px;
 margin-bottom: 10px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}
中略
.shoplinkjalan a:hover {
 background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.booklink-footer{display: none;}
</style>

最後に

実はこれ、投稿していたと思った記事で、下書きのまま数ヶ月放置してしまっておりました・・・。

ぼちぼちですが、更新していきます。

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

モバイルバッテリーの宣伝

dodocoolさんからはamazonの20%の割引のコードがいただけました。

6JUNL3GQ

9月30日まで使用可能です。

白と黒どちらでも使用可能ですよ。

現在の価格が¥2599なので、割引後は¥2079で購入できるかと思います。

dodocool モバイルバッテリー 充電器 極薄 大容量 iPhone Samsung LG などスマホ用 (ブラック　5000mAh)
posted with カエレバ
dodocool
Amazon
楽天市場
Yahooショッピング
 

白もあります

dodocool モバイルバッテリー　充電器 極薄　大容量 USB2ポート5000mAh iPhone Samsung LGなどスマホ用
posted with カエレバ
dodocool
Amazon
楽天市場
Yahooショッピング
 

はてなブログをはじめよう！

mshimfujinさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？

はてなブログをはじめる（無料）
はてなブログとは