頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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に限った話ではありません。

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

01_GoogleAdSenseの左寄せ状態

GoogleAdSenseの左寄せ状態

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

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

直接HTMLで記述する

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

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

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

02_divタグによるセンタリング指定

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

CSSを利用して設定する

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

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

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

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

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

設定

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

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

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

03_コンテンツの設置とCSS指定1

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

表示

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

04_表示されたGoogleAdSenseユニット1

表示されたGoogleAdSenseユニット1

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

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

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

設定

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

05_コンテンツの設置2

コンテンツの設置2

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

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

06_CSS指定2

CSS指定2

表示

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

07_表示されたGoogleAdSenseユニット2

表示されたGoogleAdSenseユニット2

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Seesaa, 無料ブログ , ,

  関連記事