ヘッダー広告の移動

ある方がライブドアに問い合わせた結果、以下のような返答が ・・・。


さて困りました。無料プランならわかりますが、有料プランのライブドア PRO 使用者にすれば、なんか納得がいきません。 ・・・ でも、規約は規約。言うこと聞くしかなさそうです。

ん でも待てよ ・・・ 結局、表示させていれば問題ないんだ！ どこに表示させるかは規約の中では明記されていない。ということは、ヘッダー広告を足元 （ アウトフッター ） に移動させても良いのかな な〜んて AQ の勝手な解釈で、カスタマイズしてみました。

※ この記事の内容は、勝手な解釈においてのカスタマイズです。試みるさいは、ご自身でよく判断して自己責任にておこなうよう、お願い致します。
■ 4つ の HTML （ トップページ ・ 個別記事 ・ カテゴリー ・ 月別 ） と CSS （ スタイルシート ） をカスタマイズします。

各 HTML を上から順に目で追ってみると、<a name="top"></a> というものが見つかると思います。（ 無いテンプレートも存在するかも知れません ） そのすぐ下に、こういう部分があります。


この部分すべてを、アウトフッター部分に移植します。

赤い字 の部分は、「 重要な部分になりますよ！ 」 という意味で色を変えてあります。上のグレー枠の中に記載してある HTML タグすべてが、ヘッダー広告を表示させる為のものです。

ではこれを移動させましょう ・・・

移動させる位置は、各 HTML の一番最後のタグ、</html> のすぐ上に入れるのが良いでしょう。使用するテンプレートによっては <div id="footer"></div> だけでなく、<div id="outfooter"></div> のタグが存在するテンプレートもあり、AQ はこの後者のタグ <div id="outfooter"></div> の中に入れているのですが、テンプレートの構造により入れるところが違うと、ブログ全体の表示が崩れる場合があるみたいです。

色々と検証してみた結果、一番最後のタグ </html> のすぐ上に入れると、テンプレートが変わっても無事に問題なく表示される事がわかりました。さあ、これができましたら各 HTML を保存し、再構築をかけて下さい。

できればまず、トップページだけカスタマイズされることをお薦めします。その後、問題なく設置できたことを確認した上で、残りの HTML をカスタマイズして下さい。

ヘッダー広告の中には、画像で背景を表示し、枠のような形のタイプと、テキストだけで表示するタイプの２種類があります。前者の、背景が画像のタイプの場合は、これでカスタマイズ終了です。
綺麗に表示されている事でしょう。

問題は、テキストだけで表示されているタイプの場合です。これの場合は、閲覧するブラウザーによって表示が崩れて見える場合があります。例えば、Windows の IE では綺麗に中央よりに表示されるのに、firefox や Netscape では、左よりに引っ付いて表示される場合があります。また、ブラウザーの底に引っ付いた状態で表示されるかも知れません。

これを解消するには、前述の移動させるヘッダー広告の HTML タグの前に <div align="center"> を。そして、タグの一番最後に </div> を付けて閉じます。これで中央よりに表示されます。ブラウザーの底に引っ付くのを防ぐには、さっき説明した閉じる為のタグ </div> の後ろに、<br> を入れて改行して下さい。１個で足りなかったら、<br><br> と入れれば OK！

または、CSS （ スタイルシート ） で各所を調整してもかまいません。CSS （ スタイルシート ） の中の、#header{} と書かれている部分が、ヘッダー広告の指示をしています。前述の HTML タグの 赤い文字 に対してこの #header{} が、リンク文字の色や大きさなどの指令を出しているんです。

ここを色々と変えてみて、好みの表示状態になるように調整して下さい。保存、再構築を忘れずに 頑張って下さい。(^^)

■ 関連する参考記事

■ 追記 ： （ 2006年04月09日 ）