並び順をランダムに表示するバナーの作り方
ウェブページに複数のバナー(広告)を並べて設置するとき、位置による不平等が起きないように、ページを読み込むたびにバナーの並び順をランダムに変えるやり方を紹介します。
カスタマイズ前のバナー
グリッドブロックに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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2025年11月5日インストールするだけで 404 ページを改善するプラグインを提供開始しました
WordPress2025年11月3日カスタム投稿タイプの投稿をランダムにカルーセル(スライダー)で表示した例
WordPress2025年11月3日並び順をランダムに表示するバナーの作り方
WordPress2025年10月28日スターターパックの見出しのデザインを追加しました

WordPress のトラブル解決・設定・カスタマイズ
ベクトル公式テクニカルパートナー
があなたをお手伝いします
Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。
PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。



