広告や画像を横並べにする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、に隙間が出来ることになる。

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

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

コメントを残す




*

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

関連記事

WordPressのTOPとアーカイブページで記事と記事の間に広告を入れる方法
GoogleBloggeの投稿者名を消す方法がわかったので皆さんにお知らせ
WinSCPのバージョンアップ
パソコンでスマートフォンサイトの表示を確認する・Firefox
RSS,フィード,Atomってなに?
コードを収得して、サイトにGoogleアドセンスの広告を貼り付けよう
シーサーブログのカテゴリーページに記事の概要(要約・サマリー)を表示する
GoogleWEBマスターツールの「HTMLの改善」で訪問者を増やそう
スタイルシート(CSS)を縮小・具体例
ドメイン選びの注意点
文字の大きさが変えられないのは、スタイルシートのフォントサイズ指定の単位が問題
WordPressにFC2ブログの画像を取り込む
FC2ブログ記事直下に広告とランキングを自動的に挿入する
wordpressバージョン 3.9.2 へバージョンアップ
テキストモードにクイックタグを追加-WordPress投稿の編集のカスタマイズ

Menu

HOME

 TOP