完成図
以前と同様の押した事が感覚的にわかるので、思わずポチりたくなる！！！
かもしれないボタン付きのヨメレバ・カエレバ・トマレバをまた作りました。
紹介するヨメレバカエレバはCSSをきちんと勉強した事の無い人間が書くCSSなので、β版のようなものとしてお考え下さい。
何かエラーや崩れがあれば教えた頂ければ嬉しいです。
できる限り手直ししていこうと思います。
はじめに
数ヶ月前になりますが、メインブログのデザインを刷新しました。
ヨメレバカエレバもそれに合わせたデザインに変更しまして、ボタンにアンダーバーを入れました。
また、ボタンの背景にも斜線を入れてあります。
モバイルデバイスの動作確認は、bliskで行っています。
ボタン以外の部分は基本以前紹介したものと同じ設計です。
以下実物。（2017年9月11日現在）
いかがでしょう？挙動のあるボタンは動きがあるのでもしかするとポチってもらえる確率が上がる、かも知れません。
使えるボタンの種類
amazon、kindle、楽天、楽天kobo、yahoo、7net、価格コム、じゃらん、JTBとなっています。
コピペする場所
まずはコピペ場所を開きます。
場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。
ここをクリックして
作りとしては、スマホ版で使っても大丈夫なようになっていると思います。
注意点
作業の前には必ずバックアップを取りましょう。
ここ、重要です。必ず出力を「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. 上から背景がするっと降りてくる」から拝借しました。
スマートフォン用の設定
スマートフォンを用のページを設定している方は、proの方限定ですが以下の位置の方法でコードを貼り付けてください。 場所は「デザイン」→「カスタマイズ」→「スマートフォン」→「ヘッダ」→「タイトル下」です。
そして、次はこちら
コードを貼りつける前には、下記のコードを事前にコピペしておいてください。
<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
白もあります
dodocool