もしもアフィリエイトでかんたんリンクを使う!小さく、カスタマイズする方法も紹介いたします!

もしもアフィリエイトでかんたんリンクを使う!小さく、カスタマイズする方法も紹介いたします!

はじめに

こんにちは!

ブログの記事の中で、楽天市場やAmazonのアフィリエイトのリンク先を貼り、

商品紹介をしたい時がしばしばあるかと思います。

私も他のブログなどを読んでいて、下記のように商品をかっこよく紹介したい!

実はこの商品紹介リンクは非常に簡単につくることができます!

その方法は もしもアフィリエイトのかんたんリンク

を利用していただくだけです!今回はもしもアフィリエイトのかんたんリンクを使った、アフィエイトタグを簡単に作る方法から、

完成したリンクを小さく表示させる方法、自由にCSSをを編集してかんたんリンクをカスタマイズする方法を紹介いたします!

この記事で紹介する内容

1. もしもアフィリエイトのかんたんリンクの使い方

2. かんたんリンクを小さく表示する方法

3. かんたんリンクのCSSを編集してカスタマイズする方法

もしもアフィリエイトのメリット、登録方法に関しては下記記事で紹介しております!

もしもアフィリエイトのメリット、完全無料登録方法を紹介!

 

もしもアフィリエイトのかんたんリンクの使い方!

まず最初にアフィリエイトのかんたんリンクの使い方を紹介いたします!

まだ登録されていない方はまずは登録をしましょう。

注意

かんたんリンク機能は、もしもアフィリエイトへの登録と楽天もしくはAmazonとの提携が完了していないと使えません。提携方法は下記で紹介しております。

楽天やAmazonの提携方法

 

かんたんリンクの使い方

1.もしもアフィリエイトのTOPページから”かんたんリンク”をクリック

moshimo-affiliate-kantan-link-customize1

2. 商品URLを確定する【2つ方法があります!】

つぎにどの商品を紹介するのかを設定いたします。

商品を決める方法は2つあります!①の方法で出したい商品がうまく表示されない場合は②の方法を試してみましょう!

①商品キーワードから探す

 探したい商品のキーワードをクリックしましょう。

つぎに検索窓の下に商品一覧がでてきますので、”商品画像”をクリックしましょう。

moshimo-affiliate-kantan-link-customize2

次にスクロールしていただき、”HTMLソースを1行にする(WordPress対応)”に必ずチェックマークをつけましょう。

次にHTMLをクリックしていただくと、自動で全選択になりますのでコピーしていただき、貼りたいブログに直接貼り付けをしていただくことで

かんたんリンクの完成です!

moshimo-affiliate-kantan-link-customize3

②直接商品URLを記入する方法

こちらはすでに紹介したい商品が決まっている場合に使う方法になります。もし①で紹介したい商品が見つからない場合はこちらの方法を利用しましょう!

まずは、楽天もしくはAmazonで商品検索していただきリンク先URLをコピーしましょう。

実際の画面を確認する。

moshimo-affiliate-kantan-link-customize4

つぎにもしもアフィリエイトの簡単リンクのキーワードを入力する欄に直接商品URLをコピー&ペーストをしましょう。

そして先程と同じように、HTMLを一行にするにチェックマークをつけていただきソースコードをコピー&ワードプレスのブログに貼り付けすることで完成です!

moshimo-affiliate-kantan-link-customize5

 

もしもアフィリエイトのかんたんリンクを小さく表示する方法

次にかんたんリンクを使っていると、スマホでリンクをみるとかんたんリンクがでかい・・・!という悩みが生まれきます。

moshimo-affiliate-kantan-link-customize6

かんたんリンクの表示を小さくカスタマイズする方法を紹介いたします!

1. かんたんリンクの商品名を編集してなんとか小さくする方法

上記の画像をみていただくと、商品名が長いので画像が縦長に大きくなっています。つまり商品名を短くすることで少しは幅を小さくすることができます。

かんたんリンクの商品名のテキストを編集する方法は、プレビューで表示されている商品名にマウスオーバーをしていただくと、ペンマークが表示されますので、そちらをクリックしてテキストを編集することができます。

moshimo-affiliate-kantan-link-customize7

実際に、商品名を短くすると下記の様になります。(スマホ表示)

moshimo-affiliate-kantan-link-customize8

小さくなりましたね!次にもう一つの方法を紹介いたします。

2. もしもアフィリエイト かんたんリンクを小さくカスタマイズ!

つぎにCSSを直接編集して、小さくする方法になります。

CSSを編集?!むずかしそう・・・と思われる方もいるかと思いますが、非常に簡単です!すばらしいカスタマイズされているCSSをすでに公開している方がいますので、そちらをブログのCSSに追加するだけで完成です!

CSSをブログに追加する方法、編集する方法はこちら

下記CSSをコピーしてWordpressのテーマCSSに追加をしましょう。

Earn LIFEさんの素晴らしいCSSに少し変更を加えさせていただきました^^

実際に追加していただくと,下記のようなデザインになります!だいぶスッキリしましたね!

moshimo-affiliate-kantan-link-customize9

 

もしもアフィリエイトのかんたんリンクのCSSを自由にカスタマイズする方法

次に、自分仕様にCSSをカスタマイズしたいという方向けの記事になります!

ここで紹介する変更できる要素は、”画像サイズ”、”ボタンの色”、”テキストサイズ”、”枠線のデザイン”になります!

moshimo-affiliate-kantan-link-customize10

上記該当箇所のCSSをカスタマイズすることでかんたんリンクのデザイン、サイズ、枠線などを編集することができます!ちなみに上記はプラグラミングでよく使うATOMというエディターを使っております!

プログラミングのエディターに興味がある方は下記記事をご参考ください!

プログラミングエディーター無料のATOMを紹介!

最後に

いかがでしたでしょうか?今回はワードプレスでアフィリエイトをタグを作成する便利なもしもアフィリエイトのかんたんリンクの使い方、小さくカスタマイズする方法、CSSを編集する方法を紹介させていただきました。

他にも、もしもアフィリエイト×サーチコンソールの連携など別記事でも紹介しております!

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに2. TechAcademyとは?2.1. 運営会社2.2. TechAcade […]

 


お豆ログを購読!
ブログ更新通知と今日のおまめいげんをお送りいたします
おまめろぐを少しでも応援してくれる方は
フォローしていただけると嬉しいです^^

Twitterフォローはこちらから!

アフィリエイトカテゴリの最新記事