Rinkerを徹底解剖！？見た目を自分好みにカスタマイズしよう！

WordPressのプラグイン「Rinker」はかなり便利ですが、CSSを少し編集するだけでさらに使いやすく、自分好みのデザインにできます。

「もう少しデザインにこだわりたい…。」
「自分のブログのカラーに合わせるには？」

そういった悩みを、本記事では解決します。

CSS初心者の方でもコピペでそのまま使えるコードを用意していますので、わかりやすいかと思います。

それでは一緒にやっていきましょう！

使い方

Rinkerのデザインを変更する流れは、次の3ステップです。

① Rinkerを見ながらコードの値を変更
② コードをコピーする
③ 自サイトの「追加CSS」に追加

順を追って見ていきましょう。

CSSコードのサンプル

Rinkerの外観とクラスの関係は、以下のようになっています。

ボックス全体

/*ボックス全体のデザイン*/ .yyi-rinker-contents { border:0px!important; } .yyi-rinker-box { display: flex; /*noneで非表示*/ border: 0px dotted #555555; /*枠線*/ border-radius:10px; /*角の丸み*/ background: #f1f2ce; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ }

商品画像

写真の形を変える

/*商品画像*/ .yyi-rinker-main-img{ display: flex; /*noneで非表示*/ border: 2px solid #eeeeee!important; /*枠線*/ border-radius:10%; /*角の丸み*/ box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);　/*影*/ }

商品がない状態の画像を用意する

/* rinker商品なし時の表示 */ .yyi-rinker-no-item .yyi-rinker-image{ width: 64px; /*画像サイズ-幅*/ height: 64px; /*画像サイズ-高さ*/ background: #eee; /*背景色*/ display: flex; /*noneで非表示*/ align-items: center; /*上下中心*/ justify-content: center; /*左右中心*/ font-size: 0.6em; /*文字サイズ*/ color: #999; /*文字色*/ border: 1px solid #ddd; /*枠線*/ border-radius:0.6em; /*角の丸み*/ margin: auto; /*周囲の隙間*/ } .yyi-rinker-no-item .yyi-rinker-image::before { content: "No Image"; /*文字表記*/ text-align: center; /*左右中心*/ }

商品がない場合でもクラスを追加する

ショートコードにクラスを追加してRinkerの見た目を変更していた場合、商品がなくなった途端に崩れてしまいます。

原因は読み込み先のテンプレートファイルが異なるからです。

この商品がない場合に読み込まれる「no-template-default.php」は、ショートコードに記載したクラスが読み込まないように設定されています。

ですので、これを読み込ませるようにプログラムをカスタマイズします。

商品タイトル

色や文字の大きさを変更する

/*タイトル - 色や文字の大きさを変更する*/ .yyi-rinker-title{ display: flex; /*noneで非表示*/ font-size:0.5em; /*文字サイズ*/ background:#eeeeee; /*背景色*/ padding:1em; /*周囲隙間*/ a { color:#880088; /*文字色*/ } }

タイトル1行表示

/*タイトル1行表示*/ .yyi-rinker-title{ display: block; width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

ショップボタン

色や形を変更する

/*ショップボタンのデザイン*/ .yyi-rinker-links{ .freelink1{ /*フリーリンク1*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:0px; /*角の丸み*/ background:#4471b0!important; /*背景色*/ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .freelink3{ /*フリーリンク2*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:10px; /*角の丸み*/ background:#6e64aa!important; /*背景色*/ box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .amazonlink{ /*Amazon*/ display: block; /*noneで非表示*/ border: 2px solid #b6602f; /*枠線*/ border-radius:2px; /*角の丸み*/ background:#f07532!important; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .rakutenlink{ /*楽天*/ display: block; /*noneで非表示*/ border: 2px solid #eeeeee; /*枠線*/ border-radius:50px; /*角の丸み*/ background:#b3341a!important; /*背景色*/ box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .yahoolink{ /*Yahoo*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:50%; /*角の丸み*/ background:#ef493f!important; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .mercarilinka{ /*メルカリ*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:5px; /*角の丸み*/ background:#69c5f9!important; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .freelink2{ /*フリーリンク2*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:5px; /*角の丸み*/ background:#5cbdb2!important; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ } .freelink4{ /*フリーリンク4*/ display: block; /*noneで非表示*/ border: 0px dotted #eeeeee; /*枠線*/ border-radius:5px; /*角の丸み*/ background:#6bab89!important; /*背景色*/ box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);　/*影*/ } }

文字を追加する

/*ボタンに文字追加*/ .yyi-rinker-links{ /*ボタン全体対象*/ align-items: center; /*テキスト上下中央*/ } .amazonlink::before { content: 'ここに表示される'; /*表示する文字*/ display: inline-block; /*ブロックスタイル*/ position: relative; /*位置（相対）*/ white-space:nowrap; /*改行なし*/ overflow: hidden; /*はみ出さない*/ text-overflow: ellipsis; /*文字隠れ時「⋯」*/ left:50%; /*中央に表示*/ transform: translate(-50%); /*中央に表示*/ width:50%; /*中央に表示*/ font-size: 0.5em; /*文字サイズ*/ font-weight: bold; /*太文字*/ color: #ffffff; /*文字色*/ border-radius: 10px; /*角の丸み*/ background: #c95347; /*背景色*/ padding:0em 1em; /*背景サイズ*/ } /*追加したいボタンのクラスに置き換えてください .freelink1 .freelink2 .freelink3 .freelink4 .rakutenlink .yahoolink .mercarilink */

ボタンのみにする

/*ボタンのみにする*/ .yyi-rinker-info{ width:100%; /*ボタン全体を表示する幅*/ } .yyi-rinker-contents { border:0px!important; /*枠線削除*/ box-shadow:none; /*影削除*/ } .yyi-rinker-box { box-sizing:; padding:0; /*周囲隙間削除*/ margin:0; /*周囲隙間削除*/ } .yyi-rinker-title, /*商品タイトル*/ .yyi-rinker-image /*使用品画像*/ { display: none; /*非表示*/ } .yyi-rinker-links{ display: grid!important; /*格子状に並べる*/ grid-template-columns: 1fr 1fr 1fr 1fr; /*4列表示*/ //grid-template-columns: 1fr 1fr 1fr; /*3列表示*/ text-align:center; /*文字位置中央*/ overflow:hidden; /*はみ出さない*/ text-overflow: ellipsis; /*文字隠れ時「⋯」*/ white-space: nowrap; /*改行なし*/ }

まとめ

ここまで読んで頂き、ありがとうございます。

いかがでしたでしょうか。
Rinkerへの理解を深めつつオシャレにしていきましょう！

また、Rinkerの表示速度を改善する方法も記事にしていますので、ぜひチェックしてください。

不明な点がございましたら、気軽にお問い合せフォームよりご連絡をお願いします。できる限りサポートさせて頂きます。

それではまた会いましょう！