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