【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみる

追記
ブラウザの表示幅によってデザインが崩れてしまう部分を修正いたしました。@mediaを追加しました。(2018.9.6)

横幅が画像のように広くならない部分を修正いたしました。div.yyi-rinker-info を div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info に変更。(2018.10.1)


2018.10.8

マクリンさん(@Maku_ring)の
Rinkerカスタマイズを追加

このページで紹介しているカスタマイズを、更に使いやすくしています。マクリンさんのブログはこちら

コードへ飛ぶ


カスタマイズでのおねがい
カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では
プラグインの「Rinker」のカスタマイズを説明。
参考 商品リンク管理プラグインRinker(リンカー)の公式サイトおやこそだて
一気に「~で探す」を追加する方法が書かれている支援noteはこちら
参考 Rinkerの支援とカスタマイズ方法やよい|note

Rinkerは2018年6月6日に配布が開始された、最強の商品管理プラグインです。ぼくは5月28日からWordPressをはじめたので、ちょっとだけ親近感があります。
いや、まったく関係ないやろ。

PORIPUをご利用の方は、すでにSANGOにマッチするデザインになっています!ぼくは自分のサイト用にもっとシンプルにしてみました。

PCだとこんな感じ

Before

rinker-カスタマイズ前

After

rinker-カスタマイズ後

 

細かいところを変更して、ボタンを2列にしてみました!
このデザイン、完全に自分のサイト用やんけ


カスタマイズしたところ

変更点

こんなところをカスタマイズ
  • 枠線をsolidに
  • ボタン幅を統一
  • 「で探す」を追加(ビジュアルエディタより)
  • 価格を削除(Rinker設定より)
  • レスポンシブデザインに変更

 


スマホ(iPhone8)だとこんな感じ

Before

rinker-カスタマイズ前スマホ

After

rinker-カスタマイズ後スマホ

 

スマホでは画像が縦に並ぶ用に変更しました。

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

Rinkerをカスタマイズする

Rinkerの設定で価格を非表示にします

価格を非表示にする
WordPress設定Rinker設定価格を非表示にするにチェックを入れます。これはお好みです。表示していてもデザインは崩れません。

「で探す」を追加します

ビジュアルエディタ
/*--------------------------------------
1.「商品リンク追加」ボタンからショートコードを追加
--------------------------------------*/
[itemlink post_id="〇〇"]
/*--------------------------------------
2.「で探す」を追加するコードを追加
--------------------------------------*/
[itemlink post_id="〇〇" alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す]

赤色の文字を追加するとボタンに表示されます。

コードを記入する準備

(1)~(3)のどれかでコードを記入する準備をします。

(1)追加CSSを使ってコードを記入する方

手順 WordPress外観カスタマイズ追加CSS
追加CSSについてはこちら
カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方  

(2)テーマ編集を使ってコードを記入する方

手順 WordPress外観テーマの編集

子テーマのstyle.cssが選択されていることを確認しておきます。

 

(3)FTPソフトを使ってコードを記入する方

手順 FTPソフトを起動自分のサイトに接続style.cssを開くエディタソフトでコードを表示
 
MENくん

とりあえずこれで、コードを記入する準備は完了です

style.cssにコードを追加する

な、長いです、、、CSS詳しい方、短くする方法教えてください。
style.css(追加するコード:Rinkerのデザイン変更)
/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----全体-----*/
div.yyi-rinker-contents {/*内容(全体)*/
    border: solid 1px #42424230;/*枠線の種類・幅・色*/
    border-radius: 10px;/*枠線の丸み(上 右)*/
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);/*影*/
}
div.yyi-rinker-contents div.yyi-rinker-box {/*内容(中身)*/
    padding: 1em 0;/*余白(中)*/
}
/*-----左側(画像)-----*/
div.yyi-rinker-contents div.yyi-rinker-image {/*画像*/
    margin-left: 3%;/*左の余白*/
    width: 30%;/*画像の幅*/
}
/*-----右側(商品名やボタンなど)-----*/
div.yyi-rinker-info {/*右側全体*/
    padding: 0 3%;/*左右の余白*/
    width: 100%;/*右側全体の幅*/
}
.yyi-rinker-title {/*商品名*/
    font-size: .9em;/*文字の大きさ*/
}
div.yyi-rinker-contents div.yyi-rinker-title p {/*タイトル*/
    margin: 0;/*タイトルの余白*/
}
div.yyi-rinker-contents div.yyi-rinker-title a {/*タイトル*/
    color: #42424290;/*タイトルの文字色*/
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*販売者と価格*/
    font-size: .8em;/*文字の大きさ*/
    color: #42424280;/*文字の色*/
    padding-left: 0;/*左側の余白*/
    margin-top: 0;/*上の余白*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {/*価格*/
    margin: .5em 0;/*上下の余白*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格の文字*/
    letter-spacing: 0.1em;/*文字の間隔*/
    font-size: 1.2em;/*文字の大きさ*/
    margin-right: .5em;/*右側の余白*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*すべてのボタン*/
    width: 45%;/*幅(2列になるように)*/
    padding: 0 .7em;/*左右の余白(ボタン内)*/
    margin: .5em 1.5em .4em 0;/*左側の余白だけ0(ボタン外)*/
    box-shadow: 0 2px 3px rgba(0,0,0,.2);/*影*/
    font-size: .8em;/*文字の大きさ*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;/*マーク削除*/
}
/*-----ボタンの色-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
    background: #FF4D4D;
}
/*-----マウスホバー(ボタン)-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);/*優しく浮き上がる影*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;/*手前のマウスホバー*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;/*ホバー時に薄くなるのをオフ*/
}
@media screen and (max-width: 500px){/*スマホ表示用(ブレイクポイント500px)*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;/*縦表示になるように*/
}
/*-----画像ー----*/
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;/*画像を中央表示*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {/*全体*/
    padding: 0;/*余白削除*/
    margin: auto;/*中央揃え*/
    width: 87%;/*横幅*/
    text-align: center;/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 100%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白 左右の余白削除*/
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
    padding: 0;/*文字の余計な余白を削除*/
}}
@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい(ブレイクポイント501~1239px)*/
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;/*横幅を80%*/
}}
style.css(追加するコード:Rinkerのデザイン変更)

