モバイルドットコム

ガジェットレビューサイト!!最新スマホ情報をガツガツお届け!!

スポンサーリンク

話題の最新スマホが最安値!!

Asus Zenfone Max Pro (M2)【SIMフリー】(31,000円~)
Samsung Galaxy Note 9 Dual Sim N960FD 【SIMフリー】(83,000円~)
Samsung Galaxy S9 & S9 Plus【SIMフリー】(58,000円~)
Xiaomi Mi Mix 3【SIMフリー】(59,000円~)

\ 僕も毎回ETORENで購入しています /

ETORENなら海外SIMフリースマホが安い!!

今すぐチェックする

※最安値だらけ、関税込みなので後日請求なし!

カスタマイズ 雑記

AFFINGER5(WING) でRinkerをカスタマイズしよう!誰でも出来るCSS追加のみ!

投稿日:2019年2月4日 更新日:

AFFINGER5(WING) × Rinkerは非常に使い勝手が良くて素晴らしいです。

Rinkerをより多く物販リンクのクリック率を上げるためには、CSSカスタマイズをおこないましょう。

ただ、AFFINGER5(WING) 用のカスタマイズをされてる方があまりいなかったのでようやく探し当てたのがHuuubさんのAFFINGER用Rinkerカスタマイズでした。

▼こちらの記事でHuuubさんが、AFFINGER用Rinkerカスタマイズをしてくれています。

Rinker × AFFINGER|物販リンクのクリック率を上げるCSSカスタマイズ!

ただ、AFFINGER5(WING) で子テーマがJETではなく通常のAFFINGER5(WING) 子テーマだったためスマホ版ではボタンがはみ出してしまいました。

今回は、Huuubさんが用意してくれたAFFINGER用RinkerカスタマイズをAFFINGER5(WING) の子テーマでもボタンがはみ出さないようにCSSをほんの一部変更しました。

ちえほん
カスタマイズは自己責任です!
必ずバックアップを事前にとっておきましょう。

それでは、早速やってみましょう!

追加する場所は下記へお願いします▼

ダッシュボード > カスタマイズ > 追加CSS(ここにコードを追加するだけ)

下記をコピーして貼り付けるだけです!!

/*Rinker*/
ul.yyi-rinker-links {
padding: 0!important;
}

div.yyi-rinker-contents img{
max-width:100px;
}

div.yyi-rinker-contents {
margin: 0 0 1.5em;/*外側上の余白を削除*/
border: none;/*外側の枠線を削除(余計な部分)*/
box-shadow: none;/*影を削除*/
}
div.yyi-rinker-contents div.yyi-rinker-box{
border:4px double #CCC;/*二重枠線*/
}
/* 商品タイトル リンク色変更 */
div.yyi-rinker-title a {
color: #1a62af!important;/*通常時の色*/
font-weight: bold;
}
div.yyi-rinker-title a:hover {/*ホバーした時の色*/
color: #e16d15!important;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
margin-bottom: 0!important;
}
/* rinker ボタン高さを44pxに */
div.yyi-rinker-contents ul.yyi-rinker-links li {

font-size: .9em;
letter-spacing: .1em;
margin: 6px 10px 6px 0px;
padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
height:44px;
line-height:44px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
color: white!important;
opacity: 1;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
opacity:0.9;
}
/* ボタン色変更 */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
background: #ffb745; /* 背景色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
background: #d35c53; /* 背景色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
background: #65adf3; /* 背景色 */
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 100px;
min-width: 100px;
padding: 0;
margin-right: 10px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}
/*商品タイトル・詳細・ボタン*/
div.yyi-rinker-contents div.yyi-rinker-info {
width: 100%;
}

/* スマホサイズのみ適用 */
@media screen and (max-width:730px) {
div.yyi-rinker-contents div.yyi-rinker-box{
display:block;
}
/* 画像を中央そろえ */
div.yyi-rinker-contents div.yyi-rinker-image{
margin-left:auto;
margin-right:auto
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
text-align:center;
width: 100%;
margin: 6px 0px;
}
/* rinker 商品詳細(文字とボタン部分)幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: 80%;
margin: 0 auto;
text-align: center;
}
/*メーカー名・価格・日付部分*/
div.yyi-rinker-contents div.yyi-rinker-detail {
padding-left: 0;/*余計な余白を削除*/
}
div.yyi-rinker-contents div.yyi-rinker-detail div.price-box {
font-size: .5em;
}
/*値段部分*/
div.yyi-rinker-contents div.yyi-rinker-detail div.price-box .price {
font-size: 2em;
margin: 5px;
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
}}

/*スマホボタン表示中央*/
@media (max-width: 380px) and (min-width: 321px){
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0;
}}

上記CSSをカスタマイズから変更してください。

▼スマホ表示はこうなります!

スポンサーリンク

-カスタマイズ, 雑記

Copyright© モバイルドットコム , 2019 All Rights Reserved.