バナー交換タグ 自在タイプ

このタイプでは掲載枠が固定されていません。親要素の大きさで幅が決まります。

また、基本的なHTMLのみを返しますので、カラー等はスタイルシートでカスタマイズしてご利用頂けます。

※ HTMLの知識と CSSの知識を必要とします。

掲載する HTMLコード (リクエスト)

引数の解説

  clicktx_client=10001;
  clicktx_adType=1;
  clicktx_requestCount=3;
  clicktx_separator='-';

設定する項目は上記4項目です。

clicktx_adType の表示タイプについて

表示される広告の見た目が3種類用意されています。CSS を適用しない状態でのデモは以下のものとなります。(見やすくするため枠線を表示していますが実際は表示されません)

表示デモページ

返還されるHTML(レスポンス)

各要素には ID 又は、CLASS が指定されています。
また、各広告は li要素 で囲まれています。li 要素 には onClick でブロックにリンクが貼られてます。

Type1

<div id="clicktx_adSpace_1" class="clicktx_adSpace">

  <ul>
    <li onClick="window.top.location.href='#'">
      <a href="#" class="clicktx_title">広告1 タイトル</a>
      <div class="clicktx_text">広告1 本文</div>
      <div class="clicktx_fqdn">広告1 FQDN</div>
    </li>

    <li onClick="window.top.location.href='#'">
      <a href="#" class="clicktx_title">広告2 タイトル</a>
      <div class="clicktx_text">広告2 本文</div>
      <div class="clicktx_fqdn">広告2 FQDN</div>
    </li>
  </ul>
  
  <div class="clicktx_copyright">
    FreeAD by 
    <a href="#">clicktx</a>
  </div>
</div>

Type2

<div id="clicktx_adSpace_1" class="clicktx_adSpace">

  <ul>
    <li onClick="window.top.location.href='#'">
      <a href="#" class="clicktx_title">広告1 タイトル</a>
        <span class="clicktx_joint">-</span>
      <a href="" class="clicktx_fqdn">広告1 FQDN</a>

      <div class="clicktx_text">広告1 本文</div>
    </li>
  </ul>

  <div class="clicktx_copyright">
    FreeAD by 
    <a href="#">clicktx</a>
  </div>
</div>

Type3

<div id="clicktx_adSpace_1" class="clicktx_adSpace">

  <ul>
    <li onClick="window.top.location.href='#'">
      <a href="#" class="clicktx_title">広告1 タイトル</a>
        <span class="clicktx_joint">-</span>
      <span class="clicktx_text">広告1 本文</span>
    </li>
  </ul>

  <div class="clicktx_copyright">
    FreeAD by 
    <a href="#">clicktx</a>
  </div>
</div>

CSS の指定方法

広告ブロック div

広告ブロックを囲む div タグに id と class を指定しています

ページに複数個設置する場合で、それぞれ違うスタイルを適用したい場合は #clicktx_adSpace_X ごとに指定出来ます。

全て同じスタイルを適用する場合は .clicktx_adSpace を利用して下さい。

例1)
#clicktx_adSpace_1 li{ list-style:none; }
#clicktx_adSpace_2 li{list-style-image: url('../images/ico32.gif'); }
例2)
#hogehoge .clicktx_adSpace li{ list-style:none; }

CSS サンプル

 

CSS 適用サンプル

ブログサイトのテンプレートに組み込む

単独記事ページのみに掲載する事も出来ます。この場合、テンプレートの編集機能を提供しているブログサイトでご利用頂けます。

FC2ブログでのサンプルを用意しました。

トップページでは表示されませんが、各記事ページにて表示されます。記事の一部として溶け込んでいるのが確認できるでしょうか?

ブログテンプレートに組込む を解説したページではFC2ブログを対象にテンプレートのカスタマイズ方法を掲載しています。