ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【Manablog Copy】物販用アフィリエイトプラグインの導入

プラグイン実装

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、アフィリエイトに便利な物販商品を紹介するためのプラグインの導入方法を紹介します。

マナブログコピーに物販用プラグイン『Rinker』を導入する方法

アフィリエイト用の物販プラグインと言えば、Rinkerが有名です。
シンプルで心地よいデザインなので、マナブログコピーとの相性も良いです。

公式 商品リンク管理プラグインRinker(リンカー)

正式まずは、BOOTHよりプラグイン『Rinker』をダウンロードします。(Rinkerは無料で使用できます)



ダウンロードしたらワードプレス管理画面にアクセスします。
ダウンロードファイルをアップしましょう。

管理画面プラグイン新規追加yyi-rinker-1.5.7.zipを選択



商品リンクというボタンが追加されました。

物販用プラグイン『Rinker』の設定

Rinkerの設定方法は以下です。

※事前にAmazonアソシエイト楽天アフィリエイトへの申請と登録が必要です。
もしもアフィリエイトで一括管理も可能なので合わせて登録をおすすめします。
※ヤフーショッピングは最初は必要ないかなと思います。

Amazonアソシエイトの設定

Amazonアソシエイトの管理画面にログインします。
管理画面ツールProduct Advertising APIをクリックします。



アクセスキーとシークレットキーを入手します。
詳しい解説は、こちらのサイトをご覧ください。

参考AmazonアソシエイトのアクセスキーIDとシークレットキー(シークレットアクセスキー)を取得する方法



Rinkerの設定は管理画面設定Rinkerを選択します。



AmazonのアクセスキーID、シークレットキー、トラッキングIDを入力します。

楽天アフィリエイトの設定

楽天アフィリエイトの設定に必要なIDを取得します。
アフィリエイトIDの確認ページへアクセスします。

IDをコピーします



Rinkerの設定画面でIDを入力します。



最後に変更を保存をクリックします。

物販用プラグイン『Rinker』の使い方

管理画面商品リンク新規追加をクリックします。



商品情報を取得をクリック。



楽天から商品検索を選択します。
検索窓に紹介したい商品を入力して検索します。
検索された商品の商品リンクを追加をクリックします。



YahooのリンクはアフィリエイトしないならカットしてもOKです。
(カットするとボタンが非表示になります)



商品名が長い場合は、任意で調整しましょう。
公開ボタンを押すと登録完了です。

Rinkerで登録した商品を記事で紹介する

登録した商品リンクを記事に埋め込みます。
管理画面商品リンクショートコードをコピーします。



投稿記事の入力画面のブロックボタンをクリック。
カスタムHTMLを選択します。



商品リンクを貼り付けます。



プレビューするとこんな感じで商品リンクを導入できました。
ただ、横幅が100%状態になるので、少しCSSを修正します。



CSSの追加は、カスタマイザー追加CSSで設定します。


/*-------------------------
  Rinker カスタマイズ 
-------------------------*/

 
/* 外枠 2本線 */
div.yyi-rinker-contents {
	border: double #dbdbdb;
	width:90%;
	margin-left:5%;
	
}
 
/* 外部リンクマーク削除 */
div.yyi-rinker-contents a[target="_blank"]::after {
	content: none;
}
 
/* 商品リンクタイトル マウスオーバー時 色変化 */
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
	color: #729ad6;
}
 
/* 商品リンクボタン マウスオーバー時 色反転 */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
	background: #f6a306;
	border: 1px solid #f6a306;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
	color: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {
	background: #fff;
	color: #f6a306;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
	background: #cf4944;
	border: 1px solid #cf4944;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {
	color: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover {
	background: #fff;
	color: #cf4944;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
	background: #51a7e8;
	border: 1px solid #51a7e8;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a {
	color: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
	background: #fff;
	color: #51a7e8;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
	opacity: 1;
}
 
/* PC・タブレット・スマホ レイアウト調整 */
@media only screen and (min-width: 1166px) {
div.yyi-rinker-contents ul.yyi-rinker-links {
	justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 40%;
	margin: 0.7% 0.7%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
	padding: 0 0.5px;
	text-align: center;
}
}
@media screen and (max-width: 768px) {
div.yyi-rinker-contents div.yyi-rinker-box {
	display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
	width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
	text-align: center;
	width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
	justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 45%;
	margin: 0.7% 0.7%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
	padding: 0 0.5px;
}
}
@media screen and (max-width: 480px) {
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 99%;
	margin: 0.7% 0.7%;
}
}


真ん中に来るようになりました。見た目も若干変更しました。

画像提供:Macrovector – jp.freepik.com によって作成された food ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定