>--> ページ位置を下げるのだ | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> ページ位置を下げるのだ

ページ位置を下げるのだ

Posted at: 2005-07-03 5

ここで紹介するのは、ページ本体の位置を下げて Blogger Navbar との距離をとる方法。

なぜこんなことをしようと思ったかといえば、ページ本体の最上部5,6ピクセルぐらいが、Blogger Navbar の下に入り込んで見えないから。これは最初に選択したテンプレートにもよると思うので、重なりが気にならないという人は読み飛ばしてください。

結論から言うと改行コードで下げることになるだけれど、単純に改行コードを入れればすむ、という問題でもないのです。

実際にやってみるとわかりますが、本文とサイドバーの下地がヘッダーから上へはみ出してしまうのです。その高さちょうど30ピクセル、これはこれまで Navbar の下に隠れていたものです。このようなことが起きるのは、再構築時に自動的に書き込まれるスタイルシートが原因です。このコードは再構築時につけられてしまうので、テンプレートの操作によってそれを除くことはできません。

ではどうすればいいのか。
それならそうで、該当するスタイルについてこちらが先に書いてしまおう、というのが今回のポイントです。

■1.スタイルシートに書き込む
管理画面「テンプレート」から
<head> 内スタイル指定部分の

#wrap {
  ...
}
 に
#wrap {
  padding-top: 0px !important;
  ...
}
 と赤字の部分を挿入します。

■2.改行タグを入れる
同じく管理画面「テンプレート」で
<body> のすぐ後に <br /> を好きな数だけ書き込みます。

<body>
  <br /><br /><br />
  <div id="wrap"> ...

以上2つの作業でページが Navbar から離れる…ようになるはず。
こんなつたない説明でみなさん理解出来ますでしょうか?


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:5

  1. Blogger のエンコードを変更したせいで、文字化けしてしまったコメントを削除しました。ごめんなさい。以下もとのコメントを転記します。
    - - - - - - - - - - - - - - - - - -
    セイゾーさん の発言...

    はじめまして。僕もbloggerを使ってブログを書いています。なのでクリボウさんの記事が参考になりますね。ありがたいっす。

    ReplyDelete
  2. Blogger のエンコードを変更したせいで、文字化けしてしまったコメントを削除しました。ごめんなさい。以下もとのコメントを転記します。
    - - - - - - - - - - - - - - - - - -
    陽さん の発言...

    はじめまして。
    ブログリスト登録してくださっていたんですね。
    ありがとうございます。
    ここ読んだらもうちょっと賢く使えるのかしら・・・RSSPINGが飛ばせないとか嘆いてるのは私だけですか?(汗

    ReplyDelete
  3. Blogger はたしかに PING が面倒ですね。僕も新記事を書くたびに BlogPeople のぶろっぐぴんぴんで PING を飛ばしています。他にいい手はないんでしょうかね…(汗

    ReplyDelete
  4. この記事だけでなく、他にもいろいろと参考にさせてもらっています。
    実はとてもページ位置について気にしていたので、この記事が大変役に立ちましたー!

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.