【Xwrite】A8ともしもを1枠で回す方法｜共通パーツで作るランダムローテーション完全ガイド

2026-02-252026-03-09

目次 [ close ]

A8ともしもを「同じ場所」に貼っていませんか？

WordPressでアフィリエイトをしていると、こんな悩みにぶつかりませんか？

A8の案件も紹介したい
もしも経由のAmazonリンクも使いたい
でも広告枠は増やしたくない
デザインはスッキリ保ちたい
クリック率も落としたくない

特にXwriteを使っている場合、共通パーツで広告を一元管理している人も多いはずです。

しかし多くの人は、「広告を縦に並べる」か「どちらか一方だけを表示する」という選択をしています。

それは正直、もったいない。

アフィリエイト収益は

表示回数 × クリック率 × 成約率 × 単価

で決まります。

もしA8の案件のほうが単価が高いなら、多く表示させたほうがいい。

もしAmazon商品のほうがクリックされやすいなら、そちらを優先させたほうがいい。

つまり本来やるべきなのは、どちらが勝つかをテストすることです。

解決策は「疑似ローテーション表示」

疑似ローテーションとは、

広告枠は1つ
表示は常に1つだけ
ページ読み込みごとにランダムで切り替える

という仕組みです。

見た目はスッキリ。でも裏側ではABテストが回っている。

しかもXwriteなら、共通パーツに1回入れるだけで全記事に反映できます。

記事下広告を一括管理
目次下広告を一括変更
カテゴリごとに調整

この記事では、

A8ともしもを1枠で管理する方法
もしもリンクを複数入れる方法
表示確率を調整する方法
スマホでも崩れない書き方
よくあるエラーの対処法

まで解説します。

コードはすべてコピペOK。
プラグイン不要。XWRITE標準機能だけで実装します。

ここから先は有料コンテンツです。

具体的なコードと実装手順を詳しく解説します。

noteで続きを読む

実装手順｜A8ともしもをランダム表示させる方法

① Xwriteの共通パーツを開く

管理画面 → 外観 → 共通パーツ → 新規追加

表示させたい位置（例：記事下）に設定します。

② 以下のコードをHTMLブロックに貼る

例としてA8を1つ、もしもを2つとします。

<div class="affiliate-random">

  <!-- ▼▼ A8 広告（ここに広告コードを貼る） ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コードを貼る */
  </div>

  <!-- ▼▼ もしも① 広告 ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コードを貼る */
  </div>

  <!-- ▼▼ もしも② 広告 ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コード③を貼る */
  </div>

</div>

<style>
.affiliate-item {
  display: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

  const items = document.querySelectorAll(".affiliate-random .affiliate-item");
  if (items.length === 0) return;

  const randomIndex = Math.floor(Math.random() * items.length);
  items[randomIndex].style.display = "block";

});
</script>

③ 仕組みの解説

.affiliate-item を増やせば自動でランダム対象が増える
ページ読み込みごとに1つだけ表示
表示確率は均等（例：4つなら25%ずつ）

④ 表示確率を変える方法

A8を多めに出したい場合は、同じA8コードを2回入れるだけです。

<div class="affiliate-random">

  <!-- ▼▼ A8 広告（ここに広告コードを貼る） ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コードを貼る */
  </div>

  <!-- ▼▼ A8 広告確率アップ用（ここに広告コードを貼る） ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コードを貼る */
  </div>

  <!-- ▼▼ もしも① 広告 ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コードを貼る */
  </div>

  <!-- ▼▼ もしも② 広告 ▼▼ -->
  <div class="affiliate-item">
    /* ここに広告コード③を貼る */
  </div>

</div>

<style>
.affiliate-item {
  display: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

  const items = document.querySelectorAll(".affiliate-random .affiliate-item");
  if (items.length === 0) return;

  const randomIndex = Math.floor(Math.random() * items.length);
  items[randomIndex].style.display = "block";

});
</script>

→ A8 50% / もしも各25%

注意点

上記のやり方は他のアフィリエイトサービスも組み合わせて使用可能ですが、A8ともしも（とその他ASP）の広告サイズが同サイズの場合に安定して表示できます。サイズに違いがある場合には不自然な余白が発生するなど、レイアウトが崩れる場合があるのでご注意ください。解決するには個別にASP利用規約を違反しない範囲でのcssによる修正などを行う必要があります。
同じ画面に2つ以上上記のコードを使いたい場合にはJSと該当するコードを分ける必要があります。（例：.affiliate-item、.affiliate-item-1等）そのままだとJSが競合して表示に不具合が出る場合があります。