このタイプでは掲載枠が固定されていません。親要素の大きさで幅が決まります。
また、基本的なHTMLのみを返しますので、カラー等はスタイルシートでカスタマイズしてご利用頂けます。
※ HTMLの知識と CSSの知識を必要とします。
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項目です。
表示される広告の見た目が3種類用意されています。CSS を適用しない状態でのデモは以下のものとなります。(見やすくするため枠線を表示していますが実際は表示されません)
各要素には ID 又は、CLASS が指定されています。
また、各広告は li要素 で囲まれています。li 要素 には onClick でブロックにリンクが貼られてます。
<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>
<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>
<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>
広告ブロックを囲む 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; }
この例ではサムネイルを表示していますが、テキストだけのシンプルな表示にも出来ます。
単独記事ページに掲載する事も出来ます。この場合、テンプレートの編集機能を提供しているブログサイトでご利用頂けます。
FC2ブログでのサンプルを用意しました。
トップページでは表示されませんが、各記事ページにて表示されます。記事の一部として溶け込んでいるのが確認できるでしょうか?
FC2ブログへの組み込み方の解説はこちらを御覧下さい。
自在タイプ Tips ブログテンプレートへの組込 | クリックテクス