Seesaa™ブログのHTML構造とタグ挿入位置の関係
2014/11/22
GoogleAdSense™などを始めようとして、
思ったところに広告が挿入できないといったことは、
おそらくどこのブログを利用していても経験することかもしれません。
今回は比較的普及しているSeesaa™ブログに対して、
HTML編集をして任意の位置にバナーを挿入する方法をご紹介します。
といっても、大したことではなくHTMLの知識があれば、
見ただけでわかってしまうことなんだとは思うけれど。
はじめに
無料ブログサービスでカスタマイズをとなると、
様々な制約やルールの上で、編集をしていくことになります。
単に挿入したパーツの位置合わせをするというだけであれば、
提供されたコードをdivタグ(<div align=”center”>)で囲んで、
位置指定を行えばいいというだけです。
1 2 3 4 5 |
<div align="center"> <script type="text/javascript"> (GoogleAdsenseなどのコード) </script> </div> |
またセンタリングを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]のマークを配置して、表示を確かめます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 |
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title><% if:extra_title %><% extra_title | remove_emoji %><% if:current_page > 1 %> (<% current_page %>)<% /if %>: <% /if %><% blog.title %></title> <meta name="description" content="<% if:extra_title %><% extra_title | nl2br | tag_strip | remove_emoji %>,<% /if %><% blog.description | nl2br | tag_strip | remove_emoji %>" /> <meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | remove_emoji | tag_strip %><% extra_keywords | oneline | tag_strip %>" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <% blog.ogp_tag(article_for_ogp) %> <link rel="alternate" media="handheld" type="text/html" href="<% mobile_link_discovery %>" /> <link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" /> <link rel="stylesheet" href="<% site_info.blog_url %>/css/user-common.css" type="text/css" /> <link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" /> <% if:blog.has_foaf -%> <link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" /> <% /if -%> </head> <body> <p>★1<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> <div id="container"> <p>★2<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> <script type="text/javascript" language="JavaScript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script> <div id="banner"> <p>★3<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> <% content_header %> <p>★4<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> </div> <% if:have_content_left -%> <div id="links-left"> <p>★5<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_square-200-200.png" width="200" height="200"></p> <% content_left %> <p>★6<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_square-200-200.png" width="200" height="200"></p> </div> <% /if -%> <div id="content"> <p>★7<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_rectangle-big336-280.png" width="336" height="280"></p> <% content_main %> <p>★8<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_rectangle-big336-280.png" width="336" height="280"></p> <% if:page_name eq 'comment' -%> <div id="comments"> <div class="comments-head">"<% article.subject | tag_break %>"へのコメント<br /></div> <div class="comments-head">コメントを書く</div> <form action="/pages/user/comments2/regist/input" method="post"> <input type="hidden" name="article_id" value="" /> <input type="hidden" name="article_child__article_id" value="" /> <div class="comments-body"> <% if error_code %> <font color="#ff0000">ERROR</font> : <% if error_code eq '1' %> 投稿に失敗しました。 <% /if %> <% if error_code eq '2' %> 未入力項目があります。 <% /if %> <% if error_code eq '3' %> 認証コードのチェックに失敗しました。 <% /if %> <% if error_code eq '4' %> 半角英数字のみのコメントは受付ません。 <% /if %> <br /> <% /if %> お名前: <% article_child__writer | html %><br /> <input type="hidden" name="article_child__writer" value="" /><br /> メールアドレス: <% article_child__email | html %> <br /> <input type="hidden" name="article_child__email" value="" /><br /> ホームページアドレス: <% article_child__homepage | html %><br /> <input type="hidden" name="article_child__homepage" size="50" value="" /><br /> コメント: <br /> <% article_child__body | html | nl2br | clickable('target="_blank" rel="nofollow"') %> <input type="hidden" name="article_child__body"> <% if:blog.ignore_setting.captcha_comment -%><input type="hidden" name="captcha_comment" /><% /if -%> <br /> <input name="posted" type="submit" class="input-submit" value="書き込む"> <br /> </div> </form> <form action="/pages/user/comments2/regist/input" method="post"> <div class="comments-body"> お名前: <% if:blog.ignore_setting.fill_writer %>[必須入力]<% /if %><br /> <input type="text" name="article_child__writer" size="50" value="" /><br /> メールアドレス: <% if:blog.ignore_setting.fill_email %>[必須入力]<% /if %><br /> <input type="text" name="article_child__email" size="50" value="" /><br /> ホームページアドレス: <% if:blog.ignore_setting.fill_homepage %>[必須入力]<% /if %><br /> <input type="text" name="article_child__homepage" size="50" value="" /><br /> コメント: <% if:blog.ignore_setting.fill_body %>[必須入力]<% /if %><br /> <textarea name="article_child__body" rows="10" cols="50"></textarea><br /> <input type="hidden" name="article_child__article_id" value="" /> <input type="hidden" name="article_id" value="" /> <% if:blog.ignore_setting.captcha_comment -%> 認証コード: [必須入力]<br /> <img src="<% blog.ignore_setting.page_url_captcha_comment -%>" /><br /> <input type="text" name="captcha_comment" size="50" value="" /><br /> ※画像の中の文字を半角で入力してください。<br /> <% /if -%> <% if:blog.ignore_setting.banascii_comment -%> <% /if -%> <% if:article.accept_comment_permission_mode -%> ※ブログオーナーが承認したコメントのみ表示されます。<br /> <% /if -%> <input name="need_confirm" type="submit" class="input-submit" value="確認する" /><input name="posted" type="submit" class="input-submit" value="書き込む" /> </div> </form> </div> <% /if -%> <% if:page_name eq 'search' -%> <% loop:list_article %> <div class="blog"> <h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2> <div class="blogbody"> <h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3> <div class="text"><% article.entire_body | text_summary(240) %></div> <div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div> </div> </div> <% /loop %> <% /if -%> <% if:page_name eq 'tag' -%> <div class="tag"> <% if:tag %><div class="tag-title">タグ / <% tag.word | html %></div><% /if -%> <br /> <% if:blog.has_usertag_ad -%> <div class="tag-body"> <% blog.usertag_ad_html(tag, css, 2) %> </div> <% /if %> <% loop:list_service -%> <div class="tag-body"> <div class="tag-service"><% tag_service.title %></div> <div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>' でSeesaa全体を検索する</a></div> <% if:tag_service.service_key eq 'articles' -%> <% loop:list_data -%> <div class="tag-article"> <div class="tag-article-title"><a href="<% article.page_url %>"><% article.subject %></a> <span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div> <!--<div class="tag-article-summary"><% article.entire_body | text_summary(240) | tag_strip %></div>--> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'photos' -%> <% loop:list_data -%> <div class="tag-photos"> <% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%> <table> <tr> <td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td> </tr> </table> <div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br /> <% if:photo_info -%> サイズ:<% photo_info.width %>×<% photo_info.height %><br /> <% if:photo_info.size %>容量:<% photo_info.size | filesize %><% /if %> <% /if -%> </div> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'audios' -%> <% loop:list_data -%> <div class="tag-audios"> <div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a> <span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %> <% /if %><% if:audio_info.duration %><% audio_info.duration | hms %> <% /if %><% if:audio_info.size %><% audio.size | filesize %> <% /if %><% /if -%></span></div> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'videos' -%> <% loop:list_data -%> <div class="tag-videos"> <table> <tr> <td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td> </tr> </table> <div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br /> <% if:video_info -%> <!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>--> 時間:<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br /> 容量:<% video.size | filesize %><br /> <% /if -%> </div> </div> <% /loop -%> <% /if %> <% if:tag_service.service_key eq 'files' -%> <% loop:list_data -%> <div class="tag-files"> <div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div> </div> <% /loop -%> <% /if -%> <% if:pager -%> <div class="tag-navi"> <% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %> <% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %> </div> <% else -%> <div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div> <% /if -%> </div> <% /loop -%> <script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script> <div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div> <script type="text/javascript" language="javascript"> //<![CDATA[ tag_cloud("tag_cloud"); //]]></script> <br /> </div> <% /if -%> <p>★9<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_rectangle-big336-280.png" width="336" height="280"></p> </div> <% if:have_content_right -%> <div id="links"> <p>★10<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_square-200-200.png" width="200" height="200"></p> <% content_right %> <p>★11<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_square-200-200.png" width="200" height="200"></p> </div> <% /if -%> <div id="footer"> <p>★12<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> <% content_footer -%> <p>★13<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> </div> <p>★14<img src="http://algorhythnn.up.seesaa.net/image/seesaa_insert_contents_bigbanner-728-90.png" width="728" height="90"></p> </div> </body> </html> |
参考までに、コンテンツの配置はこのようになっています。
表示の確認
上部の表示
バナーを配置する前の表示は以下のようになっています。
★Xの赤文字はバナーが挿入され表示される位置を表しています。
これに対して、バナーを表示すると以下のようになります。
下部の表示
バナーを配置する前の表示は以下のようになっています。
これに対して、バナーを表示すると以下のようになります。
総括
このことから、全体幅の大きいバナーであれば[★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. の商標です。
関連記事
-
Seesaa™ブログでCSSによるカスタマイズを行う方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Microsoft Expression Web 4(日本語版)のダウンロードとインストール
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
ブックマークアイコン(ファビコン)をyaplogで表示する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Seesaa™ブログでテンプレートをコピー(複製)する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Seesaa™ブログでHTMLの修正を行う方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google Analyticsアクセス解析をyaplogで利用する方法(HTML)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™AdSense広告をSeesaaブログで利用する上の規約確認
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
FC2ブログでテンプレートをコピー(複製)する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google Analyticsアクセス解析をFC2で利用する上の規約確認
Google or AdMax Promotion(it) 禁断の機能がau公式 …