人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

アメブロのレイアウトやカスタマイズに詳しい方に質問です。

http://firestorage.jp/download/1abbac18f231ae20e45765d07d7547602cc347f0

に、私のブログのリンクが記載されているテキストファイルがあります。このファイルに記載されているブログについて、質問があります。
私のブログでは、ブラウザのウインドウを最大化すると、メニューバーは問題なく表示されるのですが、最大化ではなく幾ばくか縮小すると、それに連動して、メニューバーの縦位置が、ヘッダ画像とずれてしまうのです。
この状態を解消するにはどのような対処をすればよいのか、どのようなCSSを書けばよいのか、お教えいただければ幸いです。
よろしくお願いします。

※現状、ヘッダ画像とメニューバーは重なっていますが、重なっているのは問題ありません。メニューバーの縦位置とヘッダ画像の縦位置が、ウインドウが最大の時は一致しているのに、ウインドウを縮小すると位置がずれるのを解消したいのです。


●質問者: moon-fondu
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kodairabase
●10ポイント

Firefox,GoogleChrome,IE9ではメニューバーの位置はずれないのですが、どのようなブラウザで問題が発生しているのでしょうか?


moon-fonduさんのコメント
すみません、私の質問が不十分でした。 http://f.hatena.ne.jp/moon-fondu/20120108013831 をご覧いただきたいのですが、メニューバーとは、私自身が作成したもののことです。 上記画像では、メニューバーがヘッダ画像から飛び出てることが伺えるかと思います。 Firefox、Chrome、IE8のすべてで発生しています。 ブラウザの大きさに依存せず、縦位置(x座標)をヘッダ画像と同じ位置に固定しておきたいのですが・・・

2 ● きゃづみぃ
●10ポイント

メニューバーの位置を違うところにしたらいいのでは ないでしょうか?

たとえば プロフィールの上とか 下とかに


moon-fonduさんのコメント
すみません、メニューバーとは、私が自作したバーのことで、アメブロのメニューバーではありません、説明が不十分ですみません(>_<) http://f.hatena.ne.jp/moon-fondu/20120108013831

きゃづみぃさんのコメント
だから レイアウトの変更がいいのでは ないのかと思った次第です。

3 ● Cherenkov
●300ポイント ベストアンサー
ul#gnavi {
 left: 302px;
 position: absolute;
 top: 460px;
 width: 980px;
}

この部分を以下のように変えて

ul#gnavi {
 left: 0px;
 position: absolute;
 top: 0px;
 width: 980px;
}

さらに以下を追加してみてください。

.skinContentsArea {
 position: relative;
}

.skinContentsArea2 {
 margin-top: 75px;
}

基点となるposition: relativeをどこに打つかがミソです。


参考:アメブロの上のペタ広告でCSSメニューがずれない方法・備忘録|格安ホームページリニューアル職人の失敗しないWebリフォーム術


Cherenkovさんのコメント
あれ…また質問を独自解釈してピントがずれた回答してるかも…。 >重なっているのは問題ありません 読んでませんでした…。 縦位置がずれる問題が観測できないので、使用しているブラウザとスクリーンショットと説明書きがあると回答がつきやすいと思います。

moon-fonduさんのコメント
すごいです、うまくいきました! 縦位置がずれる問題は、 http://f.hatena.ne.jp/moon-fondu/20120108013831 のようにあったのですが、Cherenkovさんのおかげで解消できました! しかも、ヘッダ画像の大きさも980px×460pxで大きすぎてメニューバーと重なっていたので、それはメニューバーの縦位置のずれを解消してから取り組もうと思っていたのですが、同時に解消してくださるなんて! ありがとうございます(^_^;) もしよろしければ、理由も教えていただけないでしょうか? skinContentsArea2というのが何のために必要なのかも気になりまして。

Cherenkovさんのコメント
FirebugでHTMLタブを開きながら説明します。 CSSの適用は毎回ファイルを書き換えるのではなく、Stylishを使いながら試していくと更新しなくても適用されるので楽です。 まず、#gnaviのposition: absoluteに対応する基点(position: relative)をどこに打つのか決めます。 基点は#gnaviの直系の先祖ではないと効果がありません。 #gnaviはヘッダー画像と同じ幅でそのまますっぽり下の位置にくるようにしたい。 実際の#gnaviからDOMの親から親へ辿っていくと、 .layoutContentsA, .skinContentsArea2, .skinContentsAreaあたりを基点にするとよさそうです。 なぜならX座標が自動的にヘッダー画像と同じだからです。 .skinContentsFrame まで上がってしまうと、X座標はウィンドウの端まで伸びてしまいます。 (.skinHeaderArea を基点にすればよさそうに見えますが、.skinHeaderFrame と .skinContentsFrameで枝分かれしており、.skinHeaderAreaは #gnavi直系の先祖ではないので基点にすることができない。) .skinContentsAreaの方が筋がよさそうにみえたので基点に決めます。 するとブログ記事と#gnaviの基点が同じなので、記事とメニューが重なってしまいます。 次にメニューとかぶっている部分を格納している.skinContentsArea2のmargin-topに間を与えて、#gnaviと重ならないように調整します。これで完了。 別解: ul#gnavi { left: 0px; position: absolute; top: -75px; width: 980px; } .skinContentsArea2 { margin-top: 75px; position: relative; }
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