レスポンス対応！！広告を横に二つ並べる方法

こんにちは

ジョーカーです

アドセンスの配置の仕方で悩んでいませんか？

私の配置の仕方公開しようと思います。

見ていただけたらわかるとは思いますけどね。

配置の仕方は？
横に並べて理由は？
横に並べるやり方は
1. ＨＴＭＬコード
2. ＣＳＳコード
まとめ

配置の仕方は？

記事の上あたりに２つ
記事の真ん中に１つ
記事の下に２つ
計５つの広告を貼っています。
平成29年4月段階はこんな感じでやっています。

一応ヒトデさんの配置の仕方をまねさせてもらいました。

私のブログでこの配置が良いのかはまだ、今の段階ではわかりません。

そのブログのテンプレートによっても変わってくると思います。

なので、私のは実験段階になりますね。

横に並べて理由は？

最初縦に並べてもよかったのですが、見栄え的に不格好かなと・・・・・

ヒトデさんのブログを毎日のように記事を見ていたら、広告の配置が見慣れてしまったもので、広告の配置を縦にするとすごく違和感を感じてしまう。

なので、今の形がしっくりくるということです。

横に並べるやり方は

tableタグを使ったやり方が良くネットで調べているとよくみるのですよ。

でもこれを、実際に使ってみるとレスポンスに対応されず形が崩れるのです。

これは困ったということで、他のを探してみると同じブログサービスを使っていらっしゃる方がいるではないですか。それも私の求めている答えがそこに・・・

このブログを参考にさせてもらいました

参考にと言いながらそのまま使わせてもらっているのですが・・・・

これから下記に書くコードはすべて「ふりむけばコウホウ」に書いていたもの引用させてもらっています。実際私もこのまま使っているのです。

許可とかはもらってなく勝手に紹介させてもらっています。

ＨＴＭＬコード

これを広告の貼りたいところに張り付ける。

これは、いじるところがないです。

ＣＳＳコード

ｃｓｓなのですが、これもそのまま使わせてもらっています。

/*——————————————————
AdSense（アドセンス）を横に並べるCS
——————————————————*/
.adbox {
float: left;
margin: 0px 0px 0px 0px;
padding: 0 2px;
}
.adboxcontainer {
overflow: hidden;
padding: 20px 0px 20px 0px;
}
/* clearfix */
.adboxcontainer:before,
.adboxcontainer:after {
content: “”;
display: table;
}
.adboxcontainer:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.adboxcontainer {
zoom: 1;
}

marginとかをいろいろいじったら、これがちょうどよかったですし、どっちかというと記事自体をを少しいじった感じですね。

そっちを合わせちゃったので、これもいじるのことが特にない

このままｃｓｓの所に張り付けました。

結果私のブログのような配置になります。

上の状態だとブログにも書かれていたんですが、300×250がちょうどいいです。

ちょうど広告と広告の間に隙間が出来ていい感じです。

なぜちょうどいいのに記事自体をいじった？と疑問の声が聞こえる。

耳が突然悪くなったのかな？

それは、300×250を使っていないからです。

記事の大きさ自体足りなかったので上のコードをどんなにいじろうと横がオーバーしてしまう。

このため記事自体をいじったというわけです。

いじった説明は以上