2025年11月3日 / 最終更新日 : 2025年11月4日対馬俊彦 WordPress

並び順をランダムに表示するバナーの作り方

JavaScript を使う方法とノーコードで作る方法を紹介しています。

ウェブページに複数のバナー（広告）を並べて設置するとき、位置による不平等が起きないように、ページを読み込むたびにバナーの並び順をランダムに変えるやり方を紹介します。

カスタマイズ前のバナー

グリッドブロックに6個のバナー画像を入れてあります。

並び順をランダムにしたバナー（JavaScript で並べ替え）

カスタマイズ手順

グリッドブロックに追加 CSS クラス random-banners を指定して、以下の JavaScript を追加してあります。

document.addEventListener('DOMContentLoaded', function() {
  const banners = document.querySelectorAll('.random-banners');

  banners.forEach(banner => {

    const items = Array.from(banner.children);

    for (let i = items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [items[i], items[j]] = [items[j], items[i]];
    }

    items.forEach(item => banner.appendChild(item));

  });
});

先頭の3つだけを表示する

以下の CSS を追加すると、4つめ以降のバナー画像が非表示になります。たくさん用意されているバナーの中からランダムにいくつかをピックアップして表示するときにこの CSS が役に立ちます。

.random-banners figure:nth-child(n+4) {
    display: none;
}

かんたん並び順をランダムにしたバナー（ノーコードで作成）

これは、WordPress コアのギャラリーブロックを使って作ったバナーです。

並び順をランダムにしたバナーをいちばん楽に作れるのは、WordPress コアのギャラリーブロックを使うやり方です。

ギャラリーブロックには [ランダムな順番] という便利な機能があります。

4つめ以降のバナー画像を非表示にしたい場合は以下の CSS を追加します。

.******.wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n+4) {
    display: none;
}

****** はギャラリーブロックに指定した追加 CSS クラスです。

ギャラリーブロックでバナーとして使えるのは画像ブロックだけです。画像ブロック以外のコンテンツをランダムに並べるときには最初に書いた JavaScript を使うやり方が役に立ちます。

WordPress / Lightning
のカスタマイズを承ります

ベクトル公式テクニカルパートナー
があなたをお手伝いします

弊社 (魚沼情報サービス) ではこのサイトで紹介しているようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

ご依頼・お問い合わせはこちら

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら