「保護中」のコンテンツは近日中に開放していきます

もしもアフィリエイトの新かんたんリンク使い方とCSSデザイン変更!

もしもの新かんたんリンク使い方とCSSデザイン変更方法
あなた

もしもアフィリエイトの「かんたんリンク」の使い方がよく分からない。デザイン変更もできるみたいだから、変更方法も知りたい!

こんな悩みを持つ方に、ぜひ読んでほしい記事です。もしもアフィリエイトを利用しているのに、かんたんリンクを活用しないのは非常にもったいない。デザインだけではなく、ユーザビリティーもアップするからです。

この記事で分かること
  • かんたんリンクの使い方
  • かんたんリンクのデザイン変更方法

かんたんリンクの活用で、きれいなカード型リンクが簡単に作れてクリック率もアップしやすくなります。ぜひ参考にしてみてください。

この記事を書いた人
とおる
  • ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。ブログ売却も含め1年で1ブログのみ8桁収益経験
  • 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
  • 趣味:筋トレ・食べ歩き・映画鑑賞など
目次

もしもアフィリエイトの新しいかんたんリンクが素晴らしい

とおる
もしもアフィリエイトの機能の一つである、かんたんリンクが新しくなって、デザイン性もユーザビリティもアップしました!
もしもアフィリエイトのかんたんリンク

もしもアフィリエイトの「かんたんリンク」は、提携できるAmazon・楽天・Yahoo!ショッピング(2019年4月現在)の3つのアフィリエイトリンクを、同時に表示できるという素晴らしい機能。以下、かんたんリンクの特徴です。

  • 慣れれば5分もかからず、商品検索からブログへの貼付けが完了する手軽さ
  • Amazonの画像や商品メインでアフィリエイトができる
  • 画像を何枚も見られ、商品画像を変更できる
  • デザインがきれいで見やすい
  • Amazon・楽天・Yahoo!ショッピングのリンクを同時に表示できる
  • レスポンシブ対応(スマホではボタンが縦に並ぶ)

とまあ、至れり尽くせりな機能です。その代わり、外部リンク(他のASP)は貼れないので、貼りたい方はカッテネというツールがオススメです。

あわせて読みたい
カッテネの使い方解説!もしも&バリューコマースリンクの貼り方! 商品紹介リンクで「カッテネ」を使ってみたいけど、使い方がよく分からない!具体的な導入方法が知りたい! こんな悩みを持つ方に、ぜひ読んでほしい記事です。 商品紹...

ということで、初心者でも簡単に作れる、かんたんリンクの使い方を解説していきます。

かんたんリンクの使い方

とおる
本当に簡単に作れて、導入できるのでサクッとやっていきましょう!

まずは、もしもアフィリエイトにログインしてから、かんたんリンクのページへ移動します。

事前に「Amazon or 楽天 or Yahoo!ショッピング」と提携しておく必要があります。

次に、楽天かAmazonで商品検索をして販売ページのURLをコピーするか、検索バーに商品のキーワードを入力します。

かんたんリンク使い方1

今回は例として「腹筋ローラー」というキーワードで検索してみます。

かんたんリンク使い方2

今回は1170円のローラーを選択したいので、商品の上でクリックします。

かんたんリンク使い方3

そうすると、はい出来上がり!!

かんたんリンク使い方4

スマホでは・・・

かんたんリンクスマホ

さらに、商品画像を変更したい場合は、左上の画像アイコンをクリックして

かんたんリンク使い方5

好きな画像をクリックすれば、変更できます。

かんたんリンク使い方6

画像の横の矢印アイコンをクリックすれば、別の画像も見ることができます。

かんたんリンク使い方7

完成したかんたんリンクをクリックすると、Amazonは商品ページが表示されますが

かんたんリンクAmazonページ

楽天とYahoo!ショッピングは、商品検索結果ページが表示されます。

かんたんリンク楽天ページ
かんたんリンクYahoo!ページ

これは、Amazonの商品名でそのまま自動的に検索してしまっているため、同じ商品名で登録されていないからです。

