人生と時間は使いよう

人生と時間は使いよう

趣味や本、ニュース、愚痴やそのとき思ったことなどなど 好きかって書いている雑記ブログです

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



こんにちは


ジョーカーです


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


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


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

 

配置の仕方は?


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



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


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


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

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

横に並べて理由は?



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


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


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




横に並べるやり方は

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

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


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



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

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

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


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

HTMLコード


スポンサーリンク


広告コード


広告コード


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


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

CSSコード

 
cssなのですが、これもそのまま使わせてもらっています。
/*------------------------------------------------------
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とかをいろいろいじったら、これがちょうどよかったですし、どっちかというと記事自体をを少しいじった感じですね。

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

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

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

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

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

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

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

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

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

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

いじった説明は以上

まとめ


bloggerを使っている人は良ければ使ってみてください。

私が考えたわけではないので私が言うのはおかしいですけどね!!

サイドバーに貼っている方が、位置的にはいいのですが、私のだとスマホで見るとサイドバーの物が記事の下に来るので、最悪の場合広告が三つ縦に並んでしまうようになってしまう。

なので、サイドバーには貼っていません。

サイドにはアドセンス以外の物を使ってますけどね。

今ではドメインの広告です。

これから考えて配置換えは行うとは思います。

今回はここまで

広告を非表示にする