AdSense(アドセンス)の広告を横に2つ並べてBloggerで設置したいとき(レスポンス対応)

おすすめ記事ピックアップ

AdSense(アドセンス)の広告を横に2つ並べて表示したいですよね。クリック率が高くなるとかで。横に1列に表示される方法ですが、検索するとtableタグを使ったやり方しか見つかりませんでした。tableタグを使うと、レスポンスに対応できないので、良くない悪い設定方法なんです。

cssをちょっと知っている人なら、ボックス作ってフロートすれば、いいんでしょう?という感じだと思います。ボックス作ってフロートするやり方はいろいろあるので、あくまでも一例として設置方法説明します。cssで作ればこんな風に、横幅が足りないときは、縦並びになります。


横に並べるためのCSSコード

参考のCSSコード(どこかCSSのサイトを参考にして作ったコードです。参照元をリンクしたかったのですが、どこのサイトだか分からなくなってしまいました。すいません。clearfixあたりの書き方を引用しました。)です。BloggerのCSSのエリアにでも張り付けてください。

マージンで上下のスペースを調整したり、パディングで隙間など調整してください。

/*------------------------------------------------------
AdSense(アドセンス)を横に並べるCSS
------------------------------------------------------*/
.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;
}


HTMLコード

記事の見出し直下や、記事の最後などに表示させるために、HTMLのテンプレートに張り付けることを前提に書いています。HTMLのテンプレートのどこに記述するべきかは、自分で探すほかありません。コンテナを作ってボックスでフロートしています。

<div class='adboxcontainer'>

<div class='adbox'>
※ここにアドセンスのコードを張る
</div>

<div class='adbox'>
※ここにアドセンスのコードを張る
</div>

</div>



AdSense(アドセンス)のコードは、BloggerのHTMLテンプレートに直接書くエラーがでるはずなので、文字参照して張り付けてください。

なんでも文字参照するサービス
http://furimuke.sub.jp/changemoji/cal.html

実際に張り付けるときは、こんな感じになります。AdSense(アドセンス)のコードを一部文字参照しています。こうすればエラーが出ず、Bloggerに設置できます。

あと300×250のAdSense広告のみで設定すると良いかもしれません。レスポンスタイプや、異なるサイズの広告を入れるとぐちゃぐちゃになるかも。







いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : AdSense(アドセンス)の広告を横に2つ並べてBloggerで設置したいとき(レスポンス対応)
AdSense(アドセンス)の広告を横に2つ並べてBloggerで設置したいとき(レスポンス対応)
AdSense(アドセンス)の広告を横に2つ並べて表示したいですよね。クリック率が高くなるとかで。 横に1列に表示される方法ですが、検索するとtableタグを使ったやり方しか見つかりませんでした。tableタグを使うと、レスポンスに対応できないので、良くない悪い設定方法なんです。
https://4.bp.blogspot.com/-dwGC-SWZdGo/ViJKOMyXXHI/AAAAAAAAfH8/HCW1BCEGc74/s320/001.png
https://4.bp.blogspot.com/-dwGC-SWZdGo/ViJKOMyXXHI/AAAAAAAAfH8/HCW1BCEGc74/s72-c/001.png
ふりむけばコウホウ
http://www.furimuke.com/2015/10/adsense-blogger.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/10/adsense-blogger.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy