baserCMS Tips #4 管理用ツールバー下にコンテンツ（ヘッダーなど）が潜り込んでしまうのを回避する方法

2024/07/25 web

管理用ツールバーの下にコンテンツ（ヘッダーなど）が回り込んでしまうという状況は、管理テーマごと、それぞれこんな感じです。

状況説明

そもそも、4系に管理画面テーマ選択機能が実装されて以降、現行では2種類の管理画面テーマの選択肢があって（もしかするとサードパーティーのものも存在しているかもなので、その場合はご容赦ください。）、レガシーが「admin-second」、その後継としてUIをブラッシュアップしたものが「admin-third」です。本来は、いずれの管理画面テーマも機能的に変わりはないはずですが、もしかすると今では「admin-third」より「admin-second」は、若干機能落ちしているのかもしれません。「admin-second」を使わなくなって久しいのではっきりとしたことは言えませんが。。。

さて管理用ツールバーに話を戻して、たとえば、利用するユーザー側テーマで<?php $this->BcBaser->scripts() ?> 関数を使っている場合、<head></head> 内に <link rel="stylesheet" type="text/css" href="/css/admin/toolbar.css"/> あるいは <link rel="stylesheet" type="text/css" href="/theme/admin-third/css/admin/toolbar.css"/> といった管理用ツールバーを表示させるためのcssリンクタグを出力してくれるのですが（詳細は、こちら→ ver4/関数リファレンス/scripts ）、実は、それらのcss内に以下のような管理用ツールバー下にコンテンツ（ヘッダーなど）が回り込んでしまうのを回避するための対策があらかじめ記述されています。

body {
  margin-top: 31px;
}

body {
  margin-top: 40px !important;
}

ところが、例で示した「bcColumn」テーマなど、<header></header>要素がposition: fixedでブラウザ上部に固定されているテーマの場合、管理用ツールバー下へのコンテンツの潜り込みを起こしています。理由はこちらの記事を読んでいただくとよくわかります。参考記事：CSSレイアウトの基本のき。absolute, fixed, sticky, relativeについて

アジャスト用cssを条件分岐で追加読み込みさせる方法

理由がわかったところで、まず簡単に思いつく解消方法としては、潜り込んでしまう要素（たとえば「bcColumn」テーマの場合は、<header></header>要素など）に対して、管理用ツールバー表示時のみアジャストするcssを加えてあげるというやり方です。

「admin-second」「admin-third」それぞれ様にadjustment_second.css、およびadjustment_third.cssなどを作成、追加。
以下、サンプルcss。テーマが違ったりテーマ改修の内容次第で、調整が必要な要素（ヘッダーだったり、トップイメージだったり）は違うと思いますので、その辺りは、まさにアジャストしていただければと思います。あと、上述したtoolbar.css内に記述されているbody要素のmargin-topが、ユーザー画面側では意図しないレイアウト崩れを起こしているような場合は、このタイミングで併せてリセットすればいいと思います。

@charset "UTF-8";

/* admin-second利用時の管理用ツールバーのアジャスト */
#Header {
    position: fixed;
    top: 30px !important;
}
#PCMainImage {
    margin-top: 120px !important;
}

@media screen and (max-width: 768px) {
    #SPMainImage {
        margin-top: 90px !important;
    }
}

@charset "UTF-8";

/* admin-third利用時の管理用ツールバーのアジャスト */
#Header {
    position: fixed;
    top: 40px !important;
}
#PCMainImage {
    margin-top: 130px !important;
}

@media screen and (max-width: 768px) {
    #SPMainImage {
        margin-top: 90px !important;
    }
}

テーマの各レイアウトファイルにアジャスト用cssの読み込みコード（管理用テーマごとに条件分岐）を記述します。
記述場所は、<head></heed> 内で、既存のcssが呼び出されている位置より後ろ、既存の要素のプロパティを上書きする様な位置がベターです。

<?php $user = BcUtil::loginUser() || BcUtil::loginUser('front'); ?>
<?php if ($user): ?>
    <?php if ($this->BcBaser->siteConfig['admin_theme'] == 'admin-third'): ?>
        <?php $this->BcBaser->css(['adjustment_third']) ?>
    <?php else: ?>
        <?php $this->BcBaser->css(['adjustment_second']) ?>
    <?php endif; ?>
<?php endif; ?>

javascriptで調整する方法

次の方法は、管理用ツールバー、ヘッダーなど、潜り込みを解消するために必要な要素の高さをスクリプトで取得し、アジャストが必要な要素に対してマージン（margin-top）を加えてあげるというやり方です。この方法でもテーマが違ったりテーマ改修の内容次第で、これらの要素（ヘッダーだったり、トップイメージだったり）は違うと思いますので、アジャストしていただければと思います。

以下のスクリプトをテーマの各レイアウトファイル <body></body> 内の閉じタグの前に配置します。 JQueryの指定が必要ですが、たぶんどのテーマでもほぼ使ってると思うので、あまり気にしなくていいかもしれません。

<script>
    const height1 = $("#ToolBar").height();
    const height2 = $("#Header").outerHeight();
    $("html, body").css({"cssText" : "margin-top : 0 !important"}); //toolbar.cssに記述されているbody要素のmargin-topを不要ならリセットする
    $("#Header").css("margin-top", height1);
    $(".forPC, .forSP").css("margin-top", height1 + height2);
</script>

もしかするとアジャスト用css追加の方法より、こちらの方がスマートかもしれません。

いずれにしても、管理画面にログイン状態で、管理用ツールバーをユーザー画面で表示している時だけの話なので、「気にしなければそれまで」の話なので、気になる方は、一度試してみてください。

baserCMS Tips #4 管理用ツールバー下にコンテンツ（ヘッダーなど）が潜り込んでしまうのを回避する方法

アジャスト用cssを条件分岐で追加読み込みさせる方法

javascriptで調整する方法

コメント

Related posts