コピペでOK！画像をランダムで表示するJavascriptのコード

今日は中古ドメインとはちょっと違うお勉強をします。
各記事の最下部にバナーが2つ置いてあるの気づいてますか？

このバナー、実は6種類くらいの設定したバナーからランダムで2つ出るようにしているのです。
記事の最下部にアフィリエイト用のバナーを設置している人がいると思いますが、今回はそのバナーを複数枚設定してランダムに指定枚数表示する方法を紹介するよ。

コードのコピペだけでも作れます。

JavaScriptで毎回ランダムに画像を切り替えるとは？

まずはHTMLコードに「ちくわブログ」を例にすると記事の最下部にtableタグでバナーを2つ表示しています。

⬇⬇この部分です⬇⬇

See the Pen
Untitled by Chikuwa (@chikuwa-blog)
on CodePen.

ただ、実際には以下のようなコードになっています。

See the Pen
Untitled by Chikuwa (@chikuwa-blog)
on CodePen.

たくさん書いてあるね。

ページを変えるたびにバナーが変わったり、更新でバナーが変わるんだよ。

なんか見た目的に新鮮で良いね。
どうやるの？

それではJavascriptのコードを見ていきましょう。
ちなみに上記と同じ方法で見せたいならそのままコピペで行けます。

以下のコードを「テーマファイルエディター」のjavascript.jsに書くだけだよ。

See the Pen
Untitled by Chikuwa (@chikuwa-blog)
on CodePen.

これをコピペして保存すれば終わりです。

ちなみに

See the Pen
Untitled by Chikuwa (@chikuwa-blog)
on CodePen.

ここの「2」と書かれている数値を変更すればバナーの表示枚数を変更できます。
例えば3枚表示したければ「3」と入力すればOKです。

ものすごく簡単に説明すると

1. [table]の中の[td]をdisplay:noneで全て非表示にします
2. arrという変数にすべてのデータを格納します
3. javascriptにランダムで選んでもらうように指示を出します
4. 何個かと言うと、今回は2つです。表示したい数をランダムに個数分引いてください。
5. 引いたランダムな2つのコードを[td]タグの中に格納してください

という内容です。
これはTableに限らず、様々なコードで応用できます。
背景画像とかでも使えそうですよね。

このJavascriptをベースにクラス名や出力先コードを書き換えるだけで様々な見せ方に応用できます。

ぜひやってみてくださいね♪
ランダムなので、もちろん変わらない場合もあります。その場合は更新したり別ページで確認してみてくださいね。

エラーかどうかわからないもんね。

そうだね。更新してみるのがいちばん簡単な確認方法だと思う

今日は短いけど、コードのご紹介でした。
提携先もまだそれほどないので、もう少し増えたら、サイドカラムのバナーにも適用しようと思ってます★

なんて方はぜひ挑戦してみてくださいね。

⬇このバナーに対して適用しています。更新を押したり別ページに行くと他のバナーに変わってると思います。