Rinker Style Customizerは、Rinkerの商品リンクカードのデザインを管理画面から変更できる無料のWordPressプラグインです。
CSSを書かなくても、ボタンの色やカードの見た目、PCとスマホの列数を管理画面から変更できます。
COPIA（キャンペーンマイクロコピー）にも対応しています。
以前、CSSでRinkerをカスタマイズする方法を紹介しましたが、もっと手軽にできるようにプラグイン化しました。
こんな人におすすめ
- Rinkerの見た目を変えたいけど、CSSはよくわからない
- 子テーマにCSSをコピペして管理するのが面倒になってきた
- PCとスマホでボタンの列数を変えたい
- COPIAを使っていて、ボタン色を変えるとキャンペーン表示が崩れて困っている
デザインサンプル
設定を変えるだけで、以下のような見た目にできます。
デフォルト（何も変更しない状態）
プラグインを有効化しても、設定がすべてデフォルトならRinkerの見た目は一切変わりません。
ダーク × 角丸大 × PC2列
落ち着いた色合いで、ガジェット系・男性向けサイトに合います。
パステル × アウトライン
淡い色のアウトラインボタン。女性向け・ライフスタイル系ブログに。
ネオン
個性的なネオンカラー。
7種類のカラープリセットから選択でき、さらに個別に色を変更することもできます。
主な機能
- カードデザイン — 背景色・枠線（色・太さ）・角丸・影を個別に設定
- ボタンスタイル — 標準（塗りつぶし）とアウトライン（枠線のみ）を切り替え
- ボタン角丸 — なし〜ピル型まで選択
- レイアウト — PCの列数（1〜3列）とスマホの列数（1〜2列）を独立して設定
- ボタンカラー
・カラープリセット — ナチュラル・ビビッド・ダーク・パステル・モノトーン・ポップ・ネオンの7種
・個別カラー上書き — プリセットの色をWordPressのカラーピッカーで自由に変更可能 - COPIA対応 — キャンペーンマイクロコピーとの共存。スマホ2列・PC3列時は自動で非表示
- 安全設計 — 全設定がデフォルトなら、Rinkerの見た目は一切変わらない
CSSカスタマイズとの違い
このプラグインは、以前公開したCSSでのRinkerカスタマイズをプラグイン化したものです。
どちらを使えばいいか迷う方向けに、違いをまとめます。
- CSSを子テーマやカスタマイザーに追記する
- 自由度は高いが、管理や調整は自分でやる必要がある
- テーマ変更やアップデートで消える可能性がある
- 管理画面から選ぶだけ。CSSの知識は不要
- テーマを変えても設定は残る
- カラープリセットがあるので、配色を考える手間が省ける
- PC・スマホの列数を独立制御できる
CSSが苦にならない人はCSS版でもまったく問題ありません。
手軽さを重視するならプラグイン版がおすすめです。
すでにCSS版を使っている場合は、プラグイン導入前にCSS版のコードを削除してください。
両方が有効だと競合します。
ダウンロードと動作要件
バージョン： 1.0.0
動作要件： WordPress 6.0以上 / PHP 7.4以上 / Rinker（必須）
推奨： COPIA（キャンペーンマイクロコピーを使う場合）
ライセンス： GPL v2 or later
Rinkerのデザイン設定を「スタイルアップ」にした状態でご利用ください。
インストールと初期設定
プラグインのインストール
- 上のリンクからzipファイルをダウンロード
- WordPress管理画面 → プラグイン → 新規追加 → プラグインのアップロード
- zipファイルを選択してインストール → 有効化
有効化すると、外観 → Rinker Style Customizer にメニューが追加されます。
Rinkerのデザイン設定を「スタイルアップ」にする
これは必須の手順です。
WordPress管理画面の「設定」→「Rinker設定」を開いて、画面下部の「デザイン設定」を「スタイルアップ」に変更してください。
COPIAを使っている場合もスタイルアップが必要です。スタイルアップ以外のデザイン設定では、COPIAのキャンペーンマイクロコピーが表示されません。
設定方法
外観 → Rinker Style Customizer を開くと、左側に設定、右側にプレビューが表示されます。
設定を変更するとプレビューにリアルタイムで反映されます。
カードデザイン
商品カード全体の外観を変更します。
- 背景色 — カラーピッカーで選択。空欄ならRinker標準のまま
- 枠線 — デフォルト / 非表示 / 表示（色・太さを指定）
- 角丸 — なし〜特大（20px）
- 影 — チェックで影を付ける
ボタンデザイン
ショップボタンのスタイルを変更します。
- 標準 — 塗りつぶしボタン（Rinkerのデフォルト）
- アウトライン — 枠線のみ。ホバーで塗りつぶしに変わる
- 角丸 — なし〜ピル型
レイアウト
PCとスマホのボタン列数を独立して設定できます。
- PC列数 — デフォルト / 1列 / 2列 / 3列
- スマホ列数 — デフォルト / 1列 / 2列
※スマホ2列・PC3列ではCOPIAのキャンペーンマイクロコピーは自動的に非表示になります（スペースが確保できないため）。
ボタンカラー
プリセットから選ぶ
7種類のカラープリセットから選択できます。
| プリセット | 特徴 |
|---|---|
| デフォルト | Rinker標準色 |
| ナチュラル | 柔らかいトーン |
| ビビッド | 鮮やかなブランドカラー |
| ダーク | 落ち着いた濃色 |
| パステル | 淡い色合い |
| モノトーン | グレー濃淡のみ |
| ポップ | 明るく楽しい配色 |
| ネオン | 個性的なネオンカラー |
個別に色を変更する
「個別カラーを有効にする」にチェックを入れると、各ボタンの背景色と文字色をカラーピッカーで自由に変更できます。
プリセットで大まかな色を決めてから、気になるボタンだけ個別に調整する使い方がおすすめです。
空欄の項目はプリセットの色がそのまま適用されます。
注意点
デザイン設定について
Rinkerのデザイン設定は「スタイルアップ」が必須です。
「ノーマル」「スリム」「ミニ」など、他のデザイン設定では正しく動作しない場合があります。
キャッシュプラグインとの関係
WP Fastest CacheやAutoptimizeなどのキャッシュプラグインを使っている場合、設定を変更した後にキャッシュのクリアが必要です。
「保存したのに反映されない」というときは、まずキャッシュをクリアしてみてください。
既存のCSSカスタマイズとの関係
子テーマのstyle.cssやカスタマイザーの「追加CSS」にRinkerのカスタマイズCSSを追記している場合、プラグインの設定と競合します。
プラグインを導入する場合は、既存のRinkerカスタマイズCSSを削除してからご利用ください。
プラグインの更新について
自動更新機能はありません。
WordPressやRinkerのバージョン更新時に必要があれば、対応したバージョンをこのページで配布します。
よくある質問
Q.無料で使えますか？
A.はい。GPL v2ライセンスで無料配布しています。
Q.Rinker本体がなくても使えますか？
A.使えません。Rinkerが有効化されていることが前提です。
Q.COPIAがなくても使えますか？
A.使えます。COPIAはキャンペーンマイクロコピー機能を使う場合に必要なだけで、Rinker Style Customizer自体はCOPIAなしでも動作します。
Q.以前追加したCSSは削除した方がいいですか？
A.はい。子テーマやカスタマイザーに追記したRinkerカスタマイズCSSは、プラグインと競合するため削除してください。
Q.設定変更が反映されないときは？
A.キャッシュプラグインのキャッシュをクリアしてください。それでも反映されない場合は、ブラウザのキャッシュ（スーパーリロード）も試してください。
自動更新はありますか？
ありません。更新版はこのページで配布します。
免責事項
- 本プラグインはGPL v2ライセンスのもと、無償で提供しています。
- 本プラグインの使用により生じたいかなる損害についても、作者は一切の責任を負いません。
- ご利用の際は、事前にバックアップを取った上で、ご自身の責任のもとでお使いください。
- バグ報告やご要望がありましたら、お問い合わせフォームよりご連絡ください。
更新履歴
- 初版リリース
- カードデザイン（背景色・枠線・角丸・影）
- ボタンスタイル（標準 / アウトライン）
- ボタン角丸
- PC / スマホ列数の独立制御
- カラープリセット7種
- 個別カラー上書き
- COPIA キャンペーンマイクロコピー対応