SONICのRinkerをデザイン変更する（仮）

ども、くまです。

SONICを使っている方向けにRinkerのカスタマイズコードをのせておきます。

SONICとRinkerの連携は今後アホみたいに強化されていきます

それまでの「仮」としてお使いいただけると幸いです。

スマホ表示

PC表示

コード

/*--------------------------------------
  Rinker
--------------------------------------*/
div.yyi-rinker-contents {
    border: solid 2px #f2f2f2;
    box-shadow: none;
}
div.yyi-rinker-img-m div.yyi-rinker-image {
    width: 150px;
    min-width: 150px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
    width: auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 175px);
}
div.yyi-rinker-contents div.yyi-rinker-info {
    margin-left: 12px;
    align-self: center;
    padding-left: 0;
}
.yyi-rinker-title {
    font-size: 1em;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #0066c0;
    font-weight: 500;
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
    text-decoration: underline;
    color: #c45500;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: 1em;
}
div.yyi-rinker-detail .brand {
    font-size: 75%;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    color: inherit;
    padding-left: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
    margin: 14px 0 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    position: relative;
    min-width: 46%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	margin:0 12px 12px 0;
    box-shadow: none;
    transition: 0.3s ease-in-out;
    height: 44px;
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {
    margin-right: 0px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0 30px 0 12px;
    height: 44px;
    line-height: 44px;
    font-weight: 500;
}
.fa5 div.yyi-rinker-contents ul.yyi-rinker-links li:before{
    display: none;
}
.yyi-rinker-links li a:after {
    position: absolute;
    right: 6px;
    z-index: 1;
    top: 0;
    line-height: 44px;
    color: white;
    font-weight: 900;
    font-family: "font awesome 5 free";
}
/*****  アイコン  *****/
.yyi-rinker-links li a:after {
    content: "\f0da";
}
/*****  hover  *****/
.yyi-rinker-image a:hover {
    opacity: .7;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    -webkit-box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);
    box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);
}
/*****  mobile  *****/
@media (max-width: 420px) and (min-width: 320px){
div.yyi-rinker-contents div.yyi-rinker-box {
    flex-direction: column;
}
div.yyi-rinker-img-m div.yyi-rinker-image, div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
    margin-left: 0px;
    text-align: center;
    margin-top: 12px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    margin: 0px 0px 12px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li {
    min-width: 46%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {
    margin-bottom: 0px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
.yyi-rinker-links li:after {
    right: 12px;
}}
@media (min-width: 768px) {
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    width: 100%;
    box-sizing: border-box;
}}
/*****  カラー  *****/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #ffb74d
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #ff5959
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #4fc3f7
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

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

Rinker

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

div.yyi-rinker-contents {

border: solid 2px #f2f2f2;

box-shadow: none;

}

div.yyi-rinker-img-m div.yyi-rinker-image {

width: 150px;

min-width: 150px;

}

div.yyi-rinker-contents img.yyi-rinker-main-img {

width: auto;

}

div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {

width: calc(100% - 175px);

}

div.yyi-rinker-contents div.yyi-rinker-info {

margin-left: 12px;

align-self: center;

padding-left: 0;

}

.yyi-rinker-title {

font-size: 1em;

}

div.yyi-rinker-contents div.yyi-rinker-title a {

color: #0066c0;

font-weight: 500;

}

div.yyi-rinker-contents div.yyi-rinker-title a:hover {

text-decoration: underline;

color: #c45500;

}

div.yyi-rinker-contents div.yyi-rinker-detail {

font-size: 1em;

}

div.yyi-rinker-detail .brand {

font-size: 75%;

}

div.yyi-rinker-contents div.yyi-rinker-detail {

color: inherit;

padding-left: 0;

}

div.yyi-rinker-contents ul.yyi-rinker-links {

margin: 14px 0 0;

}

div.yyi-rinker-contents ul.yyi-rinker-links li {

position: relative;

min-width: 46%;

}

div.yyi-rinker-contents ul.yyi-rinker-links li {

margin:0 12px 12px 0;

box-shadow: none;

transition: 0.3s ease-in-out;

height: 44px;

padding: 0;

}

div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {

margin-right: 0px;

}

body div.yyi-rinker-contents ul.yyi-rinker-links li a {

padding: 0 30px 0 12px;

height: 44px;

line-height: 44px;

font-weight: 500;

}

.fa5 div.yyi-rinker-contents ul.yyi-rinker-links li:before{

display: none;

}

.yyi-rinker-links li a:after {

position: absolute;

right: 6px;

z-index: 1;

top: 0;

line-height: 44px;

color: white;

font-weight: 900;

font-family: "font awesome 5 free";

}

/***** アイコン *****/

.yyi-rinker-links li a:after {

content: "\f0da";

}

/***** hover *****/

.yyi-rinker-image a:hover {

opacity: .7;

}

div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {

opacity: 1;

box-shadow: none;

}

div.yyi-rinker-contents ul.yyi-rinker-links li:hover {

-webkit-box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);

box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);

}

/***** mobile *****/

@media (max-width: 420px) and (min-width: 320px){

div.yyi-rinker-contents div.yyi-rinker-box {

flex-direction: column;

}

div.yyi-rinker-img-m div.yyi-rinker-image, div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {

width: 100%;

}

div.yyi-rinker-contents div.yyi-rinker-info {

margin-left: 0px;

text-align: center;

margin-top: 12px;

}

div.yyi-rinker-contents ul.yyi-rinker-links li {

margin: 0px 0px 12px;

}

body div.yyi-rinker-contents ul.yyi-rinker-links li {

min-width: 46%;

}

div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {

margin-bottom: 0px;

}

body div.yyi-rinker-contents ul.yyi-rinker-links li a {

padding: 0;

}

.yyi-rinker-links li:after {

right: 12px;

}}

@media (min-width: 768px) {

div.yyi-rinker-contents ul.yyi-rinker-links li a {

width: 100%;

box-sizing: border-box;

}}

/***** カラー *****/

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {

background: #ffb74d

}

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {

background: #ff5959

}

div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {

background: #4fc3f7

}

コピペして追加CSSに貼り付けてね

ボタンの色を変更したいときは

/*****  カラー  *****/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #ffb74d
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #ff5959
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #4fc3f7
}

/***** カラー *****/

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {

background: #ffb74d

}

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {

background: #ff5959

}

div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {

background: #4fc3f7

}

この部分のカラーコードを変更してください。

マイクロコピー

楽天スーパーセールあるみたいなので、楽天のボタンにマイクロコピー入れるCSS書いておきますね♪

div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:before {
    position: absolute;
    display: inline-block;
    color: #ff5959;
    width: 100%;
    left: 0;
    text-align: center;
    top: -16px;
    font-weight: 600;
    line-height: 1;
    content: "＼キャンペーンお知らせ／";
    font-size: .8em;
}
@media (max-width: 420px) and (min-width: 320px){
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    margin: 18px 0px 12px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    height: 70px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {
    height: 70px;
}
li.rakutenlink a:after {
    padding: 3px;
    border-radius: 0;
    margin-left: 0;
    border: none;
    display: block;
    line-height: 1;
    background: white;
    color: #ff5959;
    width: 90%;
    margin: 0 auto;
    content: "楽天スーパーSALE 最大44倍";
    bottom: 10px;
    top: auto;
    left: 0;
    box-sizing: border-box;
}}