広告や画像を横並べにするHTML

 ブログに広告や画像を横に並べて表示して見よう。

 標準の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、に隙間が出来ることになる。

特定のページ・デバイスだけに表示したい場合

 特定のページだけ表示したい場合は、それぞれのサービスの条件分岐で囲む。

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

FC2ブログの記事データーを他社のブログに流し込むこともできる
FC2ブログのタイトルの下に文字を入れてみよう
RSSリーダーどれが使いやすい?
シーサーブログ(seesaaブログ)を削除する方法
Googleカスタム検索のメリットとデメリットをWordPress標準検索と比べてみよう
Googleアドセンスの新しい管理画面は、解析能力が優秀
FC2ブログの有料プラント有料レンタルサーバー比較
wordpress記事一覧・更新日順、1ページの表示件数制御、ページャー対応コード
FC2ブログのバックアップファイルをシーサーブログに流し込む方法
RSS,フィード,Atomってなに?
WordPress(オープンソースのテンプレート)が使えるレンタルサーバー
wordpressでスマートフォンだけに表示・非表示を行う
Googleにサイトユーザーの対象国を知らせる方法
人気のフィード(RSS)リーダーfeedlyを設置してみた
GoogleAdSenseのページ単位の広告

Menu

HOME

 TOP