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

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

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

コメントを残す




*

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

関連記事

description次第で検索順位が変わる・訪問者が増える
GoogleWEBマスターツールの「HTMLの改善」で訪問者を増やそう
FC2ブログ記事直下に広告とランキングを自動的に挿入する
プラグインでWordPressのSEO
noimage
シーサーブログのタグページに記事概要(記事の要約・サマリー)を表示する方法
WordPress4.0にバージョンアップしたらプラグインのインストールがわかりにくくなった
GooglePlayアプリのダウンロードサイトへのリンクバナーを作ろう
ブログの携帯表示をPCで見るには
WordPressで使っていない画像を探して削除
GoogleBloggeの投稿者名を消す方法がわかったので皆さんにお知らせ
WordPressのリビジョンって何のためにある?
WordPressのサイトマップをGooglewebマスターツールに登録しよう
WordPressにFC2ブログの画像を取り込む
FC2ブログの全記事リストを表示する時のHTMLタグと注意点

Menu

HOME

 TOP