バナー交換タグ 自在タイプ
このタイプでは掲載枠が固定されていません。親要素の大きさで幅が決まります。
また、基本的なHTMLのみを返しますので、カラー等はスタイルシートでカスタマイズしてご利用頂けます。
※ HTMLの知識と CSSの知識を必要とします。
掲載する HTMLコード （リクエスト）
引数の解説
clicktx_client=10001; clicktx_adType=1; clicktx_requestCount=3; clicktx_separator='-'; clicktx_imgSize=0;
clicktx_client
アカウント番号を5桁の半角数字で指定
clicktx_adType
表示タイプを指定。1～3の半角数字で指定。
clicktx_requestCount
掲載する広告の数を指定
clicktx_separator
セパレーターとして使う文字を指定。上記 clicktx_adType が 2 又は、 3 の場合に使用される。
clicktx_imgSize
表示するサムネイル画像の大きさ（ピクセルサイズ）0 を指定、又は、指定しないと表示しない。画像を表示する場合は 60, 70, 80, 110, 115, 155 のいずれかを半角数字で指定する。
設定する項目は上記5項目です。
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='#'">
<img src="imagePath" width="xx" height="xx" class="clicktx_image" />
<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='#'">
<img src="imagePath2" width="xx" height="xx" class="clicktx_image" />
<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="#">pinktx</a>
</div>
</div>
Type2
<div id="clicktx_adSpace_1" class="clicktx_adSpace">
<ul>
<li onClick="window.top.location.href='#'">
<img src="imagePath" width="xx" height="xx" class="clicktx_image" />
<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="#">pinktx</a>
</div>
</div>
Type3
<div id="clicktx_adSpace_1" class="clicktx_adSpace">
<ul>
<li onClick="window.top.location.href='#'">
<img src="imagePath" width="xx" height="xx" class="clicktx_image" />
<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="#">pinktx</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 適用サンプル
この例ではサムネイルを表示していますが、テキストだけのシンプルな表示にも出来ます。
ブログサイトのテンプレートに組み込む
単独記事ページに掲載する事も出来ます。この場合、テンプレートの編集機能を提供しているブログサイトでご利用頂けます。
FC2ブログでのサンプルを用意しました。
トップページでは表示されませんが、各記事ページにて表示されます。記事の一部として溶け込んでいるのが確認できるでしょうか？
FC2ブログへ組込む
FC2ブログへの組み込み方の解説はこちらを御覧下さい。
自在タイプ Tips ブログテンプレートへの組込 | クリックテクス
