ブログに広告や画像を横に並べて表示して見よう。
標準のHTMLで広告や画像を横ならべに配置できるよ。
HTMLの<div>とスタイルシートのfloatを使う。
広告でなくても良い、画像でも、文章でもOKだ。
wordpressでもFC2ブログでもシーサーブログでもHTMLさえカスタマイズできるサービスならどこでも活用できる。
普通のHPでも実装できる。
広告や画像を横に並べて表示する
広告や画像を横に並べるのは非常に簡単に出来る。
広告や画像を表示したい位置に以下の記述を貼り付けるだけ。
<!--▼広告を横並べ-->
<div class="ad1">
<div style="float:left;">
広告コード
</div>
<div style="float:left;">
広告コード
</div>
<br clear="all">
</div>
<div style="clear:both;">
フロートの下のブロック
</div>
<!--▲広告を横並べ-->
HTMLの説明
<div class="ad1"></div>
書き込んだ広告や画像全体の配置の設定を行う。
ad1は英数字なら何でもいい。
わかりやすい名前をつけよう。
スタイルシートには.ad1{ここにスタイル}のように書き込む。
<div style="float:left;"></div>
左に回りこませる。
<br clear="all"></div>
回り込みを解除する。
<!-- -->
コメント。
サイトやブログには表示されない。
スタイルシートで全体のマージンを指定した例
.ad1{ここにスタイル}
例)
.ad1{ margin: 10px 20px 30px 40px;}
この記述だと広告を表示したブロックの[上][右][下][左]に隙間が出来る。
上10px、右20px、下30px、左40px、に隙間が出来ることになる。
特定のページ・デバイスだけに表示したい場合
特定のページだけ表示したい場合は、それぞれのサービスの条件分岐で囲む。
コメント