livedoor™ブログのHTML構造とタグ挿入位置の関係(を調べる方法)
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ソースの編集画面を開くと人によってソースは異なっていると思います。
また2カラム構造や3カラム構造など、構造や挿入したい部分などもまちまちでしょう。
その為、採用しているlivedoorのテンプレートに合わせて、
挿入位置を調べる必要があります。
HTMLの全てを読む必要はない
そうした挿入位置の調べ方は、以下でご紹介しています。
無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法
この投稿ではFC2を元に書かせていただいていますが、
Chrome™を利用して、こういう手順でHTMLのあたりをつければ、
効率的に編集ができるという感覚がなんとなく理解していただけると思います。
総括
HTMLの全編集が可能な点はメリットでもありますし、
むしろ制約がある方が、長期的な運営をしていく上では、大きな足かせになってしまいます。
しかし、HTMLに抵抗のある人には、
こうした方式は負担が大きいのかなと思います。
でも将来的に考えれば、最初からフルカスタマイズが可能なシステム上で、
運営していくことをお勧めします。
livedoorはLINE株式会社の登録商標(第4451585号)であり、
livedoorブログはLINE株式会社のサービス名称です。
livedoorロゴ、アイコンその他のマーク等はLINE株式会社の商標であり、LINE株式会社の著作物です。
Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願2011-80184号および、商願2011-80187号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号:773982
関連記事
-
livedoor™ブログでCSSによるカスタマイズを行う方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログ(PROプラン)のFTP接続方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™AdSense広告をlivedoor™ブログで利用する際の既存広告の変更
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログで他人のサイトが利用しているテンプレートを確認する方法(PC)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログ有料プラン(PRO)の申込み手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログ(PRO)への独自ドメインの割り当て(お名前.com編)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログの投稿者別アーカイブを外部サイト(WordPress)へ転送(PC)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログで使ってはいけない忍者アナライズアクセス解析
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログでテンプレートをコピー(複製)する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
livedoor™ブログ(PRO)への独自ドメインの割り当て(livedoorドメイン編)
Google or AdMax Promotion(it) 禁断の機能がau公式 …