SWELLでランダムバナーを作る方法【備忘録】

2025年1月19日

このページは 1分12秒-2分59秒で読めます（1794文字）

WordPressのSWELLテーマを使って、
広告バナーや画像をランダムに表示する方法を備忘録としてまとめました。
こちらの記事は、ポイビューのヤモヲさんの内容を参考にしています。
詳細はヤモヲさんのページをご覧ください！

POINT OF VIEW　略して、ポイビュ…

ブログパーツでアフィリエイトバナーをランダムに表示 | POINT OF VIEW　略して、ポイビュー。この記事はこんな方におススメです！アドセンスの審査に落ちまくっているアドセンスが嫌いアフィリエイトバナーをランダムに表示したいどうも。勢いあまってアドセンス…

自分用の簡易フローではありますが、同じ方法を試してみたい方の参考になれば幸いです。

バナーをランダムに表示する方法

以下の手順で進めます。

STEP

広告タグ作成

表示させたい広告コードを取得し「広告タグ」に登録

[PR]アフィリエイトといえばこちらの２つ！

STEP

ブログパーツを新規作成

ブログパーツを新規に作成し、以下を入力

STEP

リッチカラム

リッチカラムを追加
カラム項目を追加し、その中にショートコードを挿入
ショートコードに、表示させたい「広告コード」を入力

２〜３を表示させたいバナーの数だけ繰り返す
最後に、リッチカラムの追加CSSクラスにrandom-banner-IDを設定
*IDは作成しているブログパーツのID番号

STEP

カスタムHTML

リッチカラムの下部に「カスタムHTML」を追加し、以下のコードを記述

<script>window.addEventListener('DOMContentLoaded',(event)=>{let elmRandom=document.querySelector('.random-banner-ID > .swell-block-columns__inner');for(let i=elmRandom.children.length;i>=0;i--){elmRandom.appendChild(elmRandom.children[Math.random()*i|0])}})</script>
<style>.random-banner-ID .swell-block-column:nth-child(n+2){display:none}</style>

変更が必要な部分