Seesaa™ブログに設置したGoogle™AdSense広告のレイアウトをセンタリングする

2013/11/14 2014/11/22

Google™AdSenseなどを始めようとして思ったところに広告を挿入したまではよいが、
位置が左寄せになってしまいませんか。
Seesaaブログの各配置位置に合わせて、センタリングする方法をご紹介します。

はじめに

無料ブログサービスでカスタマイズをとなると、
様々な制約やルールの上で、編集をしていくことになります。

Google AdSenseの設置の場合にも同様です。

GoogleAdSenseをSeesaaブログに設置する方法は、
コンテンツを利用した設置方法とHTML直接編集による設置が選べますが、
どちらで設置するかは好みかと思います。
以下の投稿を参考にお好きな方法で設置してください。
Google™AdSense広告をSeesaaブログに設置する方法(PC・コンテンツ)
Google™AdSense広告をSeesaa™ブログに設置する方法(PC・HTML)

2014/01/06追記
Seesaaに限らずAdSenseユニットのレイアウト例について以下でご紹介しています。
Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

GoogleAdSenseコードをそのまま貼ると左寄せ

通常、GoogleAdSenseのスクリプトコードを、
そのままブログに貼ってしまうと左寄せの表示になってしまいます。
これはSeesaaに限った話ではありません。

レイアウトの位置によっては、
直後の段落が回り込んで体裁が乱れているかもしれません。

GoogleAdSenseの左寄せ状態

今回は以下のようなGoogle AdSenseの非同期コードを利用します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- banner_468-60 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-8700000000000016"
     data-ad-slot="3500000088"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:60px"

data-ad-client="ca-pub-8700000000000016"

data-ad-slot="3500000088"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Seesaaブログでレイアウトを調整する方法

直接HTMLで記述する

一番簡単な方法がこのHTMLで直に記述してしまう方法です。
基本的にはコンテンツでもHTML直接編集でも対応は同じです。

Google AdSenseから提供されるスクリプトコードを、
<div align=”center”>～</div>で囲んでしまえば終了です。

<div align="center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- banner_468-60 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-8700000000000016"
     data-ad-slot="3500000088"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:60px"

data-ad-client="ca-pub-8700000000000016"

data-ad-slot="3500000088"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

実際に表示すると以下のようになります。

divタグによるセンタリング指定

CSSを利用して設定する

Google AdSenseから提供されるスクリプトコードの設置でいえば、
コンテンツ向け広告が３個、リンクユニットが２個、検索ユニットが２個で、
多く設置したとしても７スクリプトコードの設置が限界です。

しかし、この７つの表示を一括で行おうと思った際には、
やはりCSSによって一括指定する必要があります。

SeesaaブログにおいてCSSを変更する方法は、
以下の投稿でご紹介していますので、参考にして頂ければと思います。
Seesaa™ブログでCSSによるカスタマイズを行う方法

divタグに記述したセンタリング方法を採用する

<div align=”center”>～</div>でコンテンツを配置する方法から、
CSSによるクラス指定でセンタリングを行います。

設定

先ほど、<div align=”center”>～</div>で囲んだ部分を、
以下では<div class=”gad”>～</div>に変更しています。

<div class="gad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- banner_468-60 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-8700000000000016"
     data-ad-slot="3500000088"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:60px"

data-ad-client="ca-pub-8700000000000016"

data-ad-slot="3500000088"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

このdivに指定したクラス名に対して、CSSを設定します。
設定したCSSは以下のようなソースです。

ここで設定している[width:468px;]は、AdSenseの広告ユニットの幅です。
div要素ではサイズを指定しない場合、
上位のブロック要素幅になってしまいセンタリングされません。

div.gad{
width:468px;
margin: 0 auto;
}

div.gad{

width:468px;

margin: 0 auto;

}

コンテンツの設置とCSS指定１

表示

ブラウザで表示を確認します。
上部のマージンは合っていませんが、センタリングされます。

表示されたGoogleAdSenseユニット１

2013/11/20追記
本投稿をよくお読みいただいているようなので、
以下の<div>タグのクラス指定を行った場合でも、
divブロックの幅指定を行わずにセンタリングを行うことができる方法を以下でご紹介しています。
Google™AdSense広告のレイアウトをCSSでセンタリングする方法
併せてお読みいただけると幸いです。

CSSによる設定用に変更する

CSSからのセンタリングを行うことはできましたが、
divタグによる設定方法では、広告サイズの幅の数だけCSSを定義することになってしまいます。
これでは本末転倒になってしまいますので、
GoogleAdSenseのコードの貼り付け方を以下のように変更します。

設定

先ほど、<div align=”center”>～</div>で囲んだ部分を、
以下では<p class=”gad”>～</p>に変更しています。

<p class="gad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- banner_468-60 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-8700000000000016"
     data-ad-slot="3500000088"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:60px"

data-ad-client="ca-pub-8700000000000016"

data-ad-slot="3500000088"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</p>

コンテンツの設置２

ここでp要素に変更している理由として、
GoogleAdSenseのJavaScriptが実際に実行されると、
<iframe>～</iframe>として展開されて表示されます。
このiframe要素をpタグで囲むことによって、インライン要素の位置指定をしています。
実際にはｐ要素で表示しているパラグラフ(段落・文字)はありません。

CSSも合わせて変更します。

p.gad{
text-align:center;
}

p.gad{

text-align:center;

}

CSS指定２

表示

ブラウザで表示を確認します。
上部のマージンも修正され位置合わせが行われました。

表示されたGoogleAdSenseユニット２

さいごに

GoogleAdSenseのセンタリングといえば、
<div align=”center”>～</div>で囲むというのが一般的な対応なように感じます。

しかし、あえて<p>タグを用いてCSSによって位置指定を行う方が、
デザイン要素をHTMLに持ち込まないという意味でも、
私はスマートなのではないかと思います。

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

- Seesaa, 無料ブログ Google AdSense, Seesaaブログ, 無料ブログ

: Google Analyticsアクセス解析をはてなブログで利用する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google™AdSense広告をSeesaaブログに設置する方法(モバイルは無理)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google™ Analyticsアクセス解析をSeesaaブログで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google™AdSense広告をSeesaaブログで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google Analyticsアクセス解析をFC2で利用する方法(プラグイン)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google Analyticsアクセス解析をyaplogで利用する上の規約確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: ブックマークアイコン(ファビコン)をFC2で表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: １投稿(ページ)内に対して複数AdSenseアカウント(別ユーザ)を設定して運営が可能か

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: FC2™ブログでCSSによるカスタマイズを行う方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: ブックマークアイコン(ファビコン)をSeesaa™ブログで表示する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: Seesaa™ブログで独自タグで埋め込まれる要素のHTMLを変更する方法
NEXT: Seesaa™ブログの表示されるコンテンツを変更する方法

Seesaa™ブログに設置したGoogle™AdSense広告のレイアウトをセンタリングする

はじめに

GoogleAdSenseコードをそのまま貼ると左寄せ

Seesaaブログでレイアウトを調整する方法

直接HTMLで記述する

CSSを利用して設定する

divタグに記述したセンタリング方法を採用する

設定

表示

CSSによる設定用に変更する

設定

表示

さいごに

関連記事