雑記

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

更新日:

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をカスタマイズから変更してください。

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

スポンサーリンク

\ PICK UP!! /

ASUS新製品ZenFone 6含む発表会イベント

エイスース

ASUS新製品ZenFone 6含む発表会イベントレポート | 創立30周年&ジョニー・シー会長が登壇

ASUS発表会イベントに初参戦。どうも、ちえほん(@chehonz201)です。 本記事では、ASUS JAPAN発表会イベント「WISER TOGETHER~30 Years Together」の様子をレポートしていきます。発表会では、国内向け新型フラッグシップモデル「ZenFone 6 ZS630KL」の発表や新型ノートPC2「ZenBook Pro Duo」についてなど、魅力的な新製品が発表されました。その時の興奮や感動を少しでもお届け出来たら幸いです。 まず、本題に入る前に発表会にお招き頂いたAS ...

続きを読む

Amazonスマートフォン本体の売れ筋ランキング第1位にZenFone6がランクイン

エイスース

ASUS ZenFone 6 ZS630KL (6GB/128GB) | Amazonスマートフォン本体の売れ筋ランキング第1位に

先日、国内発売が発表されたASUS最新フラッグシップモデルZenFone 6。すでに国内では、各ショップにて予約が開始されており、いよいよ明日8月23日に発売が開始されます。 ASUS ZenFone 6 ZS630KLは、国内では初となるインカメラ・アウトカメラ兼用のフリップカメラです。 カメラが動き出す大胆なギミックが持ち味で、アウトカメラ(メインカメラ)でインカメラも撮れる自撮りやグループ撮影にも使える万能なカメラです。防水防塵機能やおサイフケータイはありませんが、イヤホンジャックや大容量バッテリー ...

続きを読む

国内版ZenFone 6の実機をチェック

エイスース

国内版ZenFone 6(トワイライトシルバー/ミッドナイトブラック)の実機をチェック | 見れば見るほど欲しくなるんだよ。

ZenFone 6は最高だぞッ!!どうも、ちえほん(@chehonz201)です!! ちえほん見れば見るほど欲しくなるんだよ。 遂に国内版の発売が決まったASUS渾身の最新フラッグシップ「ZenFone 6」。国内では初となるインカメラ・アウトカメラ兼用のフリップカメラです。インカメラ(もしくは、音量ボタン)を起動するとカメラが動き出す大胆なギミックが持ち味で、アウトカメラ(メインカメラ)でインカメラも撮れる自撮りやグループ撮影にも使える万能なカメラです。 本記事では、ASUS JAPANの発表会イベント ...

続きを読む

エイスース

【30周年記念モデル】ZenFone 6実機ファーストインプレッション | A部発表会レポート①

ASUS(エイスース)から国内発売が発表されたZenFone 6。注目したいのは、30周年記念モデルの存在。限定モデルのASUS ZenFone 6 Edition 30 (ZS630KL)は、通常のZenFone 6をさらにハイスペック仕様(RAM12GB / 512GB)に変え、背面にASUSらしいスピン調でかつ30周年記念ロゴが入っています。 また、保証も手厚くなんと国内30ヶ月保証が提供されます。特別な存在のZenFone 6は通常モデルにはないさらなる高級感を放つ。上質で、懐かしい背面加工はAS ...

続きを読む

ZenFone 6と外箱

エイスース

ASUS ZenFone 6 ZS630KL レビュー!インカメラ・アウトカメラ兼用のフリップカメラが最強すぎる

どうも、僕はASUSが好き。ちえほん(@chehonz201)です!! さて、今回はASUS最新フラッグシップモデル「ZenFone 6 ZS630KL」を購入したのでレビューをお届けします。注目は、やはりインカメラ・アウトカメラ兼用のフリップカメラです。インカメラ(もしくは、音量ボタン)を起動するとカメラが動き出す大胆なギミックが持ち味。また、最新のハイエンド向けCPU搭載や他にはない大容量バッテリー5,000mAhの採用など、目が話せない2019年夏モデル大注目スマートフォンとなっています。 この記事 ...

続きを読む

エイスース

ASUS JAPAN新型スマホ「ZenFone 6 ZS630KL」を発表 | 発売は8/23から、価格は69,500円(税抜)〜

ASUS JAPANは、発表会イベント「WISER TOGETHER~30 Years Together」にて国内向けに新型フラッグシップモデル「ZenFone 6 ZS630KL」を投入することを発表しました。 国内投入されるは「ZenFone 6 ZS630KL」、以下のとおりです。( 国内版 ZenFone 6 ZS630KL ミッドナイトブラック RAM8GB/ROM256GB (BK256S8) 8/23発売開始 69,500円(税抜) ZenFone 6 ZS630KL トワイライトシルバー ...

続きを読む

iPhone 11を買うか買わないか

アップル

2019年今秋に発売されるであろう新型iPhoneは買いますか | 7割近くは買わない・見送り?

2019年iPhoneを買いますか?どうも、ちえほん(@chehonz201)です!! いよいよ、来月に発表されるであろうApple(アップル)の新型iPhone 11シリーズ(仮名称)。カメラは、5.8インチiPhone Proと6.5インチiPhone Pro Maxの2機種が上位モデルの位置づけでトリプルカメラを搭載、iPhone 11はデュアルカメラを搭載すると言われています。 また、iPhone 11シリーズは以下の三種類が登場すると言われています。 ポイント iPhone 11 ▶ ...

続きを読む

iPhone 2019年モデルのケースを買ってみた

アップル

新型iPhone 2019年モデル用と思われるケースを買ってみた | XS Maxに付けても違和感がない。

新型iPhoneはどれを買おう。どうも、ちえほん(@chehonz201)です!! 今秋、発売予定のアップル新型iPhoneについて様々なリークがされています。今年のiPhoneはカメラ部分が大きく変わると言われています。 ちえほん実際どんな感じになるのか知りたい というわけで、先日のEngadget夏祭りにて山根博士さんから新型iPhone 2019年モデル用と思われるケースを買ってみました。 すでにご存知の方も多いかもしれませんが、今年のiPhoneは三種類発売されると言われています。発売されると言わ ...

続きを読む

関連記事

-雑記

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