Rinkerのカスタマイズ!デザインをシンプルにしてみる

追記
表示幅によってデザインが崩れてしまうため@mediaを追加しました。(2018.9.6)

横幅が画像のように広くならない部分を修正いたしました。(2018.10.1)


2018.10.8

マクリンさん(@Maku_ring)verを追加

更に使いやすくしています。
マクリンさんのブログはこちら


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

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

くま3号

いや、まったく関係ないやろ。

MENくん

えへへ、シンプルにしてみたよ!


PCだとこんな感じ

Before

rinker-カスタマイズ前

After

rinker-カスタマイズ後

MENくん

細かいところを変更して、ボタンを2列にしてみました!

くま3号

このデザイン、完全に自分のサイト用やんけ


カスタマイズしたところ

変更点

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

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

Before

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

After

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

MENくん

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

Rinkerのカスタマイズの前に

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

Rinkerの価格の表示・非表示

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

Rinkerの「で探す」を手動で追加

ビジュアルエディタ

 

普通のコードの後ろにこれをコピーして貼り付ければ「~で探す」を追加できます。

コードを追記する3つの方法

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

Rinkerのカスタマイズコード

MENくん

な、長いです、、、CSS詳しい方、短くする方法教えてください。

普通のカスタマイズコード

自由リンクをご利用の方向け

 

他のテーマの方へ
このカスタマイズはSANGOのテーマでしかテストしておりません。他のテーマで使用される際は横幅%の部分を調整お願いいたします。

JIN・アフィンガーの方はこちら

JINユーザーさん

notaboさんがぼくのコードをJINユーザー用に修正してくれました。

こちらを参考に
参考 Rinkerカスタマイズ for wordpressテーマ JINnotabo
ぼくの姉妹サイトでもつくってみました
参考 【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみたfor JIN

アフィンガーユーザーさん

HuuubさんがRinkerのカスタマイズを書いてくれています。

こちらを参考に
参考 Rinker × AFFINGER|物販リンクのクリック率を上げるCSSカスタマイズ!monogrow

マクリンさんverのコード

うまくいったかの確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

Rinkerをカスタマイズ:まとめ

追加CSSのまとめ

Rinkerは商品管理として、非常に使いやすいプラグインです。

自分のブログにマッチしたデザインにすると、売上が上がるかもしれませんね。