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


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

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

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

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2012/01/07 06:25:37
  • 終了:2012/01/08 02:11:46

ベストアンサー

id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922012/01/07 17:59:46

ポイント300pt
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リフォーム術

他1件のコメントを見る
id:moon-fondu

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

2012/01/08 02:08:50
id: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;
}

2012/01/11 05:48:32

その他の回答(2件)

id:kodairabase No.1

kodairabase回答回数661ベストアンサー獲得回数802012/01/07 12:11:03

ポイント10pt

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

id:moon-fondu

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

2012/01/08 01:50:35
id:taknt No.2

きゃづみぃ回答回数13539ベストアンサー獲得回数11982012/01/07 12:34:10

ポイント10pt

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

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

id:moon-fondu

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

2012/01/08 01:51:37
id:taknt

だから レイアウトの変更がいいのでは ないのかと思った次第です。

2012/01/08 09:16:42
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922012/01/07 17:59:46ここでベストアンサー

ポイント300pt
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リフォーム術

他1件のコメントを見る
id:moon-fondu

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

2012/01/08 02:08:50
id: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;
}

2012/01/11 05:48:32
  • id:windofjuly
    うぃんど 2012/01/07 18:28:57
    回答投稿しようとしたら、既に回答がついていたので、コメントで蛇足です

    フォトライフに画像をアップしておきましたが、
    一部のブラウザでは、アメブロバーの高さが変わっきてしまいます
    http://cdn-ak.f.st-hatena.com/images/fotolife/w/windofjuly/20120107/20120107181747.jpg?1325927876

    原因はスタイルシートの min-width という指定です
    完全対応していないブラウザでは幅を狭めることによって、
    上記画像のように高さが変わってしまいます

    そのための対応として、DIVを配置する起点を固定ではなく、相対にして、
    自動的に追従させるという手を使うわけです
  • id:moon-fondu
    いえ、全然回答欄に書いてくださって結構ですよ、コメントありがとうございます!
    スタイルシートを確認したのですが、どこにも「min-width」という指定がありませんでして・・・(>_<)
    スタイルシートの全文を、

    http://firestorage.jp/download/80c8e6f118a057cf30fb04c15a18ae8d3d13cf1b

    にアップしましたので、もし差支えなければ、縦位置がずれる理由について、ご回答いただければ幸いです。
    よろしくお願いしますm(__)m

    また、FirefoxやChromeでも確認したのですが、アメブロバーの位置については、横並びになっており、問題ないのですが・・・
    http://f.hatena.ne.jp/moon-fondu/20120108013831

    問題は、メニューバーがウインドウの拡大・縮小等によってズレてしまうことです。
  • id:moon-fondu
    windofjulyさんすみません、問題はあるていど、解決しました(^_^;)
    コメントありがとうございます<m(__)m>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません