サポート » 使い方全般 » サイト上部の黒いバーにコンテンツがもぐりこんでしまうのを防ぎたい

  • ワードプレスでサイトを作成する際、
    サイトの上部に黒いバーがあります。
    (管理バーやアドミンバーなどと呼ぶようですが。)

    このバーについては使用を考えているのですが、
    サイトが黒いバーの下に一部もぐりこんでしまう
    ということがわかりました。

    そこで、margin-topやpadding-topなどでもぐりこんだ部分を
    無理やり押し出して表示しているような形になっています。

    ですが、この方法だとoperaなどのブラウザでもぐりこんだ部分が押し出されなかったり、
    ページ内リンクの表示の時に上の一部が黒いバーとかぶってしまったりする
    などの問題が発生してしまいます。

    理想としては、
    サイトが黒いバーの下にもぐりこまないようにしたいのですが、
    どのように対応するのがよいのでしょうか?

    cssでの対応も考えましたが、
    どうすれば対応できるかわかりませんでした。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • テーマはデフォルトテーマでしょうか?

    もし、デフォルトテーマでないなら、デフォルトテーマで確認してもらえますか?

    スレッド開始 pitiful

    (@pitiful)

    Fumito MIZUNOさん

    ご返信ありがとうございます。

    デフォルトテーマで確認したところ、
    確実ではないですが、たぶんもぐりこんでないと思われます。

    自作のテーマですともぐりこんでいる、
    という状況です。

    これは、コードを書くなどで対応できるものでしょうか?
    また、対応できるようでしたら、どのようにするのが
    よいのでしょうか?

    重ねた質問になってしまい、申し訳ありません。

    自作テーマでしたか。
    では、
    ■ wp_head(); をヘッダー部分に記述しているかどうか
    ■ wp_footer(); をフッター部分に記述しているかどうか
    を確認してもらえますか。
    wp_head(); 、wp_footer(); が欠けていると、WordPress の機能が上手く働かないことがあります。

    今回関係しそうなのはwp_head(); 、wp_footer(); ですが、
    他にも WordPress テーマの決め事があります。(下記リンク参照)
    http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88

    スレッド開始 pitiful

    (@pitiful)

    wp_head(); 、wp_footer();の両方をそれぞれ
    header.php、footer.phpで確認しました。

    WordPress テーマの決め事
    についてのリンクを確認しましたが、
    軽くしか確認をしていないものの、
    特に問題は無いようです。

    黒いバーの下にコンテンツがもぐりこんでしまう原因が
    全くわからないのですが、
    cssなどで対応するような形になるのでしょうか?

    通常ですとwp_head()の部分に自動的に管理バー分の余白が!important付のcssで記述さてれいてます。
    ですがCSSのルールではimportantよりもクラスセレクタ・IDセレクタを使用した設定が優先されますので
    ご使用中のテーマのCSSでhtmlにidやclass名を設定してmarginやpaddingを指定されていないか確認してください。

    スレッド開始 pitiful

    (@pitiful)

    paruchanさん

    ご返信ありがとうございます。

    ご使用中のテーマというのは、一般的に用いるstyle.cssのことでしょうか?

    style.cssではhtmlに指定を特にしているということはありませんでした。

    ただ、ヘッダーにはmargin-topをかけていたので、
    そこをはずしても安定してもぐりこんでしまっていました。

    黒いバーにはもともとなにもしていないのですが、
    対策は難しいでしょうか?

    デフォルトのテーマで問題がないということですので
    自作テーマに影響を与えてる部分があると思うのですが
    実際にそのテーマを見ていないので原因の特定は難しいです。
    対策は難しくないと思いますが原因が特定できないので対策できない状態ですね。

    全部でなくても、サイトのhead内やbodyの最初のほうなど症状に関係有りそうな部分のソースを提示してくれたほうが
    ここがおかしいとか、おかしいところは見当たらないと的確に指摘できますし、
    解決策が分かる人が現れやすくなると思いますよ。

    なので現在でている情報だけの憶測で原因を推測できるのが
    先に書いたhtmlタグへのスタイル指定のほかに、
    自作のテーマをご使用とのことなのでCSSの挙動についてはご存知だとおもうのでさっきはかきませんでしたがサイトのデザインでtop:0;left:0;position:fixedで固定している部分がありそうとか、
    wp_head()の記述位置がおかしい、例えばheadタグの外に記述してるとかなど
    ぼんやりとした部分までですね。

    スレッド開始 pitiful

    (@pitiful)

    いくつか話を提供する形になってしまいますが、

    デフォルトテーマでの場合でも、私の作成したテーマでも、
    以下のコードを書いた場合は、サイトが黒いバーの下にもぐりこんでしまいました

    ※以下のコードでページ内リンクをした場合です

    <h3 id=”no1″>1</h3>

    上記の場合ですと、
    をクリックすると
    <h3 id=”no1″>1</h3>の部分がもぐりこんでしまっていて
    表示されていない、という状況です。

    また、何度か確認をしたところ、
    operaでmargin-topが効かないという状況によって
    もぐりこんでしまっている状況が確認出来ました。
    (こちらについては、デフォルトと自作の両方で確認しました。)
    これはoperaの設定の問題なのかどうかよくわかりませんでした。

    wp_head()の記述位置なども含め、
    問題として考えられそうな部分が見つかりませんでした。

    こちらも、ぼんやりとした回答になってしまいまして、
    申し訳ありません。

    デフォルトテーマでも同じ状況ということと、書き込んでくださった内容を踏まえますと
    wordpress的にもCSS的にもいたって正常な挙動ですね。
    operaが・・・とおしゃってますが、多分position:fixedが機能するブラウザであればIEだろうがChromeだろうが同じように潜り込むと思いますよ。

    ログインしていない状態(管理バーが表示されていない状態)では問題ないのであまりきにしていなかったのですが、言われてみればページの一番上以外は確かに管理バーで隠れますね。

    これをどうしても回避したいのであればいくつかの方法が考えられます。

    1:管理バーをページの上部に完全に固定する。
    style.cssにでも

    #wpadminbar{
    position:absolute;
    }

    と記載すれば、管理バーはついてこなくなるので下に潜ることはなくなります。
    利用するのにページ上部にいちいち戻らなければならないですけどね。

    2:管理バー以外の部分をdivで囲ってスクロールできるようにする
    スタイルシートで本文全体にスクロールバーをつけることでフレームっぽくする方法です。

    <body>の直後からwp_footer()の直前までをdivで囲います。
    <div id=”body”>とでもしてください
    そしてスタイルシートには

    #body{
    	margin: 0;
    	position: fixed;
    	overflow: auto;
    	bottom: 0;
    	padding: 0;
    	top: 28px;
    }

    こんなかんじで設定してください。細部ちょっと調節しないといけないかもですが。
    ログインしていない場合は意味がないので、ログイン状態によってdivタグの表示を振り分けたほうがいい気がします。

    ほか、管理バーを下に設置するという方法もありそうですが、結構いじるの大変そうなので興味があれば調べてみてください。
    (単純に下に移動するだけでしたらスタイルシートですぐですが、プルダウンメニューが表示できなかったりしたので・・・)

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「サイト上部の黒いバーにコンテンツがもぐりこんでしまうのを防ぎたい」には新たに返信することはできません。