収益化

WordPressブログにAmazonアソシエイトを貼る方法【お洒落なカスタマイズもあり!】

 

悩む人
Amazonアソシエイトに登録して、WordPressにAmazonアソシエイトのリンクを貼る方法について知りたいです!また、Amazonアソシエイトのリンクをカード型にしてオシャレなデザインで商品を紹介したいです。

 

こんな悩みに答えます。

 

こんな方におすすめ

  • WordPressAmazonリンクを貼って商品を紹介してみたい方
  • Amazonアソシエイトリンクを貼るだけではなくオシャレにカスタマイズしてみたい方
  • WordPress以外でnoteにもAmazonアソシエイトを貼る方法

 

本記事の執筆者

WordPress(ワードプレス)を使って1年以上ブログ運営をしており、現在Web業界で7年ほど働いています。

 

WordPressでブログを始めたらAmazonのリンクを貼って商品を紹介してみたいと思うかもしれません。

 

先に表示の画面をお見せするとAmazonの商品を貼ると、以下のように「画像+テキスト(左)」「テキスト(右)」が表示させることができます。
KEI

 

 

本記事では、そんなAmazonアソシエイトに登録した後に、WordPressでリンクを貼る方法について紹介します。

 

また記事後半では、Amazonの商品リンクをオシャレに見せるカスタマイズ方法についても紹介しています。

 

 

上記のようなカスタマイズ方法をご紹介します。

 

Amazonアソシエイトに登録して、WordPressブログでリンクを貼ってみたい方はぜひ読み進めてください!

 

WordPressブログAmazonアソシエイトリンクを貼る方法

WordPressブログAmazonアソシエイトリンクを貼る方法

 

それではAmazonアソシエイトの登録方法からWordPressにリンクを貼る方法までをステップで紹介します。

 

step
1
Amazonアソシエイトに登録する

 

Amazonアソシエイトに登録がお済みでない方は、以下から登録しておきましょう!

 

>>Amzonアソシエイトに登録する

※クリック後、Amazonアソシエイトに飛びます、

 

Amazonアソシエイトの登録ができましたら商品リンクを取得していきます!

 

step
2
商品リンクを取得する

 

商品リンクを取得するには、ページ上にある『商品リンク商品リンク』をクリックします。

 

 

クリック後以下の画面になるので、赤ワクで囲ったところで紹介したい商品名を入力して「検索」ボタンを押します。

 

 

紹介したい商品がみつかりましたら「リンク作成」ボタンをクリックします。

 

 

以下の画面になるので、「3. この商品リンクのHTMLを取得する」エリアにあるURLをクリックして「選択する」ボタンをクリックします。

 

 

これで商品リンクの取得は完了です!ちなみに、Amazonの商品リンクの見せ方を変更するには、以下のボタンをクリックします。

 

 

  • テキストと画像
  • テキストのみ
  • 商品のみ

 

上記があり、お好みで商品リンクを選択できます。

 

その中でも「テキストと画像」の使い方を紹介します!
KEI

 

テキストと画像の使い方

 

テキストと画像」は名前の通り、テキストと画像をカスタマイズできますよ。

 

カスタマイズするには、画面の左側にある「1. リンクをカスタマイズする」でお好みのデザインにカスタマイズしていきます。
KEI

 

 

画面左側の「リンク先ページ」「背景のカラー」などを設定すると、画面右側にある「2. プレビュー」が切り替わりますのでプレビューをみながらデザイン調整していく感じです。

 

 

お好みのデザインができましたら、先ほどと同じように画面下のリンクHTMLをコピーして完了です!
KEI

 

step
3
WordPress(ワードプレス)に商品リンクを貼る

 

登録ができましたら、AmazonリンクをWordPressに貼っていきます。

 

WordPressの管理画面にいきまして、記事投稿画面を開いてコピーしたコードを貼ります。

 

WordPressで商品リンクを貼るには、「クラシックエディタ」「新しいエディタ(Gutenberg(グーテンベルク)」2つのやり方があるので、それぞれ順番に紹介します。
KEI

 

クラシックエディタの場合

クラシックエディタをお使いの方ですと、「テキスト」をクリックしてコピーしたHTMLを以下のように貼ります。

貼り付けができましたら、問題なく表示されているかプレビュー画面で確認しましょう。

 

ポイント

新しいエディタをお使いの方ですと、まずは画面左上にある「①:+(ブロック挿入ツールを切り替え)」をクリックします。

以下の画面のように、「②:カスタムHTML」を選択して「③:HTML」に切り替えます。

最後にコピーしたコードを貼り、問題なく表示されているかプレビュー画面で念のため確認します。

 

Amazonリンクをカスタマイズする方法

Amazonリンクをカスタマイズする方法

 

続いて、Amazonリンクをさらにオシャレに貼る方法を紹介します。

 

冒頭でも紹介しましたように、Amazonリンクはテキストや画像での表示以外に、以下のようにカード型のリンクも作成できます。

 

 

当ブログでは、カード型リンクでオシャレにAmazonアフィリエイトを貼る方法を紹介しています。

 

CSSを使って上記のようなデザインを作成できますが、用意されたコードをコピーして貼り付けるだけなので簡単に作成できちゃいますよ。

 

Amazonアフィリエイトのリンクをただ貼るだけではなく、おしゃれでクリックされやすいリンクを作成してみたい方は参考にしてみてください。

 

カードリンク型のデザインにしたことでオシャレに見せられるだけではなく、クリック率と成約率の向上が期待できますよ!
KEI

 

関連記事
『カエレバ』『ヨメレバ』『トマレバ』でカッコよくカスタマイズ!【アフィンガー】

続きを見る

 

WordPress以外でAmazonアソシエイトを貼る方法を紹介!

WordPress以外でAmazonアソシエイトを貼る方法を紹介!

 

最後に、WordPress以外でAmzonリンクを貼る方法を紹介します。

 

例えば、noteで記事を書いていて、記事内にAmzonリンクを置いて商品を紹介してみたい方にも使えます。
KEI

 

noteでAmazon商品リンクを紹介する場合は、以下のように表示されます。

 

 

自分でカスタマイズをすることなく、HTMLリンクを貼るだけでこんなオシャレなデザインが作れちゃいますよ。
KEI

 

当ブログでは、noteで貼るAmazonリンクを貼る方法も紹介しています。

 

WordPressブログ以外にnoteを運用していてAmazonの商品リンクを紹介してみた方は、以下よりご覧ください。

 

関連記事
noteでAmazonアフィリエイトリンクを貼る方法【2ステップ】

続きを見る

 

まとめ

 

いかがでしたか?今回は、WordPressブログでAmazonアソシエイトのリンクを貼る方法について紹介しました。

 

ブログを始めて収益化を目指そうと思った時に、Amazonアソシエイトに登録してリンクを貼るのはとても有効的です。

 

ブログ以外にもnoteを運用されている方も、今回紹介したやり方でリンクを貼ってみてください!

 

また、繰り返しになりますが、ブログ運営に慣れてきたりおしゃれなリンクで商品を紹介してみた方は、カード型のリンクが役に立ちます。

 

先述した方法以外にも、カード型リンクで商品を紹介する設定方法がいくつかあります。

 

当ブログで、その設定方法について記事で紹介していますので、興味のある方はご覧ください。
KEI

 

 

色んな方法がありますが、運用しやすい方法で商品デザインのカスタマイズを試してみてくださいね。

 

今回は以上です。

 

ここまで読んでいただきありがとうございました。

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-収益化