広告や画像を横並べにする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ブログの記事をテキストエディタでWordPress用に書き換えよう
WordPressの投稿の編集のテキストモード「code」は何?
noimage
文字の大きさが変えられないのは、スタイルシートのフォントサイズ指定の単位が問題
WordPressテーマPrincipleの表示速度改善に効果があったプラグイン
WYSIWYG編集ができる無料HP作成ソフト「BlueGriffon」が使いやすい
FC2ブログから引越し準備・データのダウンロード
FC2にログインできないときの対処
プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
URLの形式は?ディレクトリ形式?サブドメイン形式
WordPressリビジョンを制御するプラグインRevision Controlの使い方
FC2ブログの記事をWordPressにインストールする前に検索エンジンの重複ページペナルティ対策
Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ
FTPクライアントソフト「WinSCP」インストールとサーバー接続設定

Menu

HOME

 TOP