ECサイトやアフィリエイトサイトを運営していると「ユーザーが訪問する度に違うバナーを表示させたい」というような場面があるかと思います。
アプローチの方法はいくつかあると思いますが、今回は最もシンプルな仕組みで使い勝手の良い方法をご紹介します。
ワードプレスの固定ページや投稿ページに、リロードする度に画像が変わるバナーを直接設置できますよ。
結果の確認方法。
Web上に表示させると、以下のように見えます。
何度か画面をリロードして表示が変化することを確認してみてください。
HTML
<ul id="addbanner"></ul>
HTMLはたったの1行。
idの名称は任意で問題ありません。上記では「addbanner」としている部分です。
javascript
<script>
let list = [
'<li><a rel="nofollow" href="リンク①" target="_blank"><img src="画像①"></a></li>',
'<li><a rel="nofollow" href="リンク②" target="_blank"><img src="画像②"></a></li>',
'<li><a rel="nofollow" href="リンク③" target="_blank"><img src="画像③"></a></li>',
'<li><a rel="nofollow" href="リンク④" target="_blank"><img src="画像④"></a></li>',
];
let listNum = list.length;
let randomNum = Math.floor(Math.random() * listNum);
let randomList = list[randomNum];
document.getElementById("addbanner").innerHTML = randomList;
</script>
まず「let list」の部分に表示させたいバナーの画像や、とび先のリンクを配列として格納します。
上記では4つのバナーをリストにしていますが、任意の数に増減が可能です。
また、数を変化させても他の部分をいじる必要がないシンプルな設計です。
次に「let listNum」の部分でリストの要素数を取得します。
「let randomNum」はバナーをランダムに表示させるための内容です。リロードする度に0からリストの要素数-1までの整数をランダムに生成しています。
「let randomList」は「let randomNum」で生成された整数に対応するリストの要素を取得しています。
最後の行では「randomList」で取得した要素を<ul id=”addbanner”>に挿入しています。
まとめ
以上がリロードする度に画像が変わるバナーを設置する方法になりますが、いかがでしたでしょうか。
特にECサイトなどではよく見る表現ですが、上記は数ある方法の中でも特に扱いやすいシンプルな形かと思います。
バナーの他にもサイト訪問の度に絵変わりするヒーロー画像とか、いろいろな用途に使えると思いますので、知識として頭の片隅に置いておくと良いかもしれません。
この記事がどなたかのお役に立てたら幸いです。
