ブログパーツでアフィリエイトバナーをランダムに表示

ブログパーツでアフィリエイトバナーをランダムに表示

この記事にはプロモーションが含まれています

この記事はこんな方におススメです!

  • アドセンスの審査に落ちまくっている
  • アドセンスが嫌い
  • アフィリエイトバナーをランダムに表示したい

どうも。勢いあまってアドセンスを剥がしちゃったヤモヲです。

だってアドセンスったら、至極真っ当な記事(のはず)なのに「ア〇ル〇 コ〇テ〇ツ(〇的な内容)」として違反報告がきたり、エックスサーバーの紹介記事でコノハウイングの広告出してきたり、そもそも、さして収益が発生しているワケでもないので、

いっそのこと剥がしちゃえ!

ってことで剥がしちゃいました。これでアドセンス呪縛によるモヤモヤした気分もスッキリです。

どうせなら、アドセンスを貼っていた領域に、アフィリエイトバナーでも貼ろうと思ったのですが、記事毎にいちいちバナー選定するのも面倒だなと。

そこで、かねてから「ランダムにバナーを表示したい」というカスタマイズのご要望もあったので、アフィリエイトのバナーをランダムに表示する、

名付けて「ランダムバナー」のカスタマイズ方法をご紹介しますね。

アドセンスの呪縛にお悩みの方のお役に立てればと。

あらすじ

ランダムバナーをブログパーツ化して埋め込む

以前、こちらの記事で「ブロック要素をランダムに並び替える」カスタマイズをご紹介しました。

ランダムで表示する部分はこのカスタマイズを踏襲しています。

最終的には、以下のように実装します。

ビッグバナー

ビッグバナー

※リロードしています

レクタングルバナー

レクタングルバナー×2

※リロードしています

上記の例では、コンテンツ領域とサイドバー領域にランダムバナーを配置しています。

いずれも、「広告タグ」に登録した複数のアフィリエイトバナーをブログパーツに登録し、コンテンツ領域やサイドバー領域に埋め込んで、アドセンスのようにランダムに表示しています。

大まかな手順としては以下のとおりです。

設定手順

STEP
ASPから広告コードを取得し「広告タグ」に登録

※ASP…アフィエイト・サービス・プロバイダー

STEP
ランダムバナー用のコードをコピペしてブログパーツを新規作成

※ランダムバナーのひな形となるブロックコードをコピペできるようにしてあります。

STEP
ブログパーツに広告タグのショートコードを埋め込み
STEP
ランダムバナーを表示したいエリアに、ブログパーツの呼び出しコードを埋め込み

ブログパーツ化するランダムバナー用のコードは、この後の説明の中でコピーできるようにしてありますのでご安心ください。

今回は以下の設置個所に表示します。

バナー設置個所

  1. コンテンツ領域:ビッグバナー
    ・バナーサイズ:728px×90px
    ・バナー数:3つ
  1. コンテンツ領域:レクタングルバナー
    ・バナーサイズ:300px×250px※×2バナー
    ・バナー数:4つ
  1. サイドバー領域:レクタングルバナー
    ・バナーサイズ:300px×250px
    ・バナー数:3つ

設置個所(記事下など)によっては、SWELLの「遅延読み込み機能」設定によりうまく反映されない場合があります。設定を見直してみてください。

それでは、設置個所ごとに詳しくご説明しますね。

コンテンツ領域:ビッグバナー

① ASPから広告コードを取得し「広告タグ」に登録

STEP
ASPから同じバナーサイズの広告コードを取得

A8.netやもしもアフィリエイトなど、ご自身が登録しているASPから、同一サイズのバナーの広告コードを取得します。

広告コード
A8.netの場合
STEP
取得した広告コードをSWELLの「広告タグ」に登録

「ダッシュボード>広告タグ>新規追加」より、取得したコードを名前を付けて登録します。

  • タイトル:728×90 A8 広告A
    (わかりやすい名前で)
  • 広告タイプ:バナー型
  • 広告ボックスの枠:なし
    (バナー画像にあわせて選択)
  • 広告タグ:コピーした広告コードを貼り付け

入力したら「公開」をクリックし保存します。

広告タグ登録
STEP
これをバナーの数分繰り返します

② ランダムバナーのブロックパターンをコピペしてブログパーツを新規作成

続いて、ランダムバナーのひな形となるブロックパターンのコードをコピペして、ブログパーツを新規作成します。

STEP
ブロックパターンのコードをコピー

以下の「コードをコピー」をクリックして、ランダムバナーのひな形となるブロックパターンのコードをコピーします。

コードをコピー コピーしました
STEP
ブログパーツを新規作成し、ブロックパターンのコードをペースト

「ダッシュボード>ブログパーツ>新規作成」より、ブログパーツ新規作成画面を開き、先ほどコピーしたブロックパターンのコードをペーストします。

ペースト後の画面はこのようになります。

「リッチカラム」ブロックにカラムが4つ、その中に「ショートコード」ブロックを登録しています。

「カスタムHTML」ブロックには、ランダムバナー用のJavascriptコードとCSSが定義されています。

ペースト後の状態

ペースト時に「このブロックには、想定されていないか無効なコンテンツが含まれています。」メッセージが表示された場合、「ブロックのリカバリーを試行」をクリックしてください。

保存時に「更新に失敗しました。 返答が正しい JSON レスポンスではありません。」メッセージが表示される場合は、サーバー側のWAF設定を一時的に解除してから保存してみてください。

STEP
ブログパーツの初期設定

ブログパーツの初期設定を行います。

  • タイトル:(わかりやすい任意の名前)
  • 用途:ブロックパターン

この状態でいったん「下書き保存」をクリックし保存します。

