サポート » 使い方全般 » 上部のツールバーにレイアウトが隠れてしまう(重なる)

  • 解決済 9-taro

    (@9-taro)


    初心者のものです。
    wordpressのプレビュー画面で、上部のツールバーにレイアウトが数十ピクセル隠れてしまいます。
    (ツールバーの黒い背景に、レイアウトが重なってしまいます。ロゴなんかも被っている状態です)
    これは、スタイルシートのどこかをいじってしまった時に起こるのでしょうか?
    わかる方、どうか教えてください。

15件の返信を表示中 - 1 - 15件目 (全18件中)
  • CG

    (@du-bist-der-lenz)

    アドミンバーの高さを考慮されてないからでしょう

    ishitaka

    (@ishitaka)

    実際のサイトを見てみないとわかりません。サイトの URL またはテーマ名をご提示されると回答を得やすいと思います。

    9-taro

    (@9-taro)

    CG 様
    早速、ご回答ありがとうございます。
    おそらく、ヘッダーを固定しているために起きている現象だと思いますが、
    adminbarの要素を調べると下記のようなスタイルが出てきますが、
    テーマのスタイルでなく、wordpressoのファイルを変更するという意味でしょうか?
    load-styles.php:4というファイルが表示されていますが、
    そのファイルがどこにあるのかわかりません。
    (昨日調べた時とファイル名が違ってます)

    #wpadminbar {
    direction: ltr;
    color: #ccc;
    font-size: 13px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;
    line-height: 32px;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: #23282d;
    }

    ishitaka様 
    ご回答ありがとうございます。
    非公開のサイトなのですが、ログインした状態のプレビュー画面でのみ
    そのような表示になります。
    ログアウトした状態では、問題なく表示されます。

    CG

    (@du-bist-der-lenz)

    ヘッダーを固定していれば、問題箇所は確かでしょうね。ログアウト状態ではアドミンバーは表示されませんよね。ログインユーザーに対して、アドミンバー分ヘッダーを下げるであるとかしましょう。特殊な固定ヘッダーをもつテーマの場合、わたしは折りたたみのアドミンバーにしています。

    基本的には、管理バーに重ならないように下記のような CSS が出力されます。ただし、テーマによっては出力されなかったり、内容が異なる場合があります。

    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    	html { margin-top: 46px !important; }
    	* html body { margin-top: 46px !important; }
    }

    テーマは何をお使いですか?

    CG 様
    ご回答ありがとうございます。
    隠れてしまう分、ヘッダーを下げると表示は正常になりますが、ログアウトしたら、ヘッダー上部に余白が空いてしまいます。特殊な固定ヘッダーなのかもしれません。

    ishitaka様

    ご回答ありがとうございます。
    下記のコードをスタイルに書き込んでもなぜか反映されませんでした。

    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    html { margin-top: 46px !important; }
    * html body { margin-top: 46px !important; }
    }
    使っているテーマは、Firstになります。
    これに手を加えています。
    http://demo.themehaus.net/first-ja/

    CG

    (@du-bist-der-lenz)

    ログインユーザーに対して、アドミンバーは表示されるのですよね。

    下記コードをテーマの functions.php に追記してみてください。
    margin-top の値(32px, 46px)を調整してください。

    function my_admin_bar_bump_cb() {
    	?>
    <style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>
    	<?php
    }
    
    function my_admin_bar_init() {
    	// remove_action( 'wp_head', '_admin_bar_bump_cb' );
    	add_action( 'wp_head', 'my_admin_bar_bump_cb' );
    }
    add_action( 'admin_bar_init', 'my_admin_bar_init' );
    • この返信は2 週間、 6 日前に  ishitaka さんが編集しました。

    CG 様

    ログインユーザーに対して、アドミンバーは表示されています。
    その状態で、ヘッダーに被ってしまいます。

    ishitaka 様

    親切にコードをお書きくださり、ありがとうございます。
    お知らせいただいたコードをfunctionに書いたのですが、あいにく「サイトに技術的な問題が発生しています。」になってしまいました。
    なおfunction.phpに記述したスクロール時のヘッダーの固定の記述は、下記のようなものです。
    参考になるかわかりませんが。

    /* スクロール時のヘッダーclass名を制御 */
    function my_wp_footer(){
    ?>
    <script>
    jQuery(function() {
    var header = jQuery(‘#masthead’);
    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 0) {
    header.addClass(‘header-extra-css’);
    } else {
    header.removeClass(‘header-extra-css’);
    }
    });
    });
    /* スクロール時のヘッダーのロゴ縮小*/
    (function($){

    $(function(){
    $(window).scroll(function(){
    var scr = $(window).scrollTop();
    if(scr > 1){
    $(‘#logo’).addClass(‘mini’);
    }else{
    $(‘#logo’).removeClass(‘mini’);
    }
    })
    })
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘my_wp_footer’);

    お知らせいただいたコードをfunctionに書いたのですが、あいにく「サイトに技術的な問題が発生しています。」になってしまいました。

    提示したコードに関してはエラーはないと思います。
    エラーメッセージを提示してもらえませんか?

    ヘッダーの固定に

    .header-extra-css {
        position: fixed;
        top: 0px;
    }

    のようなCSSが当たっていませんか?
    この場合

    .header-extra-css { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    	.header-extra-css { margin-top: 46px !important; }
    }

    を追記してやれば、ヘッダーが下がりますがログアウトすると上部に余白が出来てしまいます。
    管理バーが表示されている時は、body 要素に admin-bar という class が付きますので、これを利用して

    .admin-bar .header-extra-css { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    	.admin-bar .header-extra-css { margin-top: 46px !important; }
    }

    にすれば、管理バーが表示されている(ログインしている)時だけ、ヘッダーを下げることができます。

    Toshiyuki Honda様

    親切なご回答ありがとうございます。
    該当のヘッダーのスタイルは、「site-header」という箇所で、
    admin-barのスタイルは、要素を調べたら「#wpadminbar」でした。
    そのため、下記のように変更したいのですが、ログイン画面では正常に表示されるのですが、
    ログアウト画面では、上部に32pxの余白が出てしまいました。

    .site-header {
    position: fixed;
    top: 0px;

    .header-extra-css → .site-header
    .admin-bar → #wpadminbar

    .site-header { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    .site-header { margin-top: 46px !important; }
    }

    #wpadminbar { margin-top: 32px !important; }
    .site-header { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    #wpadminbar{ margin-top:32px !important; }
    .site-header { margin-top: 46px !important; }
    }

    管理バーが表示されている時は、body 要素に admin-bar という class が付きますので、これを利用して

    の意味が通じていないようですね。
    .admin-bar は、body.admin-bar です。
    ログインしている時は、
    <body id="〇〇" class="〇〇 logged-in admin-bar 〇〇">
    のように、body 要素に admin-bar という class が付きます。
    #wpadminbar は、ここでは関係ありません。

    .site-header {
        position: fixed;
        top: 0px;
    }

    で、ヘッダーを上部固定しているのであれば、

    .admin-bar .site-header { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        .admin-bar .site-header { margin-top: 46px !important; }
    }

    を CSS に追加してください。

15件の返信を表示中 - 1 - 15件目 (全18件中)
  • このトピックに返信するにはログインが必要です。