無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法

2013/11/22 2014/11/22

無料ブログサービスのHTML編集と聞いて、一体どこに書けばいいのかわからない。
どこに挿入したら、Google™AdSenseのような広告バナーなどを挿入できるのかわからない。
そんな表示したい場所に挿入するには「どこに」挿入すればいいかを調べる方法をご紹介します。

はじめに

無料ブログサービスを利用するにあたって、
どうして無料のブログサービスを利用するのか。

それは、詳しい知識がなくてもすぐにブログを始めることができ、
あらかじめ用意されている収益化プログラムなどを利用できることは大きいことと思います。

しかし「詳しい知識がなくても」というのは、最初のうち。
すぐに、慣れてしまってあーしたいこーしたいといった欲求が出てくると思います。

無料ブログサービスの難しい点がここにあります。

初心者なのは最初だけ

最初はわからないながらに始めたブログも、
段々勝手がわかってきて詳しくなった頃には、
引っ越そうにも無料ブログサービスのドメインを利用して、
膨大なコンテンツ（投稿）がインデックスされ、アクセスを生んでいます。

そう、詳しくなった時にこれまでの蓄積を捨てることもできず、
新たに自分の身の丈にあったブログシステムを選んで１からやり直すことになったりします。

幸運にもHTMLが編集できるなら

そんななか、幸いにもHTMLを編集できるような無料ブログサービスを、
選択している場合には、あーしたい、こーしたいといった欲求を満たして、
より長くブログを楽しんでいくことができると思います。

HTMLというと、あの何を書いてあるかわからない
英字のやら<>の羅列でよくわからない。

そんな感じかもしれません。

しかし、ブログサービスには、マウスでドラッグして新しくパーツを追加できるようなものもあれば、
基本的にHTML編集ができるようにしてあるから、好きにして！っていうものもあります。

そんなHTMLの編集を行う際にどこに何を挿入したら、
Google™AdSenseといったような画面に表示を行うようなコンテンツの追加が行えるのか。

HTMLの編集を開始する際のエントリーとしての操作方法をご紹介します。

テンプレートは様々

今回はFC2™ブログを例にご紹介します。

FC2ブログではテンプレートを選択して、
有志の方が作成してくれたデザインを採用することができます。

こうしたテンプレートは作成してくれた人が、
目指したデザインを実現するために、自由なフォーマットで書かれています。

今、採用しているブログのデザインに合わせて、
どのような構造でHTMLが書かれているのかを知ったうえで編集を始める必要があります。

大まかな構造の理解

私の利用しているFC2ブログは以下のURLなのですがこちらを開くと以下のように表示されます。
これは、投稿のページになります。
例）　FC2™ブログのHTML構造とタグ挿入位置の関係(を調べる方法) – ええかげんブログ(FC2支店)
※こちらには私の収益化プログラムは導入してません、PVは何のメリットもありません
また、本投稿時点では、本文はテスト投稿です。

変更対象ブログ

さて、この殺風景なブログの状態に対して、何かGoogleAdSenseなどを挿入しようと思った際に、
どのように考えますか？

ヘッダーのブログタイトルの下に入れたい
投稿のタイトル前または後に入れたい
サイドバーの上または下にいれたい

ぱっと浮かぶの挿入位置はそんな感じです。
投稿の真ん中に入れたいというのは、まぁあまりお勧めはできないかと。
（１つの投稿を行うたびに、毎回GoogleAdSenseのコードを貼る必要がありますし・・・）

では、ブログタイトルヘッダー部分を例に構造を見ていきます。

Google Chromeを利用

ここでは、GoogleChromeを利用して説明させて頂きます。
もしインストールされていないようでしたら、以下を参考にインストールされてもいいかもしれません。
Google™Chromeインストール方法と初期状態

また、以下で構造を見ているデベロッパーツールは、
Chromeでブラウジングしている際に利用できるのですが、
どのように操作していくのかといった細かい方法は、以下でご紹介しています。
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

ヘッダータイトル領域の構造

では、先ほどのブログページのタイトルヘッダー付近で右クリックして[要素を検証]を選択します。

要素を検証の選択

要素を検証をクリックすると、Chromeの下部または右などに
デベロッパーウィンドウが表示されたと思います。

デベロッパツールの表示

このデベロッパーウィンドウはHTMLやCSSに関する様々な情報を提供してくれます。
（それだけではありませんが）
次にデベロッパーウィンドウのHTML部分にマウスカーソルを持っていき、
ブログのタイトルヘッダーに色がつく部分を探します。
<div id=”header”>行がタイトルヘッダーの領域を示している部分です。

タグ領域の確認１

また右の部分をスクロールすると、色分けされた四角の領域が表示されます。

前の画像で[764px]として表記した部分のサイズは、
以下の色分けされた領域の[水色]部分を示しています。

領域サイズの確認

デベロッパーウィンドウ内のHTMLが表示されている
各行の三角マークをクリックして下向き(▼)にしてHTMLを展開します。

展開すると、省略表示されているHTMLが表示されるようになります。

展開した行に、マウスカーソルを合わせると、
同じようにそれぞれの領域が反転されて確認できます。

タグ領域の確認２

タグ領域の確認３

ブログのタイトルヘッダー部分のHTMLの構造は以下のようになっていることがわかります。

各領域の構成

また、このFC2ブログのテンプレートの元のHTMLを合わせて確認してみます。
HTMLは以下のようになっています。

HTMLの構造

尚、FC2ブログのHTMLの確認・編集方法については以下の投稿でご紹介しています。
FC2™ブログでHTMLの修正を行う方法

FC2ブログのタイトルヘッダー部HTMLの例（採用するテンプレートによって異なる）

<body> . <div id="container"> . <div id="inner_container" class="clearfix"> . <div id="header"> . <div id="title_wrapper"> . <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a> . </h1> . <p><%introduction></p> . </div> . <img src="http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_header_icon.png" width="63" height="62" /> . </div> . . <div id="calendar">

と、ブラウザから確認した状態とは少し異なっていますが、
出力された各エリアがHTMLでも書かれているのがわかると思います。

尚、<%url>や<%blog_name>といった部分(<%～で始まる部分)は、
FC2ブログの独自タグでブラウザで表示した際に、別の文字で置き換わる部分です。

また、<!– /header –>や<!– calendar –>といった部分(<!– ～ –>部分)は、
コメントといって、HTMLでブラウザには出力されない部分です。

このようにデベロッパツールを利用したHTML構造の調査などを行う詳しい方法は以下でもご紹介しています。
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

これで、ヘッダー部分のタグの形をざっと理解することができました。
では、このタグの各場所に対して、画像を挿入して、表示がどうなるかを確認していきます。

テスト画像の挿入

テストに利用する画像は、GoogleAdSenseで利用されている、
各広告ユニットのサイズに合わせた画像を<img>タグで読み込んで表示します。
<div><img alt="468x60 - バナー" src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/07_banner_normal_468-60.gif" /></div>

実際に読み込むとこんな感じに表示されます。

広告ユニットについては以下でご紹介しています。
Google™ AdSenseの各ユニットサイズのレイアウト用画像

以下のようにFC2ブログのHTMLを編集します。

<body>
	<div id="container">
		<div id="inner_container"  class="clearfix">
			<div id="header">
			<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/17_linkunit-h_big_728-15.gif" /></div>
				<div id="title_wrapper">
				<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/18_linkunit-h_mid_468-15.gif" /></div>
					<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
					<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/08_banner_half_234-60.gif" /></div>
					<p><%introduction></p>
					<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/05_banner_mobile_320-50.gif" /></div>
				</div>
				<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/07_banner_normal_468-60.gif" /></div>
				<img src="http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_header_icon.png" width="63" height="62" />
			<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/03_banner_big_728-90.gif" /></div>
			</div><!-- /header -->

			<div id="calendar"><!-- calendar -->

<body>

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

</div>

</div>

実際に表示を確認すると以下のように表示されます。

テスト挿入例１

少し見にくいとは思いますが、各タグの挿入位置に対して画像が表示されています。
タイトルヘッダーに対して画像を表示しようと思った場合に、
横幅が不足して収まらない部分が、中の要素へ行くほど出てくるのがわかると思います。

一番下に配置した「728×90ビックバナー」のサイズは、
<div id=”header”>タグのコンテンツ幅(マージンを除く)の764pxには収まりますが、
<div id=”title_wrapper”>タグのコンテンツ幅(マージンを除く)の667pxには収まりません。

そうなると必然的に大きなバナーを挿入し表示したいと思った時には、
<div id=”header”>タグの内部で、<div id=”title_wrapper”>タグの外に配置すると、
綺麗に収まるであろうと分かります。

では、わかりにくいので「728×90ビックバナー」のみを挿入した例を以下に示します。

