画像付きボトムバナー広告作成ツール

―― 見られるPRをもっとお手軽に ――

概要

あなたのサイト上に、プログラミング不要で画像付き「ボトムバナー広告（アンカー広告）」のウェジェットコード（HTML・JavaScript）を自動生成します。ボトムに固定された目を引く画像付きバナーを、誰でもコピペだけで簡単に埋め込み可能です。通常はアンカー広告に対応していないアフィリエイトリンクや、自作コンテンツなども効果的に宣伝できます。表示内容も自由にカスタマイズ可能。サイトの回遊率やクリック率を向上させ、収益アップを目指したい方に最適なツールです。 ※当サイトには広告及びプロモーションも含まれます。

使い方

1.各コンテンツURL、コンテンツ名、画像URL、自由記入欄を設定します。 2.全ての設定が完了したら、「ボトムバナー生成」でコード全文を生成します。 3.表示されたコードをコピーして、ご自身のブログやサイト上に貼りつけてください。これがボトムバナー表示になります。 4.最後に、CSSコード欄のスタイルもコピーして、ご自身のstyleタグまたはCSSコード上に追加すれば、バナーのスタイル設定も完了です。

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

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

<style>
                /* <![CDATA[ */
                /* 全体レイアウト */
                .affiliate-banner {
                    bottom: 0;
                    border: 1px solid #5592b7;
                    padding: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    max-width: 100%;
                    box-sizing: border-box;
                    position: fixed;
                    transition: bottom 0.5s ease;
                    background: rgba(255, 255, 255, 0.9);
                }
                
                .affiliate-title {
                    font-size: 1.2em;
                    font-weight: bold;
                    color: #2a7186;
                    margin: 0;
                    box-sizing: border-box;
                }
                
                .affiliate-description {
                    color: #666;
                    margin: 5px 0;
                    font-size: 1em;
                    box-sizing: border-box;
                }
                
                /* スマホレイアウト (画面幅600px以下) */
                @media (max-width: 600px) {
                    .affiliate-image-container {
                        display: none; /* スマホ時に画像を非表示 */
                    }
                
                    .affiliate-title a {
                        font-size: 1.1em;
                        color: #2a7186;
                        text-decoration: none;
                        box-sizing: border-box;
                    }
                
                    .affiliate-description {
                        font-size: 0.9em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 18em; /* 説明文を短縮して「...」を表示 */
                        box-sizing: border-box;
                    }
                }
                /*]]> */
                </style>

注意点

・使用ブラウザごとの動作制限で、正常に作動しない可能性があります。・無料サービスなため、Webサイト内に広告が表示されます。・PCでは画像付きですが、スマホ上だと画像表示が省かれます。

他のツール

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

ツール一覧

開発者兼運営:ハヤデビ

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

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