もしもアフィリエイトの「かんたんリンク」の使い方がよく分からない。デザイン変更もできるみたいだから、変更方法も知りたい!
こんな悩みを持つ方に、ぜひ読んでほしい記事です。もしもアフィリエイトを利用しているのに、かんたんリンクを活用しないのは非常にもったいない。デザインだけではなく、ユーザビリティーもアップするからです。
- かんたんリンクの使い方
- かんたんリンクのデザイン変更方法
かんたんリンクの活用で、きれいなカード型リンクが簡単に作れてクリック率もアップしやすくなります。ぜひ参考にしてみてください。
- ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
- 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味:筋トレ・食べ歩き・映画鑑賞など
もしもアフィリエイトの新しいかんたんリンクが素晴らしい
もしもアフィリエイトの「かんたんリンク」は、提携できるAmazon・楽天・Yahoo!ショッピング(2019年4月現在)の3つのアフィリエイトリンクを、同時に表示できるという素晴らしい機能。以下、かんたんリンクの特徴です。
- 慣れれば5分もかからず、商品検索からブログへの貼付けが完了する手軽さ
- Amazonの画像や商品メインでアフィリエイトができる
- 画像を何枚も見られ、商品画像を変更できる
- デザインがきれいで見やすい
- Amazon・楽天・Yahoo!ショッピングのリンクを同時に表示できる
- レスポンシブ対応(スマホではボタンが縦に並ぶ)
とまあ、至れり尽くせりな機能です。その代わり、外部リンク(他のASP)は貼れないので、貼りたい方はカッテネというツールがオススメです。
ということで、初心者でも簡単に作れる、かんたんリンクの使い方を解説していきます。
かんたんリンクの使い方
まずは、もしもアフィリエイトにログインしてから、かんたんリンクのページへ移動します。
次に、楽天かAmazonで商品検索をして販売ページのURLをコピーするか、検索バーに商品のキーワードを入力します。
今回は例として「腹筋ローラー」というキーワードで検索してみます。
今回は1170円のローラーを選択したいので、商品の上でクリックします。
そうすると、はい出来上がり!!
スマホでは・・・
さらに、商品画像を変更したい場合は、左上の画像アイコンをクリックして
好きな画像をクリックすれば、変更できます。
画像の横の矢印アイコンをクリックすれば、別の画像も見ることができます。
完成したかんたんリンクをクリックすると、Amazonは商品ページが表示されますが
楽天とYahoo!ショッピングは、商品検索結果ページが表示されます。
これは、Amazonの商品名でそのまま自動的に検索してしまっているため、同じ商品名で登録されていないからです。
しかし、キーワードを拾って商品は表示されるので、良しとしておきましょう。
次に、ブログにレスポンシブタグを、head内に貼っていきますので、タグをコピーしてください。
Simplicity2でのレスポンシブタグ設定
Simplicity2の場合は、外観→テーマエディター→header.insert.php内に貼り付けます。
右端のheader.insert.phpファイルの場所はここ。
貼り付けたら、忘れずに下のファイルを更新をクリックします。
JINでのレスポンシブタグ設定
JINでは、HTMLタグ設定の【head内】に貼り付けるだけでOK。
貼り付けたら、忘れずに下の変更を保存をクリックします。
かんたんリンクのHTMLソースをブログに貼る
かんたんリンクページに戻り、HTMLソース下のHTMLソースを1行にする(WordPress対応)にチェックを入れて
HTMLソースをクリックして、コピーします。
WordPressのエディターにいき、テキストの方に貼り付ければ表示されます。
これで、かんたんリンクの導入は完了です!
かんたんリンクのデザイン変更方法
デフォルトのかんたんリンクでは、オレンジのボタンで統一されています。
これを、下記のようなデザインに変更できます。
カーソルをボタンの上に持っていくと、色が白くなります。
このCSSのは公式で推奨されているカスタマイズではありません。
ただ、違反ではないので、あくまで自己責任で変更をしてください。
お使いのテーマ等の環境や、今後のかんたんリンク仕様変更時に、今回のような独自のCSSが反映されない可能性もあることを、理解した上でお願いします。
変更はめっちゃ簡単です。テーマのカスタマイズ→追加CSS(Simplicity2とJIN同様)にいき
下記のCSSを貼り付けて公開します。CSSは、ネイネイさんのブログからお借りしました!
/* ------------------------------------- */
/* かんたんリンク カスタマイズ */
/* ------------------------------------- */
/* --------- 外枠 --------- */
div.easyLink-box {
border:double #CCC !important; /* 2重線 */
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; /* 商品画像の大きさを調整 */
}
}
記事をプレビュー等で見て、反映されていればOKです!
まとめ
もしもアフィリエイトの新しくなった「かんたんリンク」は、本当に簡単にサクッとデザイン性とユーザビリティの高いカード型リンクが作れます。
Amazonユーザー、楽天ユーザー、Yahoo!ショッピングユーザーそれぞれに、一度でアプローチできるので、嬉しい機能です。
初心者の方でも簡単に、物販アフィリエイトを行えるのでかなりオススメです。
コメント
コメント一覧 (2件)
こんにちは!
ともと言います。
もしもの簡単リンクで質問なのですが、現在テーマはストークを使っておりかんたんリンクを作成して貼るとなぜか、リンク内の文字が文字化けしてしまいます。
自分なりに調べてみたのですが解決策が見つからず見出し2のh2タグを表示させると文字化けしてしまうのですが何かしら対応策ありましたら教えていただけませんでしょうか?
ともさん、お返事大変遅くなり申し訳ありません!
文字化けですか・・・ストークでも不具合が起こるんですね!
ちょっと、状況が分かりづらいので、その状態をスクショして見せてもらうことは可能でしょうか?