livedoor™ブログのHTML構造とタグ挿入位置の関係(を調べる方法)

2013/11/26 2014/11/22

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

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

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

はじめに

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

単に挿入したパーツの位置合わせをするというだけであれば、
提供されたコードをdivタグ（<div align=”center”>）で囲んで、
位置指定を行えばいいというだけです。
単純に位置指定の方法であればAdSenseを例に以下でご紹介しています。
Google™AdSense広告のレイアウトをCSSでセンタリングする方法
 Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

フルカスタマイズはHTML理解が必須

しかし、そもそもどこに挿入すると、表示したい位置に挿入できるのかがわからないといった時には、
livedoorのブログを構成しているHTMLを理解する必要があります。

とはいえ、livedoorではHTMLもフルカスタマイズが可能で、
人によっては全く別のHTMLを利用していることもありますし、
有志の方が作ってくれたテンプレートを採用していることもあるかもしれません。

その為、livedoorでは「こう！」といった編集方法が提示できません。
これがおそらくSeesaa™ブログよりも少し敷居が高いように感じてしまう点かもしれません。

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

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

またHTMLの編集方法については以下の投稿を参考にして頂けたらと思います。
livedoor™ブログでHTMLの修正を行う方法

livedoorブログでHTMLソースの編集画面を開くと人によってソースは異なっていると思います。
また２カラム構造や３カラム構造など、構造や挿入したい部分などもまちまちでしょう。

その為、採用しているlivedoorのテンプレートに合わせて、
挿入位置を調べる必要があります。

HTMLの全てを読む必要はない

そうした挿入位置の調べ方は、以下でご紹介しています。
無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法

この投稿ではFC2を元に書かせていただいていますが、
Chrome™を利用して、こういう手順でHTMLのあたりをつければ、
効率的に編集ができるという感覚がなんとなく理解していただけると思います。

総括

HTMLの全編集が可能な点はメリットでもありますし、
むしろ制約がある方が、長期的な運営をしていく上では、大きな足かせになってしまいます。

しかし、HTMLに抵抗のある人には、
こうした方式は負担が大きいのかなと思います。

でも将来的に考えれば、最初からフルカスタマイズが可能なシステム上で、
運営していくことをお勧めします。

livedoorはLINE株式会社の登録商標（第４４５１５８５号）であり、
livedoorブログはLINE株式会社のサービス名称です。
livedoorロゴ、アイコンその他のマーク等はLINE株式会社の商標であり、LINE株式会社の著作物です。

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