ブログで稼ぐ

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

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

どうも、とおる(@toru_fukulog)です。

今回は、新しくなったもしもアフィリエイトの機能「かんたんリンク」の使い方と、デザイン変更について解説します!

デザインも洗練されて、カエレバのようなカード型リンクが、サクッと作れるのでスーパーおすすめです!

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

 

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

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

ふくろー
ふくろー
2019年3月からデザインが新しくなり、さらに見やすく、使いやすくなったよ!

 

以下、かんたんリンクの特徴です。

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

とまあ、至れり尽くせりな機能です。

 

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

カッテネの使い方
カッテネの使い方解説!もしも&バリューコマースリンクの貼り方!今回は、商品紹介リンクとして有名な、カエレバやRinkerの代わりになる便利なツールである「カッテネ」について、使い方を解説していきます!もしもアフィリエイトやバリューコマースなど、各ASPのリンクも表示できますし、AmazonのPA-APIの影響を受けないので、Amazonメインでアフィリエイトしたい方必見です!...

 

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

 

かんたんリンクの使い方

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

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

事前に、Amazonか楽天か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内に貼り付けたら、公開をクリックして完了です。

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

 

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

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

 

まとめ

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

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

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

ABOUT ME
とおる
人生を面白・可笑しく生きてます。 月間最高150万PV超え・1日16万PV超え 達成。日給8万円超え・月収60万超え達成。1ブログ770万円で売却成功。簡単なWordPressカスタマイズや画像制作、SEOライティング等を活かして副業系・求人系・投資系のライティング経験もあり。性格は温厚でかなりのマイペース。嫌なことは寝たら忘れるタイプ。食べること・筋トレ、神社など古き良き建物好き。詳細なプロフィールはこちら
ブログノウハウを無料でプレゼント中!

0から数ヶ月で月間150万PV、月収60万円超、日給8万円達成し、770万円で売却に成功したブログの作り方や、稼ぐために必要なマインドなど全て手に入れて、あなたの人生を面白・可笑しくしていきましょう!

 

POSTED COMMENT

  1. とも より:

    こんにちは!

    ともと言います。

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

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

    • 高木とおる より:

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

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

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

COMMENT

メールアドレスが公開されることはありません。