ヨメレバ・カエレバをCSSでカスタマイズ – ぎょぴっちのアフリな生活

Contents

1 PC版
2 PC版
3 スマフォ版
4 レスポンシブ

PC版

Yukihy Life さんのサイトからの転載です。

備忘録として記載いたします。

複数のサイトへのリンク対応してます。レシポンシブ版

ぎょぴちゃんが作る家電サイトで使用しております。

アイリスオーヤマの生活家電その人気商品紹介

匠の技を追求するタイガー魔法瓶

PC版

<span class="synComment">/*--------------------------------------</span>
<span class="synComment">  ヨメレバ・カエレバ（PC）</span>
<span class="synComment">--------------------------------------*/</span>
<span class="synIdentifier">.booklink-box</span>, <span class="synIdentifier">.kaerebalink-box{</span>
    <span class="synType">padding</span>:<span class="synConstant">25px</span>;
    <span class="synType">margin-bottom</span>: <span class="synConstant">10px</span>;
    <span class="synType">border</span>:<span class="synType">double</span> <span class="synConstant">#CCC</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
    <span class="synType">font-size</span>:<span class="synType">small</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span>, <span class="synIdentifier">.kaerebalink-image{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synConstant">15px</span> <span class="synConstant">0</span> <span class="synConstant">0</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">min-width</span>: <span class="synConstant">160px</span>;
    <span class="synType">text-align</span>: <span class="synType">center</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span> <span class="synStatement">img</span>, <span class="synIdentifier">.kaerebalink-image</span> <span class="synStatement">img</span><span class="synIdentifier">{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synType">auto</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-info</span>, <span class="synIdentifier">.kaerebalink-info{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span>;
    <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span>, <span class="synIdentifier">.kaerebalink-name{</span>
    <span class="synType">margin-bottom</span>:<span class="synConstant">24px</span>;
    <span class="synType">line-height</span>:<span class="synConstant">1.5em</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-powered-date{</span>
     <span class="synType">font-size</span>:<span class="synConstant">8px</span>;
     <span class="synType">margin-top</span>:<span class="synConstant">10px</span>;
     <span class="synType">font-family</span>:verdana;
     <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-detail</span>, <span class="synIdentifier">.kaerebalink-detail{</span><span class="synType">font-size</span>: <span class="synConstant">12px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-detail{</span><span class="synType">margin-bottom</span>:<span class="synConstant">15px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span>, <span class="synIdentifier">.kaerebalink-link1{</span><span class="synType">margin-top</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">width</span>:<span class="synConstant">30%</span>;
    -moz-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    -webkit-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">display</span>:<span class="synType">inline</span>-<span class="synType">block</span>;
    <span class="synType">margin</span>:<span class="synConstant">5px</span> <span class="synConstant">2px</span> <span class="synConstant">0</span> <span class="synConstant">0</span>;
    <span class="synType">padding</span>:<span class="synConstant">10px</span> <span class="synConstant">1px</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">text-decoration</span>:<span class="synType">none</span>;
    <span class="synType">font-weight</span>:<span class="synConstant">800</span>;
    <span class="synType">text-shadow</span>:<span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">#dcdcdc</span>;
    <span class="synType">font-size</span>:<span class="synConstant">12px</span>;
    <span class="synType">color</span>: <span class="synConstant">#fff</span> <span class="synSpecial">!important</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span><span class="synIdentifier">{</span>opacity: <span class="synConstant">0.6</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span>
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span><span class="synIdentifier">{</span>
    <span class="synType">position</span>:<span class="synType">relative</span>;
    <span class="synType">top</span>:<span class="synConstant">1px</span>;
<span class="synIdentifier">}</span>
<span class="synComment">/*ボタンを変えるときはここから*/</span>
<span class="synIdentifier">.shoplinkamazon</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkrakuten</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkindle</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkakakucom</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#314995</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#314995</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synComment">/*ここまでを変更*/</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">img</span><span class="synIdentifier">{</span><span class="synType">display</span>:<span class="synType">none</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">font-size</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-footer{</span><span class="synType">display</span>: <span class="synType">none</span>;<span class="synIdentifier">}</span>

/*--------------------------------------

ヨメレバ・カエレバ（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;}

スマフォ版

<span class="synIdentifier">&lt;</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span>
<span class="synComment">/*--------------------------------------</span>
<span class="synComment">  ヨメレバ・カエレバ（スマホ）</span>
<span class="synComment">--------------------------------------*/</span>
<span class="synIdentifier">.booklink-box</span>, <span class="synIdentifier">.kaerebalink-box{</span>
    <span class="synType">padding</span>:<span class="synConstant">15px</span>;
    <span class="synType">margin-bottom</span>: <span class="synConstant">10px</span>;
    <span class="synType">border</span>:<span class="synType">double</span> <span class="synConstant">#CCC</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
    <span class="synType">font-size</span>:<span class="synType">small</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span>, <span class="synIdentifier">.kaerebalink-image{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synConstant">15px</span> <span class="synConstant">0</span> <span class="synConstant">0</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">width</span>: <span class="synConstant">100px</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span> <span class="synStatement">img</span>, <span class="synIdentifier">.kaerebalink-image</span> <span class="synStatement">img</span><span class="synIdentifier">{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synType">auto</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-info</span>, <span class="synIdentifier">.kaerebalink-info{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span>;
    <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span> <span class="synSpecial">&gt;</span> <span class="synStatement">a</span>, <span class="synIdentifier">.kaerebalink-name</span> <span class="synSpecial">&gt;</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">font-size</span>: <span class="synConstant">15px</span>;
    <span class="synType">font-weight</span>: <span class="synType">bold</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span>, <span class="synIdentifier">.kaerebalink-name{</span>
    <span class="synType">margin-bottom</span>:<span class="synConstant">12px</span>;
    <span class="synType">line-height</span>:<span class="synConstant">1.5em</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-powered-date{</span>
     <span class="synType">font-size</span>:<span class="synConstant">10px</span>;
     <span class="synType">margin-top</span>:<span class="synConstant">5px</span>;
     <span class="synType">font-family</span>:verdana;
     <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-detail{</span>
    <span class="synType">font-size</span>: <span class="synConstant">12px</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-detail{</span><span class="synType">margin-bottom</span>:<span class="synConstant">15px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span>, <span class="synIdentifier">.kaerebalink-link1{</span><span class="synType">margin-top</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">width</span>:calc(<span class="synConstant">100%</span> - <span class="synConstant">4px</span>);
    -moz-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    -webkit-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">display</span>:<span class="synType">inline</span>-<span class="synType">block</span>;
    <span class="synType">margin</span>: <span class="synConstant">2px</span> <span class="synConstant">0px</span>;
    <span class="synType">padding</span>:<span class="synConstant">10px</span> <span class="synConstant">0px</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">text-decoration</span>:<span class="synType">none</span>;
    <span class="synType">font-weight</span>:<span class="synConstant">800</span>;
    <span class="synType">text-shadow</span>:<span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">#dcdcdc</span>;
    <span class="synType">font-size</span>:<span class="synConstant">12px</span>;
    <span class="synType">color</span>: <span class="synConstant">#fff</span> <span class="synSpecial">!important</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span><span class="synIdentifier">{</span>opacity: <span class="synConstant">0.6</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span><span class="synIdentifier">{</span>
    <span class="synType">position</span>:<span class="synType">relative</span>;
    <span class="synType">top</span>:<span class="synConstant">1px</span>;
<span class="synIdentifier">}</span>
<span class="synComment">/*ボタンを変えるときはここから*/</span>
<span class="synIdentifier">.shoplinkamazon</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkrakuten</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkindle</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkakakucom</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#314995</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#314995</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synComment">/*ここまでを変更*/</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">img</span><span class="synIdentifier">{</span><span class="synType">display</span>:<span class="synType">none</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-footer{</span><span class="synType">clear</span>:<span class="synType">left</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">font-size</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-footer{</span><span class="synType">display</span>: <span class="synType">none</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">&lt;/</span><span class="synStatement">style</span><span class="synIdentifier">&gt;</span>

<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;

}

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-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,

.booklink-link2 a:active,

.kaerebalink-link1 a:active{

position:relative;

top:1px;

}

/*ボタンを変えるときはここから*/

/*ここまでを変更*/

.booklink-footer{clear:left;}

.booklink-footer{display: none;}

</style>

レスポンシブ

<span class="synComment">/*--------------------------------------</span>
<span class="synComment">  ヨメレバ・カエレバ（レスポンシブ）</span>
<span class="synComment">--------------------------------------*/</span>
<span class="synIdentifier">.booklink-box</span>, <span class="synIdentifier">.kaerebalink-box{</span>
    <span class="synType">padding</span>:<span class="synConstant">25px</span>;
    <span class="synType">margin-bottom</span>: <span class="synConstant">10px</span>;
    <span class="synType">border</span>:<span class="synType">double</span> <span class="synConstant">#CCC</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
    <span class="synType">font-size</span>:<span class="synType">small</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span>, <span class="synIdentifier">.kaerebalink-image{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synConstant">15px</span> <span class="synConstant">0</span> <span class="synConstant">0</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">min-width</span>: <span class="synConstant">160px</span>;
    <span class="synType">text-align</span>: <span class="synType">center</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span> <span class="synStatement">img</span>, <span class="synIdentifier">.kaerebalink-image</span> <span class="synStatement">img</span><span class="synIdentifier">{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span> <span class="synType">auto</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-info</span>, <span class="synIdentifier">.kaerebalink-info{</span>
    <span class="synType">margin</span>:<span class="synConstant">0</span>;
    <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
    <span class="synType">overflow</span>: <span class="synType">hidden</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span>, <span class="synIdentifier">.kaerebalink-name{</span>
    <span class="synType">margin-bottom</span>:<span class="synConstant">24px</span>;
    <span class="synType">line-height</span>:<span class="synConstant">1.5em</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-powered-date{</span>
     <span class="synType">font-size</span>:<span class="synConstant">8px</span>;
     <span class="synType">margin-top</span>:<span class="synConstant">10px</span>;
     <span class="synType">font-family</span>:verdana;
     <span class="synType">line-height</span>:<span class="synConstant">120%</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-detail</span>, <span class="synIdentifier">.kaerebalink-detail{</span><span class="synType">font-size</span>: <span class="synConstant">12px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-detail{</span><span class="synType">margin-bottom</span>:<span class="synConstant">15px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span>, <span class="synIdentifier">.kaerebalink-link1{</span><span class="synType">margin-top</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">width</span>:<span class="synConstant">30%</span>;
    -moz-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    -webkit-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">display</span>:<span class="synType">inline</span>-<span class="synType">block</span>;
    <span class="synType">margin</span>:<span class="synConstant">5px</span> <span class="synConstant">2px</span> <span class="synConstant">0</span> <span class="synConstant">0</span>;
    <span class="synType">padding</span>:<span class="synConstant">10px</span> <span class="synConstant">1px</span>;
    <span class="synType">text-align</span>:<span class="synType">center</span>;
    <span class="synType">float</span>:<span class="synType">left</span>;
    <span class="synType">text-decoration</span>:<span class="synType">none</span>;
    <span class="synType">font-weight</span>:<span class="synConstant">800</span>;
    <span class="synType">text-shadow</span>:<span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">1px</span> <span class="synConstant">#dcdcdc</span>;
    <span class="synType">font-size</span>:<span class="synConstant">12px</span>;
    <span class="synType">color</span>: <span class="synConstant">#fff</span> <span class="synSpecial">!important</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">hover</span><span class="synIdentifier">{</span>opacity: <span class="synConstant">0.6</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span>
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span>:<span class="synPreProc">active</span><span class="synIdentifier">{</span>
    <span class="synType">position</span>:<span class="synType">relative</span>;
    <span class="synType">top</span>:<span class="synConstant">1px</span>;
<span class="synIdentifier">}</span>
<span class="synComment">/*ボタンを変えるときはここから*/</span>
<span class="synIdentifier">.shoplinkamazon</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#FF9901</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkrakuten</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#c20004</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkindle</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#007dcd</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkkakakucom</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#314995</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#314995</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">color</span>:<span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synType">border</span>: <span class="synConstant">1px</span> <span class="synType">solid</span> <span class="synConstant">#7b0099</span> <span class="synSpecial">!important</span>;<span class="synIdentifier">}</span>
<span class="synComment">/*ここまでを変更*/</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">img</span><span class="synIdentifier">{</span><span class="synType">display</span>:<span class="synType">none</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.shoplinkyahoo</span> <span class="synStatement">a</span><span class="synIdentifier">{</span><span class="synType">font-size</span>:<span class="synConstant">10px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-footer{</span><span class="synType">display</span>: <span class="synType">none</span>;<span class="synIdentifier">}</span>

<span class="synSpecial">@media</span> <span class="synSpecial">screen</span> and (max-width: 680px) <span class="synIdentifier">{</span>
.booklink-box, .kaerebalink-box{<span class="synType">padding</span>:<span class="synConstant">15px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-image</span>, <span class="synIdentifier">.kaerebalink-image{</span>
    <span class="synType">width</span>: <span class="synConstant">100px</span> <span class="synSpecial">!important</span>;
    <span class="synType">min-width</span>: initial;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span> <span class="synSpecial">&gt;</span> <span class="synStatement">a</span>, <span class="synIdentifier">.kaerebalink-name</span> <span class="synSpecial">&gt;</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">font-size</span>: <span class="synConstant">15px</span>;
    <span class="synType">font-weight</span>: <span class="synType">bold</span>;
<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-name</span>, <span class="synIdentifier">.kaerebalink-name{</span><span class="synType">margin-bottom</span>:<span class="synConstant">12px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-powered-date</span>, <span class="synIdentifier">.kaerebalink-powered-date{</span><span class="synType">margin-top</span>:<span class="synConstant">5px</span>;<span class="synIdentifier">}</span>
<span class="synIdentifier">.booklink-link2</span> <span class="synStatement">a</span>,
<span class="synIdentifier">.kaerebalink-link1</span> <span class="synStatement">a</span><span class="synIdentifier">{</span>
    <span class="synType">width</span>:calc(<span class="synConstant">100%</span> - <span class="synConstant">4px</span>);
    -moz-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    -webkit-<span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">border</span>-radius:<span class="synConstant">5px</span>;
    <span class="synType">margin</span>: <span class="synConstant">2px</span> <span class="synConstant">0px</span>;
    <span class="synType">padding</span>:<span class="synConstant">10px</span> <span class="synConstant">0px</span>;
<span class="synIdentifier">}</span>
<span class="synError">}</span>

/*--------------------------------------

ヨメレバ・カエレバ（レスポンシブ）

--------------------------------------*/

.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;

}

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-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,

.booklink-link2 a:active

.kaerebalink-link1 a:active{

position:relative;

top:1px;

}

/*ボタンを変えるときはここから*/

/*ここまでを変更*/

.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;

}

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;

}

}

PC版

PC版

スマフォ版

レスポンシブ

返信を残す コメントをキャンセル

おすすめの記事です

返信を残すコメントをキャンセル