div.yyi-rinker-contents {
    border: solid 1px #42424230;
    border-radius: 10px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 1em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin-left: 3%;
    width: 30%;
}
div.yyi-rinker-info {
    padding: 0 3%;
    width: 100%;
}
.yyi-rinker-title {
    font-size: .9em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #42424290;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding-left: 0;
    margin-top: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 45%;
    padding: 0 .7em;
    margin: .5em 1.5em .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    font-size: .8em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #FF4D4D;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
}
@media screen and (max-width: 500px){
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 100%;
    margin: .5em 0;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}}
@media screen and (min-width: 501px) and (max-width: 1239px){
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;
}}
MEMO 他のテーマをお使いの方へ
このcssはSANGOのテーマ(自サイト)でしかテストしておりません。他のテーマで使用される際は横幅%の部分を調整お願いいたします。

▼ JINユーザーさん
div.yyi-rinker-contents ul.yyi-rinker-links li の%部分を少し小さくしていただくと2列になると思います。
カスタムの仕上がり具合とコードについてはこちらのnotaboさんのブログを見ていただくと確認できます。

参考 Rinkerカスタマイズ for wordpressテーマ JINnotabo
MEMO 自由リンクをご利用の方へ
コードを追加することで、背景色を変更できます。
▼追加するコード
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1{background:好きな色コード;}

 

マクリンさんver

/*--------------------------------------
  Rinkerカスタマイズ マクリンさんver
--------------------------------------*/
/*Rinker変更*/
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #51a7e8;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 0px;
}
@media screen and (min-width: 375px) and (max-width:490px){/*スマホ表示用(ブレイクポイント500px)*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;/*縦表示になるように*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {/*全体*/
    padding: 0;/*余白削除*/
    margin: auto;/*中央揃え*/
    width: 87%;/*横幅*/
    text-align: center;/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 100%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白 左右の余白削除*/
    line-height:44px;
    height: 44px;
    font-size: 0.95em;
    padding: 0 14px 0 10px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
    padding: 0;/*文字の余計な余白を削除*/
    height:44px;
    line-height:44px;
    font-size: 0.95em;
}
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 20px);
    display:block;
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 230px;
    min-width: 140px;
    padding: 0;
    margin-left:auto;
    margin-right:auto
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
    width: auto;
}}
/*Rinker自由ボタンのマウスオーバー時*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
    box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    content: "";
}

 

コードを追加したあとにちゃんと反映されているか確認します。
手順 style.cssを保存ブラウザでキャッシュを削除して更新(ctl+F5)

すべてカスタマイズしてから気がついたんですが、ほとんど一緒のRinkerカスタマイズ記事がありました、、、
調べてからやれよ

 

 

Rinkerをカスタマイズする手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • Rinkerで価格を非表示にするにチェック
  • リンクを追加した際に「で探す」コードを追加。
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。

Rinkerを自分のサイトに合うようにカスタマイズしました!

本カスタマイズをご利用される際や、万が一おかしな点がありましたら、SNSへのシェアでご連絡いただけると助かります!

 

 
ブログの執筆を減速させるソフト <イラストレーター・フォトショップ>
MENくん

記事を書くのに集中したいブロガーは絶対に買っちゃダメだよ☆

くま1号

もし買うなら、せめて安く買おうね

アドビの漫画 アドビの漫画2
フォトショ・イラレはこちら

1.お申込み方法をクリック

2.キャンペーンのバナーをクリック

3.お申込みはこちらをクリック