【COPIA対応】Rinkerプラグインをおしゃれにカスタマイズする方法。PCではボタンを2段に。

バビ
バビ

ごきげんよう、ハイパーマルチブロガーのバビです。

物販ブロガーの強い味方といえばプラグイン「Rinker」。

便利すぎるプラグインなので、色々な方がデザインカスタマイズをされています。

先日テーマTHE SONICのRinker拡張機能を他テーマでも使用できるプラグイン「COPIA」がリリースされて話題になりました。

以前からRinkerデザインをアレンジして使用していたのですが、COPIAに合わせて新たにカスタマイズしてみました。

注意

どのテーマでも使用できると思いますが、SANGOでしか検証していないため、他テーマでは微調整が必要かもしれません。

Rinkerカスタマイズ完成イメージ

ボタンの色をAmazonはAmazonカラーにして、楽天とYahooはおしゃれっぽい色に変更しています。

ボタンの幅や位置、文字間の余白なども調整して、少しタイトにしました。

PCでの表示

Rinkerカスタマイズ PC表示

スマホでの表示

Rinkerカスタマイズ スマホ表示

実際の表示

Rinkerカスタマイズの参考サイト

参考 Rinkerへのご支援とカスタマイズ方法の表示note

noteを購入することで、「~で探す」といった「Amazon」や「楽天」の後ろの文言を入れるカスタマイズを閲覧できます。

Rinkerの設定

まずはRinkerを設定します。

WordPress管理画面の「設定」から「Rinker設定」を開きます。

Rinker設定

Rinker設定画面の下にある「デザイン設定」のデザインを「スタイルアップ」にしてください。

Rinkreの設定 デザイン設定
バビ
バビ

COPIAを使う場合も「スタイルアップ」にしないとでキャンペーンのマイクロコピーが出てこないよ。

注意

PORIPUを使っている場合、最新バージョンにしていないとデザインが崩れるので、事前に更新しておきましょう。

(2020年9月現在のバージョンは1.26です。)

RinkerカスタマイズCSS

このCSSコードを、外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

バビと同じver

/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----全体-----*/
div.yyi-rinker-contents {
	border: none;/*枠線を消す*/
	border-radius: 5px;/*枠線の丸み*/
	background-color: #f5f5f5/*背景色*/
}
/*-----タイトル文字を少し小さく-----*/
div.yyi-rinker-info div.yyi-rinker-title a {
	font-size: 1em!important;
}
/*-----タイトル文字を左寄せ-----*/
.yyi-rinker-info {
	text-align: left!important; 
}
/*-----スマホ表示でタイトル幅を広く-----*/	
@media screen and (max-width: 500px){
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
	width: 100%!important;
}}
/*-----メーカー名の余白削除-----*/
div.yyi-rinker-detail div:not(:last-child) {
	padding-bottom: 1px!important;
}
/*-----内部の余白調整-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
	padding: 15px 15px 0!important;
}
/*-----画像位置調整-----*/
.yyi-rinker-img-m .yyi-rinker-main-img{
	width:auto!important;
}
div.yyi-rinker-contents div.yyi-rinker-image{
	align-items: center;
}
/*-----ボタンのデザイン-----*/
@media (min-width: 768px){
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 47%;/*幅(2列になるように)*/
}}
ul.yyi-rinker-links a.yyi-rinker-link{
	box-shadow: none!important;/*ボタンの影を消す*/ 
}
@media (min-width: 768px){/*スマホのボタン縦幅*/
ul.yyi-rinker-links a.yyi-rinker-link {
	min-height: 44px!important;
}}
/*-----ボタン間の余白調整-----*/
@media (min-width: 768px){
div.yyi-rinker-info ul.yyi-rinker-links li:not(:last-child) {
    margin-right: 12px!important;
}}
div.yyi-rinker-info ul.yyi-rinker-links li {
    margin-bottom: 5px!important;
}
/*-----ボタンの色-----*/
.amazonlink a {/*Amazon*/
	color: #3A4D66!important;/*文字色*/
	background: #FFC266!important;/*背景色*/
}
.rakutenlink a {/*-----楽天-----*/
	background: #ff7c74!important;/*背景色*/
}
.yahoolink a {/*-----Yahoo!-----*/
	background: #95cad7!important;/*背景色*/
}
/*-----キャンペーン-----*/
.yyi-rinker-link:before {
	border-radius: 10px;/*角丸にする*/
}
.rakutenlink:before, .rakutenlink .yyi-rinker-link:before {
	color: #FF4D4A!important;/*キャンペーンの楽天の文字色*/
}
@media (min-width: 768px){/*PCのキャンペーン表示を左寄せ*/
ul.yyi-rinker-links li.amazonkindlelink:before, ul.yyi-rinker-links li.amazonlink:before, ul.yyi-rinker-links li.rakutenlink:before, ul.yyi-rinker-links li.yahoolink:before {
    text-align: left;
}}
バビ
バビ

ボタンの色などはお好きにアレンジしてみてください。

枠線・背景色・ボタン色デフォルトのままver

Rinerボックスの枠線・背景色とボタンの色をデフォルトのままにしているバージョンです。

Rinkerカスタマイズ デフォルトカラーPC表示
/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----タイトル文字を少し小さく-----*/
div.yyi-rinker-info div.yyi-rinker-title a {
	font-size: 1em!important;
}
/*-----タイトル文字を左寄せ-----*/
.yyi-rinker-info {
	text-align: left!important; 
}
/*-----スマホ表示でタイトル幅を広く-----*/	
@media screen and (max-width: 500px){
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
	width: 100%!important;
}}
/*-----メーカー名の余白削除-----*/
div.yyi-rinker-detail div:not(:last-child) {
	padding-bottom: 1px!important;
}
/*-----内部の余白調整-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
	padding: 15px 15px 0!important;
}
/*-----画像位置調整-----*/
.yyi-rinker-img-m .yyi-rinker-main-img{
	width:auto!important;
}
div.yyi-rinker-contents div.yyi-rinker-image{
	align-items: center;
}
/*-----ボタンのデザイン-----*/
@media (min-width: 768px){
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 47%;/*幅(2列になるように)*/
}}
ul.yyi-rinker-links a.yyi-rinker-link{
	box-shadow: none!important;/*ボタンの影を消す*/ 
}
@media (min-width: 768px){/*スマホのボタン縦幅*/ 
ul.yyi-rinker-links a.yyi-rinker-link {
	min-height: 44px!important;
}}
/*-----ボタン間の余白調整-----*/
@media (min-width: 768px){
div.yyi-rinker-info ul.yyi-rinker-links li:not(:last-child) {
    margin-right: 12px!important;
}}
div.yyi-rinker-info ul.yyi-rinker-links li {
    margin-bottom: 5px!important;
}
/*-----キャンペーン-----*/
.yyi-rinker-link:before {
	border-radius: 10px;/*角丸にする*/
}
@media (min-width: 768px){/*PCのキャンペーン表示を左寄せ*/
ul.yyi-rinker-links li.amazonkindlelink:before, ul.yyi-rinker-links li.amazonlink:before, ul.yyi-rinker-links li.rakutenlink:before, ul.yyi-rinker-links li.yahoolink:before {
    text-align: left;
}}

コメントを残す

メールアドレスが公開されることはありません。