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

この記事では、商品管理プラグイン「Rinker(リンカー)」のカスタマイズを紹介。

MENくん

RinkerはAmazonリンクや楽天リンクをブログで使う人にとって、必須のプラグインです

Rinker(リンカー)のカスタマイズデザイン
  1. 旧バージョン
  2. 新バージョン
  3. マクリンさんバージョン(コードへジャンプ
  4. FANBOX限定① カラー変更
  5. FANBOX限定② フラット化
  6. FANBOX限定③ 白黒
  7. FANBOX限定④ ラベル追加

まずは、Rinkerのもともとのデザインとカスタマイズした結果を紹介しますね。

  • デフォルトのデザイン
  • カスタマイズ(旧バージョン)
  • カスタマイズ(新バージョン)

Rinkerのデザインに関しては、PCでの表示とスマホ表示で大きくデザインが違ってくるので、両方とも紹介します。

Rinkerのデザイン(デフォルト)

PC表示
スマホ表示

カスタマイズ(旧バージョン)

PC表示
スマホ表示

カスタマイズ(新バージョン)

PC表示
スマホ表示
ココがポイント!
  • ボタンを押しやすい大きさに変更
  • ちょうどいい感じに余白を調整
  • 画像と文字のバランスを調整
  • 文字のコントラストを調整
  • 商品名のリンクカラーを変更
  • ボタンをSANGO風の浮き出しボタンに変更
  • ボタンに記号を追加
  • スマホ表示ではボタンの位置を変更
  • 画像リンクにホバーアクション追加

FANBOX限定①

まずは、新バージョンのカラーを色々と変更しました。

しっとりグラデカラー

コードはこちら(FANBOX)

FANBOX限定②

フラットボタンにしたり、アイコンを変更してみました。

FANBOX限定③

黒色で統一された落ち着いたデザインにしてみました。

PC表示
スマホ表示

カスタマイズコードはこちら(FANBOX)

FANBOX限定④

おすすめのラベルを追加してみました。

カスタマイズコードはこちら(FANBOX)

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

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

Rinker(リンカー)について

Rinkerの公式ページはこちらです。

参考 商品リンク管理プラグインRinker(リンカー)の公式サイトおやこそだて

Rinkerを作ったやよいさん(@ayayoi19)が分かりやすい記事を書いてますので、使う前に読んでおきましょう。

Rinkerはパワーアップできます

Rinkerのすべてのボタンに「~で探す」を追加

これはボタンのクリック率を上げるので、おすすめです。やよいさんが有料のnoteでやり方を紹介しています。

参考 Rinkerの支援とカスタマイズ方法やよい|note

Rinkerのカスタマイズの前に

Rinkerの価格の表示・非表示

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

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

通常のRinkerのコード

「~で探す」を追加した場合

通常のコードに以下の文字を追加するだけです。

alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

Rinkerのカスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

カスタマイズコード(旧バージョン)

旧バージョンはPORIPUを使用している人限定です。

MENくん

ごめんね!SANGOオンリーの方は新バージョンを使ってね

カスタマイズコード(新バージョン)

マクリンさんverのコード

物販ブロガーのマクリンさん(@Maku_ring)がRinker(リンカー)で使用しているカスタマイズコードです。

マクリンさんのブログ「マクリン」は物販をしている方は参考になりますよ。

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

JINユーザーさん

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

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

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

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

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

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

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

追加CSSのまとめ

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

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

2 COMMENTS

akira

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

返信する
くまさん

akira様

私の方で、本記事に掲載しているコードを適用したところ、問題なく縦表示になっております。
(PORIPU適用時でもです)
できましたら、縦表示できないページのURLをいただければ原因がわかるかもしれません。

ページを公開するのが難しいようでしたら、DMでも構いません。
よろしくお願いいたします( ˶ˆ꒳ˆ˵ )

返信する

コメントを残す

メールアドレスが公開されることはありません。