Amazonチャージで1000円分もらえる

Rinker デザインデモ

4 min 51 views

created by Rinker
ポカリスエット
¥2,773 (2020/10/26 10:49:37時点 Amazon調べ-詳細)

created by Rinker
カップヌードル
¥3,272 (2020/10/26 10:49:37時点 Amazon調べ-詳細)

created by Rinker
パナソニック(Panasonic)
¥183,400 (2020/10/26 15:30:57時点 Amazon調べ-詳細)

ビフォーアフター

ビフォー
アフター

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

ZIMA

THE SONIC ハマり中

ただただ、THE SONIC のテーマをいじるだけのサイト。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です