@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
.my_table{
display: block;
margin-bottom: 0px;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
/*width:380px;*/
padding: 0px 10px 0px 10px;
border:hidden;
}
}
/*--------------------------------------
ヨメレバ・カエレバ・トマレバ
投稿記事の下のCSSに入れる
商品紹介:amazlet風-2(cssカスタマイズ用)を選択
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
width: 285px; height: 175px;
font-size:14px;
box-sizing: border-box;
border: solid 1px #ccc;
border-radius: 2px;
padding: 10px;
margin-bottom: 6px;
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;
/*注文ボタンの縦サイズ*/
line-height:30%;}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
line-height:1.4em;}
.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: .6em;
line-height:1.6em;
}
.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;}
table, tbody, th, tr, td {
border: hidden;
}
/* 枠4横並び */
table.waku4 {
border: 2px solid black;
border-collapse: collapse;
}
table.waku4 td {
width:143px;height:215px;
border: solid 1px #ccc;
border-radius: 5px;
color: green;
text-align: center;
padding: 5px;
line-height: 1.25;
background-color: white;
}
/* ------------------------- */
/* ▼表を表でなくす(表を崩す)ためのCSS */
/* ------------------------- */
table.waku4 {
display: block;
border: none;
}
table.waku4 tr {
display: inline;
}
table.waku4 td {
display: inline-block;
margin-bottom: 8px;
}
/*.cstmreba_waku4{}div全体に影響*/
/*.kaerebalink-box_waku4{}リンクするボックス全体に影響*/
/*.kaerebalink-image_waku4{}リンクボックスの写真*/
/*.kaerebalink-info_waku4{}リンクボックスの案内*/
/*.kaerebalink-name_waku4{}リンクボックスの文章*/
/*.kaerebalink-powered-date{}waku4リンクボックスの日付*/
/*.kaerebalink-detail_waku4{}リンクボックスの細部*/
/*.kaerebalink-link1_waku4{}リンクボックスのリンク部*/
/*.shoplinkrakuten_waku4{}楽天へのリンク*/
/*.shoplinkamazon_waku4{}アマゾンへのリンク*/
/*.booklink-footer_waku4{}リンクボックスのフッター*/
.cstmreba_waku4{font-size:10px;text-align:left;}
.kaerebalink-image_waku4{
width:60%;height:50% !important;
text-align:center;
margin-bottom:0px;
}
.kaerebalink-image_waku4 img{
widht:100%;
}
.kaerebalink-name_waku4{
line-height: 1.2em;
}
.booklink-powered-date_waku4, .kaerebalink-powered-date_waku4{
background-color: #f8f8ff;
padding: 2px;
font-size: .3em;
text-align: right;
/*line-height: 100%;*/
margin-top: 0px;
margin-bottom: 0px;
}
.shoplinkamazon_waku4, .shoplinkrakuten_waku4, .shoplinkkindle_waku4{
width: 70%;
/*line-height: 100%;*/
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
position: relative;
float:left;
padding:2px 3px;
}
/* 枠2 ---------------------------*/
table.waku2 {
border: 2px solid black;
border-collapse: collapse;
margin:15px 0 0px 0;
}
table.waku2 td {
width:49.4%;height:100%;
vertical-align: top;
border: solid 1px #ccc;
border-radius: 5px;
color: green;
text-align: left;
padding: 5px 15px 5px 10px;
line-height: 1.25;
width: 19em;
background-color: white;
}
/* ----------------------------- */
/* ▼表を表でなくす(表を崩す)ためのCSS */
/* ----------------------------- */
table.waku2 {
display: block;
border: none;
}
table.waku2 tr {
display: inline;
}
table.waku2 td {
display: inline-block;
margin-bottom: 8px;
}
/* 枠6広告 */
table.waku6 {
border: 2px solid black;
border-collapse: collapse;
align:center;
}
table.waku6 td {
width:90px;height:98px;
border: solid 1px #ccc;
border-radius: 5px;
color: green;
text-align: left;
padding: 5px;
line-height: 1.2;
background-color: #f5f5f5;
}
table.waku6 td img{
max-width: 80px;
max-height: 88px;
}
/* ------------------------- */
/* 枠を崩す */
/* ------------------------- */
table.waku6 {
display: block;
border: none;
}
table.waku6 tr {
display: inline;
}
table.waku6 td {
display: inline-block;
margin-bottom: 4px;
}
/* 枠6広告2 */
table.waku6_2 {
border: 2px solid black;
border-collapse: collapse;
align:center;
}
/* 外枠装飾 */
table.waku6_2 td {
width:91px;height:144px;
border: solid 1px #ccc;
border-radius: 5px;
color: green;
text-align: left;
padding: 2px;
line-height: .6;
background-color: #f5f5f5;
}
/* 枠を崩す */
table.waku6_2 {
display: block;
border: none;
}
table.waku6_2 tr {
display: inline;
}
table.waku6_2 td{
display: inline-block;
margin-bottom: 4px;
}
/* 行間隔 */
.kaerebalink-box_2{display: inline-block;line-height: 0.6em;font-size:0.8em;}
/* posted with カエレバ 配置 文字サイズ */
.kaerebalink-powered-date_2{text-align:right;padding:0 10px 0 0;font-size:6px;}
/* 広告主からの宣伝文*/
.kaerebalink-name_2 a {text-align:left;font-size:6px;padding:0px 2px;}
/* 広告主からの宣伝分とカエレバ 行間 cssが効かないのでstyleでhtmlに直書き*/
.kaerebalink-info_2{line-height: 1.2;}
/* 広告画像 固定サイズ
img.example1 {
width: 90px;
height: 90px;
font-size:0;
} */
img.example1{
width:85px;
height:80px;
max-width:85px;
max-height:80px;
text-align: center;
margin-bottom: 0px;
}
img.example1 before{
content:"";
display: inline-block;
height:80px;
vertical-align: middle;
}
img.example1 > img{
width:85px;
height:auto;
max-width:85px;
max-height:80px;
vertical-align: middle;
}
/* 広告リンクサイズ */
img.example2 {
/*width: auto;
height: auto;*/
padding:0 2px 0 4px;
margin-bottom: 4px;
}
/* 広告リンク横並び指定 */
div.yoko {display:table-cell;vertical-align:center;}