広告や画像を横並べにする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バージョン 3.9.2 へバージョンアップ
Googleの検索ボックスの便利な使い方1
リビジョンを削除するプラグイン
RSSリーダーどれが使いやすい?
Googleカスタム検索のメリットとデメリットをWordPress標準検索と比べてみよう
レンタルサーバーに仮登録してみた
Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ
wordpress記事一覧・更新日順、1ページの表示件数制御、ページャー対応コード
ブログの携帯表示をPCで見るには
ビジュアルとテキストのエディタが切り替わらない!
WordPressの画像アップロードによるサーバー容量の消費を防ぐメディア設定
wordpressテーマSTINGER3のサイドバー【NEW ENTRY】のアイキャッチ画像を削除
RSS,フィード,Atomってなに?
webセーフカラー216・短縮コード一覧

Menu

HOME

 TOP