Rinker(リンカー)のデザインをカスタマイズ【CSSコピペで簡単設定】

Rinker(リンカー)のデザインをカスタマイズ【CSSコピペで簡単設定】

この記事では、WordPressのプラグインであるRinker(リンカー)のデザインを、CSSでカスタマイズする方法を紹介しています。

目次

Rinker(リンカー)とは

「Rinker」は、ブログに載せるAmazonや楽天などの商品リンクを簡単に作成できる無料のWordPressのプラグインです。

4ステップで商品リンクが作成できる」素晴らしいプラグインで、多くのブロガーが使っています。

リンク作成手順は下記になります。

リンク作成手順
  1. 投稿画面から「Rinker」ブロックを押す
  2. 「商品リンク追加」を押す
  3. 商品のキーワードを入力して「検索」する
  4. 商品リンク完成

次のような商品リンクが簡単に作成できます。

Rinkerを使って作成した商品リンク
Rinkerを使って作成した商品リンク

ブログで商品を紹介している方で、まだRinkerを使っていないなら、ぜひRinkerを使ってみることをおすすめします。

Rinker(リンカー)の公式サイト

Rinker(リンカー)のデザインのカスタマイズ前にすること

今回はRinkerのデザインのカスタマイズを説明していきますが、その前に完了していただきたいことがあります。

Rinker公式サイトにマニュアルがありますので、マニュアルを参考にして下記の内容を完了しておくことをお願いします。

カスタマイズ前にすること
  • Rinkerをインストール
  • Rinker設定でAmazonアソシエイト、楽天アフィリエイトなどの設定

Amazonアソシエイト、楽天アフィリエイトなどの設定が、全て完了していないとカスタマイズできないわけではないので、その点はご安心ください。

Rinker(リンカー)のデザインをカスタマイズ

デザインをカスタマイズしたCSSコードと、CSSコードを貼り付ける方法を解説します。

ボタンのカスタマイズ

ボタンを少し優しい色合いに装飾し、枠の角は少し丸みを付けてみました。

カスタマイズした商品リンクのキャプチャとCSSコードは下記になります。

Rinkerのボタンをカスタマイズ
Rinkerのボタンをカスタマイズ

CSSコード

div.yyi-rinker-contents ul.yyi-rinker-links li {
	border-radius: 4px !important;
	margin: 5px !important;
}

/* Amazon */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
	background: #f9b746 !important;
}

/* 楽天市場 */
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
	background: #f58182 !important;
}

/* Yahooショッピング */
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
	background: #68caef !important;
}

CSSコードを貼り付ける方法

CSSコードを設定する手順は下記になります。

STEP

WordPress管理画面の左サイドメニューの「外観」→「テーマファイルエディッター」を押します。

Rinker(リンカー)のデザインをカスタマイズする手順1
STEP

スタイルシート 「style.css」にCSSコードを貼り付け、「ファイルを更新」ボタンを押します。

Rinker(リンカー)のデザインをカスタマイズする手順2

style.cssを変更してブラウザで確認しても反映されない場合、キャッシュが残っている可能性があるのでキャッシュを削除してみてください。

CSSコードを設定する手順は以上になります。

まとめ

今回はRinkerのボタンをカスタマイズしたCSSコードを紹介しました。

色の設定を変えればボタンを好みの色で装飾することができるので参考にしてみてください。

ブログにおすすめのレンタルサーバー

WordPressでブログを簡単に始めることができるレンタルサーバーについて、下記の記事で紹介しています。お役に立てれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる