PC版
Yukihy Life さんのサイトからの転載です。
備忘録として記載いたします。
複数のサイトへのリンク対応してます。レシポンシブ版
ぎょぴちゃんが作る家電サイトで使用しております。
PC版
/*-------------------------------------- ヨメレバ・カエレバ（PC） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:25px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; min-width: 160px; text-align: center; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name{ margin-bottom:24px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:8px; margin-top:10px; font-family:verdana; line-height:120%; } .booklink-detail, .kaerebalink-detail{font-size: 12px;} .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:30%; -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; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;} |
スマホ版
<style> /*-------------------------------------- ヨメレバ・カエレバ（スマホ） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:15px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; width: 100px; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name > a, .kaerebalink-name > a{ font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name{ margin-bottom:12px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:10px; margin-top:5px; font-family:verdana; line-height:120%; } .booklink-detail{ font-size: 12px; } .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:calc(100% - 4px); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; margin: 2px 0px; padding:10px 0px; text-align:center; float:left; text-decoration:none; font-weight:800; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active, .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .booklink-footer{clear:left;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;} </style> |
レスポンシブ
/*-------------------------------------- ヨメレバ・カエレバ（レスポンシブ） --------------------------------------*/ .booklink-box, .kaerebalink-box{ padding:25px; margin-bottom: 10px; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 15px 0 0; float:left; min-width: 160px; text-align: center; } .booklink-image img, .kaerebalink-image img{ margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ margin:0; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name{ margin-bottom:24px; line-height:1.5em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:8px; margin-top:10px; font-family:verdana; line-height:120%; } .booklink-detail, .kaerebalink-detail{font-size: 12px;} .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;} .booklink-link2, .kaerebalink-link1{margin-top:10px;} .booklink-link2 a, .kaerebalink-link1 a{ width:30%; -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; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; color: #fff !important; } .booklink-link2 a:hover, .kaerebalink-link1 a:hover{opacity: 0.6;} .booklink-link2 a:active .kaerebalink-link1 a:active{ position:relative; top:1px; } /*ボタンを変えるときはここから*/ .shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;} .shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;} .shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;} .shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;} .shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;} /*ここまでを変更*/ .shoplinkyahoo img{display:none;} .shoplinkyahoo a{font-size:10px;} .booklink-footer{display: none;} @media screen and (max-width: 680px) { .booklink-box, .kaerebalink-box{padding:15px;} .booklink-image, .kaerebalink-image{ width: 100px !important; min-width: initial; } .booklink-name > a, .kaerebalink-name > a{ font-size: 15px; font-weight: bold; } .booklink-name, .kaerebalink-name{margin-bottom:12px;} .booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;} .booklink-link2 a, .kaerebalink-link1 a{ width:calc(100% - 4px); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin: 2px 0px; padding:10px 0px; } } |