オーバーレイ時ヘッダの気になる点

0
Who liked: No user
  • このトピックには4件の返信、2人の参加者があり、最後にHatsukiにより5年、 8ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #12064
    Hatsuki
    閲覧者
    6

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】v5.3.8
    【お使いのブラウザ】Safari
    【当該サイトのURL】https://not-wiz.net/forums/


    現在、色々とオーバーレイのヘッダを試していたのですが、いくつか気になる点がありました。
    オーバーレイ表示を綺麗に表示するのに何か良い方法があるのかも、現在、いろんな設定を調査をしていますが、
    デフォルトの設定では解決出来なさそうなのでフォーラムで記載いたします。

    ヘッダーをオーバーレイの1行にした場合に、
    お知らせバーがメニューと重なる為、お知らせバーのリンクなどが押せないようです。
    また、お知らせバーと重なる為に見にくい表示となってしまうようなのですが、この解決方法はあるでしょうか?

    また、オーバーレイ時にはアイキャッチを固定ページなどにも配置しなければ、コンテンツのタイトルと重なって見えてしまいます。
    パンくずが上の場合は、パンくずが重なった場合には、押せないという問題も発生するようです。

    ホームページのみオーバーレイにする等は、やや難しそうな感じがしますが、ホームページの設定同様の「コンテンツ前に余白を設定」が、ホームページ以外に設定出来れば、重なりを防げるのではと思ったのですが、どうでしょうか?
    bbpressを使っているフォーラム一覧のページでは、そのままではアイキャッチが上手く入らないのも確認いたしました。
    (症状については、当該サイトの方をご確認いただければと思います)

    この重なり等を対策するのにデザインスキンやCSSなどを使えば解決するかもしれませんが、デフォルトの感じだとちょっと難しい印象をしています。

    0
    Who liked: No user
    #12075
    アバター画像キタジマ タカシ
    参加者
    2421

    まさにご指摘のとおりです。

    オーバレイヘッダーは「ヘッダーがコンテンツと重なるレイアウト」になるため、重なっても良いコンテンツが上部にないといけません。ただ、自動的に何かを出すようにしてしまうと自由度が下がるので、ユーザーが自分でページヘッダーなりスライダーなりを入れることを想定しています。

    一応このためにデフォルトページヘッダー画像指定機能をつくったりしました。

    が、bbPress のフォーラムなどプラグインでつくられるページはページヘッダーやウィジェットを入れられなかったりするため、ご指摘のとおりヘッダーがコンテンツにかぶります。こういう場合はフックでページヘッダーを表示させるなど、どうしてもコードを書く必要があります。

    お知らせバーとの重複は既知の問題なのですが、どう表示させるのがベターなのか迷っておりそのままになっております…。「オーバレイヘッダーのときはお知らせバー使わない」がベターなのかなと思ったり…。

    0
    Who liked: No user
    #12107
    Hatsuki
    閲覧者
    6

    こういう場合はフックでページヘッダーを表示させるなど、どうしてもコードを書く必要があります。

    もし、そのコードかアドバイスを頂けるのであれば、教えていただいてもよろしいでしょうか?
    投稿タイプがbbpressの時にもページヘッダーを表示させる〜となると思うのですが、
    snow_monkey_prepend_contentsやsnow_monkey_prepend_mainと言ったフックもあるので、
    それを使ってコンテンツの前に表示させるのも、自由に出来て良いのかなとか迷っています(笑)

    お知らせバーですが、ページの一番上に表示しても、サーチコンソールが警告を出すそうです。
    多分h1の前とかに、お知らせコンテンツが見える為にHTML文章の構造がGoogle側として正しくないとか判断されちゃうんでしょうか?

    オーバーレイの時は、お知らせバーを使わない、またはコンテンツ下部に表示させるようになる&スクロールすると消えるとかが、ベターなのかもですね…。

    0
    Who liked: No user
    #12109
    アバター画像キタジマ タカシ
    参加者
    2421

    もし、そのコードかアドバイスを頂けるのであれば、教えていただいてもよろしいでしょうか?

    snow_monkey_pre_page_header_image_url というフックがあり、ここで適当な画像の URL を返すとページヘッダーが表示されるようになります。

    こんな感じでどうでしょう?

    add_filter(
        'snow_monkey_pre_page_header_image_url',
        function( $url ) {
            if ( is_bbpress() ) {
                return '適当な画像 URL';
            }
            return $url;
        }
    );

    お知らせバーですが、ページの一番上に表示しても、サーチコンソールが警告を出すそうです。
    多分h1の前とかに、お知らせコンテンツが見える為にHTML文章の構造がGoogle側として正しくないとか判断されちゃうんでしょうか?

    オーバーレイの時は、お知らせバーを使わない、またはコンテンツ下部に表示させるようになる&スクロールすると消えるとかが、ベターなのかもですね…。

    その辺は詳しくなくてなんともなのですが、いっそのことオーバレイのときはお知らせバーは出さない、設定できない、というふうにしたほうが良いかもしれませんね…。

    0
    Who liked: No user
    #12535
    Hatsuki
    閲覧者
    6

    ご返信が遅れておりました。
    snow_monkey_pre_page_header_image_url というフック、便利ですね!

    お知らせバーはオーバーレイ時には表示しない事にして、
    その代わりにお知らせバーの内容と同じ表示をショートコードなどで任意の場所に入れるようにして
    対応するようにして、問題を解決いたしました。
    しかし、ちょっとこのままでは、使い心地が悪いので、お知らせバーのブロックを作って、任意の場所に配置するのも良いかなと思っています。
    今後、こちらの方でお知らせバーブロックを作って、プルリクエストをするかもしれませんが、よろしくお願いしますー。

    情報共有の形で、こちらのフォーラムに下記も記載しておきます。

    トップページだけオーバーレイにする方法

    add_filter(
        'theme_mod_header-position',
        function( $_value ) {
            // ホーム画面、またはフロントページであれば
            if ( is_home() || is_front_page() ) {
                // sticky(固定)
                // overlay(オーバーレイ)
                return 'overlay';
            }
            return $_value;
        }
    );
    0
    Who liked: No user
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「オーバーレイ時ヘッダの気になる点」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。