保存すると、このブログパーツにIDが付与されるので、一覧画面で確認し控えておいて下さい。(後ほど指定するクラス名に使用します)

例:blog_parts id="153"

ブログパーツ下書き保存
ブログパーツ下書き保存後 一覧画面

③ ブログパーツに広告タグのショートコードを埋め込み

STEP
広告タグの登録とリッチカラムブロックの設定

下書き保存したブログパーツを開き、①で登録した「広告タグ」の呼び出しコードを、ブログパーツに設定します。

設定する広告タグの数にあわせて、「リッチカラム」ブロックのカラム数を変更します。

例では広告タグの数を「3つ」にしています。

続けて「リッチカラム」ブロックの設定を行います。

  • 列数:1 (すべて)
  • カラムの余白:0(左右・上下ともに)
  • 追加CSSクラス:random-banner-153 ※XXXXのところをIDに変更しています

※Javascriptで特定するためユニークなクラス名にします。先ほど確認したブログパーツのIDを付けるとよいです。

STEP
JavascriptとCSSのクラス名を変更

「リッチカラム」ブロックに設定したクラス名を、「カスタムHTML」ブロックのJavascriptとCSSに反映します。

以下の部分を変更してください。

<script>window.addEventListener('DOMContentLoaded',(event)=>{let elmRandom=document.querySelector('.random-banner-XXXX > .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-XXXX .swell-block-column:nth-child(n+2){display:none}</style>
  • 1、2行目.random-banner-XXXX 部分(2か所)
    「リッチカラム」ブロックのクラス名に変更します。 例;.random-banner-153
  • 2行目:.swell-block-column:nth-child(n+2)
    数値「2」は「2番目以降のカラムを非表示にする」設定です。この設定により「1番目」のカラムしか表示されません。
    「3」にすれば「3番目以降を非表示」、つまり2個表示することもできます。
STEP
ランダムバナーのブログパーツ完成

④ ランダムバナーを表示したいエリアに、ブログパーツの呼び出しコードを埋め込み

上記の例では「①コンテンツ領域:ビッグバナー」にしましたので、コンテンツ領域の任意の位置に埋め込みます。

STEP
投稿記事の編集画面でプログパーツの呼び出しコードを埋め込み

表示したい箇所にブログパーツの呼び出しコードを埋め込みます。
blog_parts id="153" ※[]で括ってください

STEP
完成
ビッグバナー

※リロードしています

コンテンツ領域:レクタングルバナー

こちらもコンテンツ領域に設置します。基本的にはビッグバナーと同じ手順で、ブログパーツに広告タグを登録していきます。
ビッグバナーと異なる点のみピックアップしますね。

STEP
リッチカラムブロックの設定

「リッチカラム」ブロックの設定のみ、お好みで変更してください。

  • 列数:2 ※2列表示になります。
    (スマホは1列を推奨)
  • カラムの余白:0(左右・上下ともに)
  • 追加CSSクラス:ユニークなクラス名
STEP
JavascriptとCSSのクラス名を変更

ビッグバナー同様に、「リッチカラム」ブロックに設定したクラス名と表示数値を、「カスタムHTML」ブロックのJavascriptとCSSに反映します。

  • 1、2行目.random-banner-XXXX 部分(2か所)
    「リッチカラム」ブロックのクラス名に変更します。
  • 2行目:.swell-block-column:nth-child(n+2)
    2つ表示したい場合は、数値を「3」にします。
STEP
投稿記事の編集画面でプログパーツの呼び出しコードを埋め込み

表示したい箇所にブログパーツの呼び出しコードを埋め込みます。

STEP
完成
レクタングルバナー×2

※リロードしています

サイドバー領域:レクタングルバナー

続いて、サイドバーに設置する手順です。こちらも基本的な設定は同じです。

STEP
リッチカラムブロックの設定

「リッチカラム」ブロックの設定です。

  • 列数:1
  • カラムの余白:0(左右・上下ともに)
  • 追加CSSクラス:ユニークなクラス名
STEP
JavascriptとCSSのクラス名を変更

ビッグバナー同様に、「リッチカラム」ブロックに設定したクラス名と表示数値を、「カスタムHTML」ブロックのJavascriptとCSSに反映します。

  • 1、2行目.random-banner-XXXX 部分(2か所)
    「リッチカラム」ブロックのクラス名に変更します。
  • 2行目:.swell-block-column:nth-child(n+2)
    数値「2」を表示したい数にあわせて変更します。
STEP
サイドバーウィジェットにプログパーツの呼び出しコードを埋め込み

「ダッシュボード>外観>ウィジェット」より、表示したいサイドバー領域にブログパーツの呼び出しコードを埋め込みます。

例では「共通サイドバー」に「カスタムHTML」ウィジェットで埋め込んでいます。

STEP
完成
レクタングルバナー×2

※リロードしています

ちなみに、当記事のサイドバーにも設定しています。

ランダムバナーはいろいろ応用できます

いかがでしょうか。

ランダムバナーのブログパーツを広告のカテゴリごとに作成してけば、記事の内容に応じたランダムバナーを簡単に埋め込むことができます。

また、このランダム機能を利用して、画像やポチップなどもランダムに表示することができますので、いろいろとアレンジしてみてくださいね。

ではでは。

\ ご支援ありがとうございます! /

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ(←本来の意味での)をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです!

(カスタマイズ沼にハマらないようご注意ください^^;)

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^

WordPressテーマ「SWELL」

17,600円(税込)

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応!

CUSTOMIZE
+PLUGIN
KNOWLEDGE
シェアしていただけるとうれしいです^^
  • URLをコピーしました!
  • URLをコピーしました!
あらすじ