おすすめ記事ピックアップ
AdSense(アドセンス)の広告を横に2つ並べて表示したいですよね。クリック率が高くなるとかで。横に1列に表示される方法ですが、検索するとtableタグを使ったやり方しか見つかりませんでした。tableタグを使うと、レスポンスに対応できないので、良くない悪い設定方法なんです。
cssをちょっと知っている人なら、ボックス作ってフロートすれば、いいんでしょう?という感じだと思います。ボックス作ってフロートするやり方はいろいろあるので、あくまでも一例として設置方法説明します。cssで作ればこんな風に、横幅が足りないときは、縦並びになります。
AdSense(アドセンス)のコードは、BloggerのHTMLテンプレートに直接書くエラーがでるはずなので、文字参照して張り付けてください。
なんでも文字参照するサービス
http://furimuke.sub.jp/changemoji/cal.html
実際に張り付けるときは、こんな感じになります。AdSense(アドセンス)のコードを一部文字参照しています。こうすればエラーが出ず、Bloggerに設置できます。
あと300×250のAdSense広告のみで設定すると良いかもしれません。レスポンスタイプや、異なるサイズの広告を入れるとぐちゃぐちゃになるかも。
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広告のみで設定すると良いかもしれません。レスポンスタイプや、異なるサイズの広告を入れるとぐちゃぐちゃになるかも。