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

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

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

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

掲載する HTMLコード （リクエスト）

<script><!-- clicktx_client=10001; clicktx_adType=1; clicktx_requestCount=3; clicktx_separator='-'; (function(){var p=(("https:"==document.location.protocol)?"https://":"http://"); document.write('<scri'+'pt src="'+p+'www.clicktx.jp/ads/freely/show.js" charset="Shift_JIS"></scri' + 'pt>');})(); //--></script>

引数の解説

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

• clicktx_client ... アカウント番号を5桁の半角数字で指定
• clicktx_adType ... 表示タイプを指定（1 〜 3）
• clicktx_requestCount ... 表示する広告数を指定
• clicktx_separator ... セパレーターとして使う文字を指定。clicktx_adType が 2 か 3 の場合に使用する。

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

clicktx_adType の表示タイプについて

表示される広告の見た目が３種類用意されています。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 ... X は掲載数に応じて 1から加算される数字となります。
• .clicktx_adSpace ... 固定値です

ページに複数個設置する場合で、それぞれ違うスタイルを適用したい場合は #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 Sample */ #clicktx_adSpace_1{} #clicktx_adSpace_1 ul{} /* 各広告の <li></li>で囲まれている部分に cursor:pointer; の指定をおすすめします */ #clicktx_adSpace_1 li{ list-style:none;cursor:pointer; padding:15px 10px;} /* マウスオーバーした時に背景を変える場合 */ #clicktx_adSpace_1 li:hover{ background-color:#E4FFF1;} #clicktx_adSpace_1 a.clicktx_title{ color:#009999; font-size:24px; font-weight:bold; } #clicktx_adSpace_1 .clicktx_text{ color:#9f9f9f;} #clicktx_adSpace_1 .clicktx_fqdn{ color:#99CC66;} #clicktx_adSpace_1 .clicktx_copyright{ font-size:12px;} #clicktx_adSpace_1 .clicktx_copyright a{ text-decoration:none;}

CSS 適用サンプル

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

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

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

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

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