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

概要

アソシエイトURL、商品名、商品画像URL、紹介文を入力するだけで、Amazonアソシエイトや各種アフィリエイト向けの横長バナー広告・PRウィジェットを無料作成できるWebツールです。ブログやWebサイトへ貼り付けられるHTMLコードとCSSコードを自動生成し、PC・スマホ対応のレスポンシブな広告表示を手軽に実現できます。専用ソフト不要でブラウザから利用可能です。 ※本ツールには広告及びPRも含まれます。

使い方

1.PR対象のアソシエイトURL(アフィリエイトやサービス等)、商品名、商品画像URL(バナーアイコン)、自由記入欄(短い一文の概要や出品者名等)をそれぞれ入力して設定します。 2.全ての設定が完了したら、「コード生成」でコード全文を生成します。 3.表示されたコードをコピーして、HTML埋め込み可能なご自身のブログや、サイト上に貼りつけて埋め込みます。これがウィジェットになります。 4.CSSコードもコピーして、ご自身のブログや、サイト上のheadタグ内に張り付けてスタイルを追加してください。これで埋め込みと表示まで完了です。

完成コード:(サイトやブログページ等でご自由に配置してください)

CSSコード:(ヘッダー要素内に必ず加えてください)

<style>
                /* <![CDATA[ */
                /* 全体レイアウト */
                .affiliate-banner2 {
                    border: 1px solid #5592b7;
                    padding: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    max-width: 100%;
                    box-sizing: border-box;
                    background: rgba(255, 255, 255, 0.9);
                }

                .affiliate-title2 {
                    font-size: 1.2em;
                    font-weight: bold;
                    color: #2a7186;
                    margin: 0;
                    box-sizing: border-box;
                }

                .affiliate-description2 {
                    color: #666;
                    margin: 5px 0;
                    font-size: 1em;
                    box-sizing: border-box;
                }

                /* スマホレイアウト (画面幅600px以下) */
                @media (max-width: 600px) {
                    .affiliate-image-container2 {
                        display: none; /* スマホ時に画像を非表示 */
                    }

                    .affiliate-title2 a {
                        font-size: 1.1em;
                        color: #2a7186;
                        text-decoration: none;
                        box-sizing: border-box;
                    }

                    .affiliate-description2 {
                        font-size: 0.9em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 18em; /* 説明文を短縮して「...」を表示 */
                        box-sizing: border-box;
                    }
                }
                /*]]> */
                </style>

注意点

・使用ブラウザごとの動作制限で、正常に作動しない可能性があります。・無料サービスなため、Webサイト内に広告が表示されます。・生成したコードを貼り付けるには、利用先のブログやWebサイトが、HTML埋め込みに対応している必要があります。・完全な想定スタイルにはCSSコードのスタイルも欠かせないため、利用先のブログやWebサイトが、headタグ内の操作に対応している必要があります。

他のツールサービス

本サイトでは、他にも暮らしや作業をサポートする様々なウェブツールサービスを運営しております。

サービス一覧

開発者兼運営:ハヤデビ

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

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