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

評価(ポチッとしてね) (5 / 1)
追記
表示幅によってデザインが崩れてしまうため@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のカスタマイズの前に

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

Rinkerの価格の表示・非表示

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

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

ビジュアルエディタ

 

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

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

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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のコード

うまくいったかの確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

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

追加CSSのまとめ

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

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

2
コメント( ˶ˆ꒳ˆ˵ )

avatar
新しい順 古い順 いいね順
akira
コメントした人
akira
評価(ポチッとしてね) :
     

いつも参考にさせていただいています。
くまさん様とマクリン様のCSSコードをためしましたが、どうしてもモバイル表示の際に、画像とリンクが縦表示になりません。
解決法ありますでしょうか。
PORIPUを使用しているので、PORIPUのRINKER用のCSSを削除などしてみましたが、うまくいきません、、、