ブログに商品リンクを貼る際にAmazon・楽天・Yahoo!ショッピングのリンクをそれぞれ貼るのはすごく手間ですよね。
よくブログで見かけるのが「カエレバ」「Rinker（リンカー）」を使った3大ネットショッピングの商品リンクを一つにまとめたカード型リンクです。
実は、ASPの『もしもアフィリエイト』から「かんたんリンク」という同様のサービスが無料で提供されているのです。
- 「かんたんリンク」はどのようなもの？
- 「かんたんリンク」の使い方
- 「かんたんリンク」のデザイン変更
Contents
「かんたんリンク」はどのようなもの？
「かんたんリンク」はASPの『もしもアフィリエイト』が提供しているのサービスで『もしもアフィリエイト
』に登録さえすれば誰でも使用することができます。
「かんたんリンク」を使えばAmazon・楽天・Yahoo!ショッピングの3大ネットショッピングの商品リンクを一つにまとめたカード型リンクを作ることができます。
実際に作成してみると、このようなリンクを作ることができます。
使っているショッピングサイトは好みによって人それぞれなので、3つのサイトを一つのカードにまとめることができると成約にも大きく影響してきますね。
「かんたんリンク」のメリット
- 無料で使用可能
- 商品リンクの作成が簡単
- Amazon・楽天・Yahoo!ショッピングのリンクを同時に表示できる
- プラグインが必要ない
- 商品画像がスクロールする
「かんたんリンク」を使用する際に各ネットショッピングのアフィリエイトと提携する必要がありますが『もしもアフィリエイト』は審査の厳しいAmazonにも通りやすいメリットがあります。
「かんたんリンク」の使い方
カード型リンクの作成方法
Amazon・楽天・Yahoo!ショッピングと提携が済んだ状態という前提で説明させて頂きます。
『もしもアフィリエイト』のトップ画面より「かんたんリンク」に入ってもらいます。
「かんたんリンク」画面でキーワードを入れます。
キーワードに「アフィリエイト」を入れて試してみます。目的の商品が出てきたら商品の上でクリックして下さい。
これで商品リンクの出来上がりです！
下記に表示されたように、かんたんにリンクを作ることができます。
➀「かんたんリンク」はAmazonの商品名を元に作成される為、楽天やYahoo!ショッピングでは表示されないケースがありますのでこの時点で楽天・Yahooボタンをクリックしてチェックして下さい。
Amazonでは商品ページが出ますが楽天とYahoo!ショッピングでは商品検索ページが出ます。下記のような画面が出れば問題ありません。
➁最後にソースをブログにコピペして下さい。
こちらで「かんたんリンク」の作成から貼り付けは完了です。
楽天・Yahooで検索画面が出ない場合の対応方法
楽天やYahooで検索画面が出ないケースがあります。Amazonでの商品名が複雑になっている時に比較的、起きやすいようです。
商品が検索できないと商品が表示されませんので修正する必要があります。
商品名の頭に所にカーソルを持っていくと鉛筆マークが出てきますので、クリックすると商品名が変更可能となります。
①検索にかかりやすい商品名に変更します。
②HTMLソースをクリック（ソースが作成されます。）
楽天・Yahooボタンを押し商品検索ページが出ましたら問題ありません。
「かんたんリンク」のデザイン変更
次に「かんたんリンク」のデザイン変更を説明させて頂きます。
変更すると下記のようなデザインに変更できます。
①CSSによるカスタマイズは違反ではありませんが推奨はしていないので自己責任となります。
②CSSカスタマイズは『もしもアフィリエイト』のサポート対象外です。
③カスタマイズ前にバックアップを取ることをおすすめします。
④使用しているテーマ・PC環境などにより今後の機能変更・修正は、独自のCSSが適用されなくなる可能性があります。
CSSはネイネイさんの「ネイネイの喜怒哀楽」からお借りしています。今回紹介しているデザイン以外の物も紹介してあるので是非、お読み下さい。
追加CSSを編集します。(外観/カスタマイズ/追加CSSから変更できます。)
- WordPress 5.2.5
- テーマ：JIN
WordPressのダッシュボード→外観→カスタマイズ
追加CSSに入り下記のCSSをコピペして下さい。
公開をクリックしたら完了です。
/* ————————————- */
/* かんたんリンク カスタマイズ */
/* ————————————- */
/* ——— 外枠 ——— */
div.easyLink-box {
border:double #CCC !important; /* ２重線 */
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* — 商品リンク タイトル — */
p.easyLink-info-name a {
color: #3296d2 !important; /* 文字色 */
}
/* ——— ボタン色 ——— */
a.easyLink-info-btn-amazon {
background: #f6a306 !important; /* 背景色 */
border: 2px solid #f6a306 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #cf4944 !important; /* 背景色 */
border: 2px solid #cf4944 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #51a7e8 !important; /* 背景色 */
border: 2px solid #51a7e8 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* — マウスオーバー時のボタン色 — */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #51a7e8 !important; /* 文字色 */
}
/* — 最後のボタン下の空白を削除 — */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}
/* — PC以外の時の設定 — */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img {
height: 180px !important; /* 商品画像の大きさを調整 */
}
}
まとめ
「かんたんリンク」について説明させて頂きましたがサービスを提供している『もしもアフィリエイト』はサービス向上への社員の思いが強い会社です。不明点に関しては、たまに問合せをすることがありますがレスポンスも早く助かっています。
「かんたんリンク」は、物販のアフィリエイトを考えている特に初心者の方におすすめです。