しかし、キーワードを拾って商品は表示されるので、良しとしておきましょう。

次に、ブログにレスポンシブタグを、head内に貼っていきますので、タグをコピーしてください。

かんたんリンクレスポンシブ設定

Simplicity2でのレスポンシブタグ設定

Simplicity2の場合は、外観→テーマエディター→header.insert.php内に貼り付けます。

かんたんリンクレスポンシブ設定1

右端のheader.insert.phpファイルの場所はここ。

かんたんリンクレスポンシブ設定2

必ず子テーマで編集して下さい。親テーマのままだとアップデートされたときにタグが消えてしまいます。

貼り付けたら、忘れずに下のファイルを更新をクリックします。

かんたんリンクレスポンシブ設定3

JINでのレスポンシブタグ設定

JINでは、HTMLタグ設定の【head内】に貼り付けるだけでOK。

かんたんリンクレスポンシブ設定4

貼り付けたら、忘れずに下の変更を保存をクリックします。

かんたんリンクレスポンシブ設定5

かんたんリンクのHTMLソースをブログに貼る

かんたんリンクページに戻り、HTMLソース下のHTMLソースを1行にする(WordPress対応)にチェックを入れて

かんたんリンク使い方9

HTMLソースをクリックして、コピーします。

かんたんリンク使い方10

WordPressのエディターにいき、テキストの方に貼り付ければ表示されます。

もしもアフィリエイトのかんたんリンク

これで、かんたんリンクの導入は完了です!

かんたんリンクのデザイン変更方法

とおる
ここからは必須ではないけど、かんたんリンクのボタンデザインをCSSで、簡単に変更する方法を解説します!

デフォルトのかんたんリンクでは、オレンジのボタンで統一されています。

もしもアフィリエイトのかんたんリンク

これを、下記のようなデザインに変更できます。

かんたんリンクCSSデザイン変更

カーソルをボタンの上に持っていくと、色が白くなります。

かんたんリンクCSSデザイン変更1
とおる
大した変更ではないですが、個人的にはこちらが好きです!

このCSSのは公式で推奨されているカスタマイズではありません。

ただ、違反ではないので、あくまで自己責任で変更をしてください。

お使いのテーマ等の環境や、今後のかんたんリンク仕様変更時に、今回のような独自のCSSが反映されない可能性もあることを、理解した上でお願いします。

変更はめっちゃ簡単です。テーマのカスタマイズ→追加CSS(Simplicity2とJIN同様)にいき

かんたんリンクCSSデザイン変更2

下記の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

記事をプレビュー等で見て、反映されていればOKです!

かんたんリンクCSSデザイン変更

まとめ

もしもアフィリエイトの新しくなった「かんたんリンク」は、本当に簡単にサクッとデザイン性とユーザビリティの高いカード型リンクが作れます。

Amazonユーザー、楽天ユーザー、Yahoo!ショッピングユーザーそれぞれに、一度でアプローチできるので、嬉しい機能です。

初心者の方でも簡単に、物販アフィリエイトを行えるのでかなりオススメです。

もしもの新かんたんリンク使い方とCSSデザイン変更方法

この記事が気に入ったら
フォローしてね!

役に立ったらシェアしてね!

コメント

コメント一覧 (2件)

  • こんにちは!

    ともと言います。

    もしもの簡単リンクで質問なのですが、現在テーマはストークを使っておりかんたんリンクを作成して貼るとなぜか、リンク内の文字が文字化けしてしまいます。

    自分なりに調べてみたのですが解決策が見つからず見出し2のh2タグを表示させると文字化けしてしまうのですが何かしら対応策ありましたら教えていただけませんでしょうか?

    • ともさん、お返事大変遅くなり申し訳ありません!

      文字化けですか・・・ストークでも不具合が起こるんですね!

      ちょっと、状況が分かりづらいので、その状態をスクショして見せてもらうことは可能でしょうか?

とも へ返信する コメントをキャンセル

目次