広告を一定時間ごとにローテーションさせ、広告に注意を引かせる設定

広告に注意を引きつけるために、一定時間ごとに切り替える方法です。追尾式ボックスと画像スライドの合わせ技です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. ページを表示してからしばらく経つと、広告を自動で切り替えられます。

  2. 動く顔文字や画像スライドで、パラパラ漫画風アニメーションと同じ原理です。切り替わる間隔を長くするだけです。何秒で切り替わるかを指定できます。

メリット・デメリット

  1. 同じ場所に同じ広告をずっと表示していると、読者はその内広告が目に入らなくなります。広告を切り替えることで、広告に注意を引きつけられる可能性が上がります。

  2. やりすぎると効果がないどころか逆効果かもしれません。表示エリア内に3つ以上あると、個々のローテーションが目立ちにくくなります。複数の広告をローテーションさせる場合、それぞれのローテーションのタイミングを長くかつ異なるようにした方がよさそうです。

  3. 広告収入によりサイト管理人が経済的に潤えば、管理人のモチベーションが上がり、より良い記事作成につながるかもしれません。

  4. スクロールに追尾したりローテーションさせても、広告利用規約上問題ないか確認の上で利用してください。なお、Google adsenseはスクロールに追尾させるのは規約違反で警告されます。作者は実際に警告されました(´;ω;`)(´つω;`)

テンプレートのHTMLを編集

  1. 定義追加用スペース4に次のコードを追加します。

    //カスタム具体例: http://customtemplate.blog112.fc2.com/blog-entry-104.html
    $(function(){
    var ani_ad=page.find('.ani-ad');
    ani_func(ani_ad,30*1000);
    });
  2. 上記コード赤字部分を編集することで秒数を指定できます。

テンプレートのCSSを編集

  1. 次のコードを探します。

    /*¶パラパラ漫画風アニメーション*/
    .ani span,.ani-s span,.ani-f span{display:none;}
    .ani span:first-child,.ani-s span:first-child,.ani-f span:first-child{display:inline;}
  2. 次のコードに変更します。

    /*¶パラパラ漫画風アニメーション
        (カスタム具体例: http://customtemplate.blog112.fc2.com/blog-entry-104.html)*/
    .ani span,.ani-s span,.ani-f span,.ani-ad span{display:none;}
    .ani span:first-child,.ani-s span:first-child,.ani-f span:first-child,.ani-ad span:first-child{display:inline;}

表示例・使い方

  1. 右の画像が表示例です。切り替わるタイミングを見るには30秒かかります。デモ表示なので時間を短縮しようかと思いましたが、実際の様子をご覧いただいたほうがいいのでそのまま表示しています。

    130308book-html.png 130308book-jquery.png
  2. テンプレートのHTML編集や記事内の任意の場所に、次のコードを挿入します。表示したい広告に合わせてコード内のURLや説明を変更します。スクロールに追尾するスペースに追加するといいかもしれません。

    <span class="ani-ad no-target-blank no-outline">
    <span><a href="http://amazon.co.jp/o/ASIN/4774148563/unmeiin-22" title="Amazon.co.jp: Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative): 高津戸 壮: 本" target="_blank"><img src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/130308book-jquery.png" alt="130308book-jquery.png" width="250" height="250" /></a></span>
    <span><a href="http://amazon.co.jp/o/ASIN/4839904545/unmeiin-22" title="Amazon.co.jp: ユニバーサルHTML/XHTML: 神崎 正英: 本" target="_blank"><img src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/130308book-html.png" alt="130308book-html.png" width="250" height="250" /></a></span>
    </span>
  3. 動く顔文字や画像スライドで、パラパラ漫画風アニメーション同様、子要素のspanを増やすことでローテーションする広告の数を増やせます。

今後のテンプレート改訂時には

  1. 上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)