Rinker デザインデモ

2020/08/12

2020/11/28

大塚製薬ポカリスエット 500ml×24本

created by Rinker

ポカリスエット

日清食品カップヌードル 78gx20個

created by Rinker

カップヌードル

パナソニックミラーレス一眼カメラルミックス GH5 ボディブラック DC-GH5-K

created by Rinker

パナソニック(Panasonic)

audio-technica プロフェッショナルモニターヘッドホン ATH-M20x スタジオレコーディング / 楽器練習 / ミキシング / DJ / ゲームブラック

created by Rinker

Audio Technica(オーディオテクニカ)

ビフォーアフター

Rinker の設定

Rinker のバージョンを「1.7.3」以上にアップデート。

Rinker の設定からデザイン「デザインなし」を選択して保存。

コード

動作検証をほとんどしてないのでデザインが崩れる可能性があります。

style.css

/————————————– Rinker ————————————–/
.yyi-rinker-contents {
box-shadow: 0 0 2px #ccc;
border-radius: 10px;
max-width: 600px;
padding: 16px 8px;
margin: 0 auto;
position: relative;
}

.yyi-rinker-box {
display: flex;
}

.yyi-rinker-image {
margin-top: auto;
margin-bottom: auto;
min-width: 150px;
}

.yyi-rinker-title a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

.yyi-rinker-info {
padding-left: 10px;
width: 100%;
}

.yyi-rinker-image + .yyi-rinker-info .price {
position: absolute;
display: block;
width: 150px;
text-align: center;
left: 5px;
bottom: 16px;
font-size: 1.2rem;
color: #888;
}

.yyi-rinker-info .brand {
position: absolute;
display: block;
width: 150px;
text-align: center;
left: 5px;
bottom: 46px;
font-size: .8rem;
color: #aaa;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.credit-box,
.credit,
.price_at,
.price_at + span {
font-size: .8rem;
}

.price_at,
.price_at + span {
display: none;
}

.yyi-rinker-links {
display: flex;
list-style: none;
padding-left: 0;
margin: .5rem 0;
flex-wrap: wrap;
}

.yyi-rinker-links li {
position: relative;
height: 48px;
margin: 2px 4px 2px 0;
padding: 12px;
box-sizing: border-box;
transition: 300ms;
flex-basis: 48%;
border-radius: 5px;
flex-grow: 1;
}

.yyi-rinker-links li:first-child:nth-last-child(3).amazonlink,
.yyi-rinker-links li:first-child:nth-last-child(5) ~ .amazonlink,
.yyi-rinker-links li:first-child:nth-last-child(7) ~ .amazonlink {
flex-basis: 100%;
}

.yyi-rinker-links li:before,
.yyi-rinker-links li:after {
position: absolute;
width: 3px;
height: 12px;
border-radius: 5px;
right: 20px;
content: “”;
background: #fff;
}
.yyi-rinker-links li:before {
top: 15px;
transform: rotate(-45deg);
}
.yyi-rinker-links li:after {
top: 21px;
transform: rotate(45deg);
}

.yyi-rinker-links li:hover {
opacity: .8;
}

.yyi-rinker-links li a {
position: absolute;
display: block;
top: 0;
left: 0;
transform: translate(16px, 10px);
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}

.yyi-rinker-links li a:after {
margin-left: .5rem;
}

.yyi-rinker-links li.freelink1 {
background: skyblue;
}

.yyi-rinker-links li.freelink3 {
background: limegreen;
}

.yyi-rinker-links li.amazonkindlelink {
background: #666;
}

.yyi-rinker-links li.amazonlink {
background: #ffb74d;
}

.yyi-rinker-links li.rakutenlink {
background: #ff5959;
}

.yyi-rinker-links li.yahoolink {
background: #4fc3f7;
}

.yyi-rinker-links li.freelink2 {
background: #527FEF;
}

.yyi-rinker-links li.freelink4 {
background: pink;
}

.free-text {
margin: .5rem 0;
font-size: .9rem;
}

@media (max-width: 767px) {
.yyi-rinker-box {
flex-wrap: wrap;
}

.yyi-rinker-image {
    margin-left: auto;
    margin-right: auto;
}

.yyi-rinker-image + .yyi-rinker-info .price {
    position: static;
    font-size: 1.1rem;
    width: unset;
}

.yyi-rinker-info .brand {
    position: static;
    width: unset;
}

.yyi-rinker-links li {
    font-size: .95rem;
}

.yyi-rinker-links li:before,
.yyi-rinker-links li:after {
    display: none;
}
}

デザイン