無料アフィリエイトバナー作成ツールの使い方|Amazonアソシエイト向けブログ埋め込みHTML・CSSコード生成

記事サムネイル

目次

1. はじめに 2. 利用方法 3. ツール使い方 4. まとめ

※本記事はPRも含みます

はじめに

アフィリエイト商品を紹介したいものの、バナー広告の作成やブログへ貼り付けるコードの用意に手間取っていませんか? そこで今回ご紹介するのは、「アフィリエイトバナー作成ツール」です。

アフィリエイトバナー作成ツールを利用

アソシエイトURL、商品名、商品画像URL、紹介文を入力するだけで、ブログやWebサイトに配置できるHTML・CSSコードを生成できます。 Amazonアソシエイトなどのアフィリエイト向けバナー広告・PRウィジェットを、ブラウザから無料で作成できるWebツールです。 本記事では、入力からコード生成、ブログやWebサイトへの埋め込みまで解説していきます。

【こんな方におすすめ】 ・アフィリエイト商品を見やすく紹介したい方 ・HTMLとCSSのコードをまとめて用意したい方 ・ブラウザ上で無料のバナー作成ツールを使いたい方

利用方法

1.公式ページへアクセス

まずは、アフィリエイトバナー作成ツールのページをブラウザで開きます。

アフィリエイトバナー作成ツールを利用

ページ内には概要、使い方、入力フォーム、コード出力欄、注意点が順番に用意されています。 入力する情報はあらかじめ用意します。 必要なのは、PR対象のアソシエイトURL、商品名、商品画像URL、自由記入欄に入力する短い概要や出品者名などです。 商品画像URLは、バナー内に表示する画像を指定するために使います。

2.初期設定と利用

このツールでは、サイト上の入力欄へ商品情報を設定して、そのままコード生成へ進みます。 アカウント登録や専用ソフトの準備を解説するページではないため、サービスページを開いて必要な情報を入力するところから始められます。 無料で利用できますが、利用先のブログやWebサイトがHTMLの埋め込みに対応していること、さらにCSSを追加するためにhead要素を編集できることを確認しておくと安心です。

【注意点】 利用先のサイトがHTML埋め込みに対応していない場合、生成コードを配置できません。 また、表示を整えるにはCSSコードを利用先のhead要素内へ追加する必要があります。 ただし、使用ブラウザによって正常に動作しない可能性があることと、無料サービスのためWebサイト内に広告が表示されます。

ツール使い方

1.必要情報を入力

記事参考画像

最初に紹介するのは、バナーに表示する情報を設定する機能です。 フォームの「アソシエイトURL」欄には、PR対象の商品やサービスへリンクするURLを入力します。 続いて「商品名」欄へ表示したい名称、「商品画像URL」欄へバナー画像として使う画像のURLを入力し、「自由記入欄」には短い概要や出品者名などを記入します。 入力した情報は、生成されるバナーのリンク先、見出し、画像、説明文に対応します。 URLを入力する欄と文字を入力する欄を取り違えないようにし、商品名や紹介文は、実際に紹介する内容と一致する表現にしておくと、掲載後の確認もしやすくなります。

2.コード生成を実行

次に紹介するのは、入力した商品情報からコードを作る機能です。 必要な項目をすべて設定したら、「コード生成」ボタンを押します。 ページの出力欄に、サイトやブログへ配置する完成コードと、表示スタイルを設定するCSSコードが生成されます。

3.完成コードコピーと埋め込み

記事参考画像

その次に行うのは、生成された完成コードの利用です。 「完成コード」の出力欄に表示されたコードを「コピー」ボタンで取得し、HTMLを埋め込めるブログやWebサイトの配置したい場所へ貼り付けます。

AIプロンプト工房

☝収益・実用的プロンプト集

これにより、商品画像、商品名、紹介文、リンクを含むアフィリエイト用ウィジェットとして表示できます。 貼り付け先の編集画面が、HTMLコードの直接入力に対応しているかを先に確認してください。 通常の本文入力欄へそのまま貼り付けるのではなく、HTMLを扱える編集モードや埋め込み機能を使う必要がある場合があります。

4.CSSコードコピーと追加

記事参考画像

最後に紹介するのは、バナーの見た目を整えるCSSコードの設定です。 「CSSコード」の出力欄に表示された内容を、隣の「コピー」ボタンで取得します。 その後、利用先のブログやWebサイトでhead要素を編集できる場所を開き、案内に沿ってCSSコードを追加します。 完成コードだけを貼り付けると、想定されたレイアウトや表示スタイルにならない場合があります。 HTMLコードの設置とCSSコードの追加を両方行い、PCとスマホの表示、リンク先、画像の表示、紹介文の見え方を確認してから公開しましょう。

広告画像

PR

まとめ

いかがでしたか? アフィリエイトバナー作成ツールは、商品情報を入力してHTMLコードとCSSコードを生成し、ブログやWebサイトへ配置するためのブラウザ完結型Webツールです。

1.アソシエイトURL、商品名、商品画像URL、紹介文を入力する 2.コード生成を実行し、完成コードとCSSコードをそれぞれコピーする 3.HTMLコードをページへ配置し、CSSコードをhead要素へ追加して表示を確認する

利用先がHTML埋め込みとhead要素の編集に対応しているかを確認したうえで、紹介したい商品情報を準備するところから始めてみてください。

アフィリエイトバナー作成ツールを利用

他の記事

AIツール・開発・ビジネス関連の記事を取り扱っています。

全記事一覧 ←前の記事 次の記事→

運営サービス

本サイトでは、便利ウェブツールから素材配布サイト、個人開発ゲームまで幅広く運営しております。

サービス一覧

いいなと思ったら応援

以下の方法で応援を受け付けております。

noteメンシ:ゲーム開発支援所に加入
ハヤデビのロゴ

著者兼運営:ハヤデビ

長きにわたりゲームやアプリの開発・動画編集・ブログ運営等を続けている個人クリエイター

X(旧Twitter):公式アカウント