SEO対策、WEBサイト(ホームページ)の作り方、そして時々柴犬と愛媛県

スポンサーリンク

GoogleAdSenseなどの広告を横に並べて表示する方法

初期設定だと縦に並ぶ形になる

いつも記事の途中に無理やり差し込んだりと、読むうえでかなり邪魔じゃね?と感じながらも入れているGoogleAdeseですが、今回は、他のブログとかでもやって方がいるように、そろそろ広告を横に並べて表示する方法に取り組んでみたいと思います。今までやらなかったのはいつでもできるので、面倒くさかっただけなんですが、悩んでいる方もいる方もいるかもしれないので、知識レベルに応じていくつか方法を考えてみたいと思います。

今回使うのは下の二つのスクエア型の広告です。まず普通に入れるとどうなるかということで、それぞれのソースを改行など行わずにスペース1個だけ空けて入力&表示してみます。

恐らく縦並びになっていることでしょう。


 

色々な方法で横並びにしてみる

大前提として表示エリアが広告2個分のサイズより狭いと当然入りきりませんので、まずはそこを確認した上で行いましょう。それじゃやってみましょうか。

テーブルレイアウト

HTMLやCSSなどに全く自信のない方や、とりあえず表示できたらいいという方はおそらくテーブルタグを使うのが方法としては簡単でしょう。恐らく大体のブログエディタでこの方が取れると思います。

入力例
<table>
<tr>
<td>(広告用ソース1)</td>
<td>(広告用ソース2)</td>
</tr>
</table>

これで簡単に表示ができます。

表示例
スポンサーサイト1


スポンサーサイト2


あ、やっぱり枠線残りましたね(笑)。枠線に関してはお好みで消してください。時間があればこの方法はリライトした時に追記します。お急ぎの方はお問合せ下さい。

WordPressなどの場合は注意

先ほど表示の確認をしている時に気付きまさいたが、入力画面でビジュアルとテキストの切り替えを行ったりすると、勝手にテーブルタグなどが消えてしまったり、タグの位置調整が行われてしまうようです。おそらくアドセンスだけしか内容がないと要素が空だと判断されてしまっているようなので、そういった場合は上のようにスポンサーサイトなりのテキストを入れると解決するでしょう。

モバイルサイトも注意

おそらくテーブルレイアウトを使えば、表示されている範囲外にテーブルが突き抜けますので、他のページと若干レイアウトが変わり、スクロールバーなどが表示されるはずです。この点は留意しておきましょう。

エディタ上でフロートしてみる

スタイリッシュな方法がいいので今度はフロートさせてみましょうか。とりあえずエディタ上だけでコントロールする場合は以下の記述を参考にしてもらえれば大丈夫だと思います。最後の行はレイアウト崩れなどにも備えて初心者の方向けにあらかじめ回り込みを解除させている記述となります。

入力例
<div>
<div style="float:left;">(広告用ソース1)</div>
<div>(広告用ソース2)</div>
</div>
<div style="clear:both;"></div>
表示例




marginなどを指定する場合は注意

もし広告の間にスペースを空けたい場合はmarginなどを入れたいところですが、要素内が空になっている可能性が高いのでブラウザによっては思ったように表示されない可能性もあります。テキストか何かを入れたりdisplay:blockなどを指定して横幅を確定させる必要があるかもしれません。今回はあまり詳しくない方のために、思い付きで書いてますのでそこまで検証していないのですが、floatが絡んでい以上主要ブラウザでは最低限注意が必要でしょう。

外部のスタイルシートで指定

上の記述とほとんど変わりませんが、主要ブラウザではとりあえず下の記述でうまくいきました。

入力例

エディタ側

<div class="adbox(お好みのクラス名にしてください)">
<div class="adsense0">(広告用ソース1)</div>
<div class="adsense0">(広告用ソース2)</div>
</div>

CSS側

.adbox{
	overflow:hidden;
}
.adsense0{
	float:left;
	margin:0;
	padding:0 5px 0 0;
}
表示例




以上、ほぼざっと考えてみましたが、不具合等気づいたら修正していきたいと思います。WordPressは自動的にソースなどを調整してくるのでここだけ注意してください。


スポンサーサイト

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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