四方山話

ヨメレバ・カエレバ（レスポンシブ）のCSSにトマレバを追加してみる

以前、Vaster2のテーマのカスタマイズで『ヨメレバ・カエレバ（レスポンシブ）』のCSSを追加して使用していました。今回はこれに「トマレバ」用CSSを追加して「ヨメレバ・カエレバ・トマレバ（レスポンシブ）」一体型のCSSを作ってみました。

前回のコードをベースにトマレバ関連を追加します。基本は

.booklink-***
　　↓
　　↓
.tomarebalink-***, .booklink-***

のように「.booklink-footer」以外の前部分に、すべてに追加します。
注意することは、以下の「-link1」の数字は「１」になります。

.tomarebalink-link1, .booklink-link2

結構な追加場所があります。後は追加するボタンのスタイルを加えます。

.shoplinkjalan a {
color: #ff7a15 !important;border: 1px solid #ff7a15 !important; }
.shoplinkjtb a {
color: #c81528 !important;border: 1px solid #c81528 !important; }
.shoplinkknt a {
color: #0b499d !important;border: 1px solid #0b499d !important; }
.shoplinkikyu a {
color: #bf9500 !important;border: 1px solid #bf9500 !important; }
.shoplinkrurubu a {
color: #000066 !important;border: 1px solid #000066 !important; }





表示すると以下の写真のようになります。スマホのchromeで表示させると左側がPC表示画面、右側がスマホ表示画面です。もちろん、普通のPCでも左の画面と同じでした。




ネットを見ると最初から対応したCSSを作成している方も何人か言いますが、今のレイアウトが気に入ってるので今回は追加することにしました。素人なので基本は差分だけで追加と言う考えでCSSを作成してみました。


/*--------------------------------------
  トマレバ・ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.tomarebalink-box, .booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.tomarebalink-image, .booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.tomarebalink-image img, .booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.tomarebalink-info, .booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.tomarebalink-name, .booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.tomarebalink-powered-date, .booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.tomarebalink-detail, .booklink-detail, .kaerebalink-detail{font-size: 12px;}
.tomarebalink--powered-date, .booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.tomarebalink-link1, .booklink-link2, .kaerebalink-link1{margin-top:10px;}
.tomarebalink-link1 a, .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;
}
.tomarebalink-kink1 a, .booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.tomarebalink-kink1 a, .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;}
/*トメレバ追加*/
.shoplinkjalan a { color: #ff7a15 !important;border: 1px solid #ff7a15 !important; }
.shoplinkjtb a { color: #c81528 !important;border: 1px solid #c81528 !important; }
.shoplinkknt a { color: #0b499d !important;border: 1px solid #0b499d !important; }
.shoplinkikyu a { color: #bf9500 !important;border: 1px solid #bf9500 !important; }
.shoplinkrurubu a { color: #000066 !important;border: 1px solid #000066 !important; }

/*ここまでを変更*/

.shoplinkyahoo img{display:none}
.booklink-footer{display: none;}


@media screen and (max-width: 680px) {
.tomarebalink-box, .booklink-box, .kaerebalink-box{padding:15px;}
.tomarebalink-image, .booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.tomarebalink-name > a, .booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.tomarebalink-name, .booklink-name, .kaerebalink-name{margin-bottom:12px;}
.tomarebalink-powered-date, .booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.tomarebalink-link1 a, .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;
}
}

/*ゴミが表示されなければ不要*/
.kaerebalink-name img,
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
  display:none;
}

}
/*-------トマレバ・ヨメレバ・カエレバ--------------*/


実際には、このブログでは従来のままのCSS「ヨメレバ・カエレバ」対応版をそのまま使用しています。新しい「ヨメレバ・カエレバ・トマレバ（レスポンシブ）」対応版は『暇つぶしガイドブック』で使ってます。