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

Seesaa™ブログのHTML構造とタグ挿入位置の関係

      2014/11/22

GoogleAdSense™などを始めようとして、
思ったところに広告が挿入できないといったことは、
おそらくどこのブログを利用していても経験することかもしれません。

今回は比較的普及しているSeesaa™ブログに対して、
HTML編集をして任意の位置にバナーを挿入する方法をご紹介します。

といっても、大したことではなくHTMLの知識があれば、
見ただけでわかってしまうことなんだとは思うけれど。

はじめに

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

単に挿入したパーツの位置合わせをするというだけであれば、
提供されたコードをdivタグ(<div align=”center”>)で囲んで、
位置指定を行えばいいというだけです。

またセンタリングをCSSで行う方法は以下でご紹介しています。
Seesaa™ブログに設置したGoogle™AdSense広告のレイアウトをセンタリングする

HTMLの構造的なものであれば、
wordpressを利用していても一定のルールや作法があるので、
無料ブログに関わらず、何を使っていても同じかもしれません。

以下では3カラムレイアウトの構造を例にあげます。
SeesaaブログのHTMLファイルの構造は以下のようになっています。
(Seesaaを詳しくは知らないのですが、選んだテーマでも多少変わるかも)

SeesaaのHTML構造と各バナー挿入位置

SeesaaブログのHTMLの直接編集を行う際に、
各タグの間にGoogleAdSenseなどのソースを挿入するわけですが、
どこに挿入するかを熟知する必要があります。

またHTMLの編集方法については以下の投稿を参考にして頂けたらと思います。
GoogleAnalyticsの説明ですが、HTML編集方法は同じです。
Google Analyticsアクセス解析をSeesaaブログで利用する方法(HTML)

SeesaaブログでHTMLソースの編集画面を開くと、
以下のようなソースになっています。
おそらく構造はどのテンプレートも似たようなものだと思います(推測・・・)

<% content_main %>などの埋め込みタグの位置を参考に、
何を表示しているエリアなのかを知ることができます。

  • <% content_header %> = ヘッダの内容
  • <% content_left %>= 左カラムの内容
  • <% content_main %>= 中央のメイン内容
  • <% content_right %>= 右カラムの内容
  • <% content_footer -%>= フッタの内容

上記の各埋め込みタグの前後に対して、
画像のバナーと[★X]のマークを配置して、表示を確かめます。

各タグの位置の構造は以下のようになっています。
seesaa_insert_contents_st01

04_編集するテンプレートの選択

編集するテンプレートの選択

参考までに、コンテンツの配置はこのようになっています。

02_コンテンツの設定状態

コンテンツの設定状態

表示の確認

上部の表示

バナーを配置する前の表示は以下のようになっています。
★Xの赤文字はバナーが挿入され表示される位置を表しています。

03_ブログの表示(上部)

ブログの表示(上部)

これに対して、バナーを表示すると以下のようになります。

04_ブログの表示バナー表示(上部)

ブログの表示バナー表示(上部)

下部の表示

バナーを配置する前の表示は以下のようになっています。

05_ブログの表示(下部)

ブログの表示(下部)

これに対して、バナーを表示すると以下のようになります。

06_ブログの表示バナー表示(下部)

ブログの表示バナー表示(下部)

プロモーション(btm)

Google or AdMax Promotion (it)

総括

このことから、全体幅の大きいバナーであれば[★4]の
位置に挿入すれば綺麗に表示できるなどの推測ができます。

ご自分が表示したい位置に対応する挿入位置に
GoogleAdSenseなどのタグを挿入されればいいと思います。

ただ、こうした挿入をHTMLに対して行うものもいいのですが、

Seesaaブログであれば「コンテンツを追加」する方法の方が
スマートかなと思うところではありますが。

コンテンツに対して任意のソースを追加する方法については、
以下の投稿をご参考にされて頂けたらと思います。
※GoogleAnalyticsのコード挿入を例にしています。
Google Analyticsアクセス解析をSeesaaブログで利用する方法(プラグイン)

何かのお役に立てましたら幸いです。

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

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。

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


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - HTML, Seesaa, 無料ブログ , , ,

  関連記事

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

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

eye_windows
Microsoft Expression Web 4(日本語版)のダウンロードとインストール

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

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

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

eye_seesaa
Seesaa™ブログでテンプレートをコピー(複製)する方法

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

eye_seesaa
Seesaa™ブログでHTMLの修正を行う方法

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

eye_dev-test
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

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

eye_yaplog
Google Analyticsアクセス解析をyaplogで利用する方法(HTML)

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

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

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

eye_fc2
FC2ブログでテンプレートをコピー(複製)する方法

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

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

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