<body>
	<div id="container">
		<div id="inner_container"  class="clearfix">
			<div id="header">
				<div id="title_wrapper">
					<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
					<p><%introduction></p>
				</div>
				<img src="http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_header_icon.png" width="63" height="62" />
			<div><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/03_banner_big_728-90.gif" /></div>
			</div><!-- /header -->

			<div id="calendar"><!-- calendar -->

<body>

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

</div>

</div>

これで、見栄えの良さそうな位置に挿入を行うことができました。

テスト挿入例２

このようにして、挿入したいバナー（コンテンツ）のサイズを、
挿入したい場所の幅から適切なものを選択して挿入することで、
どこに対してタグを挿入すると丁度良い位置に表示ができるかの検討が行えます。

Chromeのこうしたデベロッパツールを利用することで、
挿入するのに適した位置を画面を見ながら確認することができ、
挿入位置を特定することがより簡単になります。

補足

このままでは左寄せで表示されてしまって、本当はセンタリングしたいなと思っているような場合には、
一番簡単な方法として、画像を挿入する際に囲んだ<div>タグを、
<div align=”center”>として囲むことでセンタリングが行えます。

<div align="center"><img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/09/03_banner_big_728-90.gif" /></div>

しかし、実際にはこの領域はマージンに36pxが設定されている為、
センタリングを行っただけでは、36pxを差し引いた領域内でセンタリングされます。
これは、別途CSSにてマージンの調整が必要です。

センタリングの例

こうしたコンテンツのセンタリング方法については以下の投稿でご紹介しています。
Google™AdSense広告のレイアウトをCSSでセンタリングする方法
 Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

場所が変わっても同じ手順

HTMLの構造の調べ方と、コンテンツ挿入位置の割り出しについては、
これであらかたの方法はわかっていただけたかと思います。

メインの投稿部分に挿入する場合も、サイドバーに挿入する場合も手順は同じです。
挿入したい位置の付近で右クリックして[要素を検証]を選択し、
挿入する部分が色付きで表示されるタグの直後などに挿入していけば狙った場所に挿入が行えます。

GoogleAdSenseスクリプトコードの設置例

最後に、画像を挿入した場合と同じですがGoogleAdSenseスクリプトコードを
挿入した例をご紹介しておきます。

これまでと同じで画像を挿入していた部分を、アドセンスコードに変更します。

<body>
	<div id="container">
		<div id="inner_container"  class="clearfix">
			<div id="header">
				<div id="title_wrapper">
					<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
					<p><%introduction></p>
				</div>
				<img src="http://blog-imgs-50.fc2.com/t/e/m/templates/cleanly_green_header_icon.png" width="63" height="62" />
				<div align="center">
					<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
					<!-- banner_728-90_btm -->
					<ins class="adsbygoogle"
				     	style="display:inline-block;width:728px;height:90px"
				    	data-ad-client="ca-pub-8700000000000016"
				     	data-ad-slot="4600000086"></ins>
					<script>
					(adsbygoogle = window.adsbygoogle || []).push({});
					</script>
				</div>
			</div><!-- /header -->

			<div id="calendar"><!-- calendar -->

<body>

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

</div>

<ins class="adsbygoogle"

style="display:inline-block;width:728px;height:90px"

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

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

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

</script>

</div>

</div>

以下のようにGoogleAdSenseが表示されます。

GoogleAdSenseの挿入

さいごに

基本的には、面倒そうなHTMLの編集とコンテンツの挿入ですが、
ブラウザのデベロッパモードをうまく活用することで、
HTMLのすべてを読んで、理解する必要もなく、
挿入を行いたい部分だけの領域やサイズなどを確認して、
挿入を行うことができるようになります。

おそらくHTMLの編集などに慣れている方は、
こうした方法も珍しいことではなく、日常にされていることではないかと思います。

尚、先ほどもご紹介しましたが、
以下の投稿では、デベロッパツールを用いて一時的にCSSの値を変更して、
その変更でどのような状態になるのか（カラム落ちするかなど）を
確認する方法をご紹介しています。
併せてお読みいただけると嬉しいです。
Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

FC2はFC2, Inc.の商標であり、FC2ブログはFC2, Inc.のサービス名称です。
FC2ロゴ、アイコンその他のマーク等はFC2, Inc.の商標であり、FC2, Inc.の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願２０１１－８０１８４号および、商願２０１１－８０１８７号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号：７７３９８２