アドセンスを横に並べる方法を解説していきます。
「レクタングル」を2つ横並びにすることは大手サイトでも採用されている有効な配置方法です。
これを真似するのはとても簡単なので、ぜひご自分のブログに採り入れてみてくてください。
まず最初に横並びに設置するアドセンスの広告コードをご用意下さい。
レクタングル大（336×280）のサイズを横に並べるのが一般的です。これを2つ用意するか、もしくは1つを使いまわして左右に配置するか、お好きな方をお選び下さい。
レクタングル大を作成したら以下のタグで囲みます。
<div class="side_right">
※右のアドセンス広告コードをここに挿入
</div>
<br class="clear" />
</div>
次に以下のコードをスタイルシートに書き込みます。
.side_left,
.side_right{
margin-left: 12px;
display: inline;
float: left;
}
.clear {
clear: both;
}
.side_p {
text-align:left;
margin-left: 15px;
}
スタイルシートに書き込むにはFC2ブログの場合、管理画面から「テンプレートの設定」をクリックすればスタイルシートの編集画面が開きます。
Seesaaブログの場合、管理画面から
デザイン⇒デザイン設定⇒設定中のデザインタイトル名
の順番にクリックするとスタイルシートの編集画面が開きます。
FC2ブログを例にすると
このような感じで貼り付けて更新をクリックします。
ここまで済んだらブログを開いてください。横に2つアドセンスが並んでいるのが確認できるかと思います。
このように横に並んでいるのが確認できます。
横に並んだアドセンス同士の間隔やアドセンスの左のスペースを狭めたり広げたりするのも簡単にできます。
スタイルシートに書き込んだ以下の数値をいじることで調整できますよ。
.side_left,
.side_right{
margin-left: 12px;
display: inline;
float: left;
}
margin-left: 12px;の部分がアドセンスの広告ユニットの左側のスペースの広さを指定する数値です。さらに間隔を広げたければ大きくし、狭めたければ小さくします。
width: 696px;の部分はアドセンス2つ分とmargin-left;の2つ分を合計した数値です。
レクタングル大336×2＝672
margin-left: 12px×2＝24
672+24=696
ですからmargin-leftの数値を変更した後は必ずこのwidthの合計数値も変更しなければなりませんのでご注意下さい。
レクタングルの中間のサイズのレクタングル中（300×250）も同じ手順で横に並べる事ができます。
レクタングル（大）と同じように以下のタグで広告コードを挟みます。
<div class="side_right">
※右のアドセンス広告コードをここに挿入
</div>
<br class="clear" />
</div>
このコードで挟んだらブログに設置します。そして以下のタグをスタイルシートに貼り付けてください。
.side_left,
.side_right{
margin-left: 12px;
display: inline;
float: left;
}
.clear {
clear: both;
}
.side_p {
text-align:left;
margin-left: 15px;
}
スタイルシートに貼り付けたら完了です。
レクタングル大を横に2つ並べると700px近いスペースが必要なので、それをすっぽり納められる横幅をもつブログやサイトでないと設置できません。
もしレクタングル（大）がムリならばレクタングル（中）をお試しください。こちらのサイズのほうが小さいため、ブログのカラムの幅によっては設置がしやすいでしょう。
ちなみにFC2ブログのbasic_white というテンプレートなら、そのまま設定をいじらずにレクタングル（大）を横並びに置けますよ。
読了時間：約 3分
読了時間：約 3分
読了時間：約 4分
読了時間：約 2分
読了時間：約 3分
ストリートビューの埋め込み方法。ブログにあっさり3分で！
SSL化したのに鍵マークが出ない！原因の特定方法とは？
ワードプレスのスパムコメントをプラグインで完全防御しよう
アドセンスブログの記事の文字数【2018年】今の最低ラインは？
トレンドブログの画像の著作権は？転載はOKかサポートに確認してみた！
聞いてみたいことがあれば、お気軽にメールをください！
コメントフォーム