- このトピックには4件の返信、2人の参加者があり、最後に
により1ヶ月、 2週前に更新されました。
-
【お使いの unitone のバージョン】 19.5.0
【お使いのブラウザ】 Chrome
【当該サイトのURL】 https://www.torinos.site/北島さま、フォーラムの皆様、大変お世話になります！
HTMLレベルは相変わらず初心者級です。※unitoneバージョン: 19.5.0 です。
「ヘッダーメニューのカスタマイズ」について、3点質問させていただきます。
１）ヘッダーメニューの固定をノーコードで行おうとしたのですが、できません。
上記のとおり行おうとしたのですが、重ね合わせレベルの項目が出ませんでした。
重ね順が下なら固定できましたが、、、見えなくなります。何かやり方が変わったのでしょうか？
２）仕方なく追加cssで固定しました。
そのついでに帯を半透明かつぼかしにしたのですが、PCはOK、iPhone（Safari）で見えません。
サポート外かもしれませんが、何かご存知でしたらご教示いただけましたら幸いです。
下記のように記述しています。.wp-site-blocks > [data-unitone-layout~=cover] > [data-unitone-layout~=cover__content]:has(.site-header) { display: contents; } .wp-site-blocks > [data-unitone-layout~=cover] > [data-unitone-layout~=cover__content] .site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); background-color: rgba(255, 255, 255, 0.3); /* 半透明の白 */ backdrop-filter: blur(3px); /* 背景ぼかし */ -webkit-backdrop-filter: blur(3px); /* Safari用 */ box-shadow: 0px 5px 5px -5px rgb(0 0 0 / .2); z-index: 5; }３）左側のロゴマークが、帯からはみ出しているデザインにしたいのですが、そのような設定はございますでしょうか。
こちらもサポート外かもしれませんが、何か方法（参考サイト）などでも教えていただけましたら大変ありがたいです。以上よろしくお願いいたします。
いいねをした人： いません重ね合わせレベルの項目が出ませんでした。
カバーブロックの子ブロック（この場合だと「上部」）を選択し、スタイルタブ → 位置 → 位置オプション（三点ボタン）→ 重ね合わせレベル、をクリックすると設定ができるようになります。
デフォルトだと設定項目が隠れているので、オプション（三点ボタン）から表示させる必要があります。
２）仕方なく追加cssで固定しました。
これは（1）で設定できれば必要なくなると思うので、とりあえず（1）を試してみてください！
３）左側のロゴマークが、帯からはみ出しているデザインにしたいのですが、そのような設定はございますでしょうか。
「帯からはみ出している」がちょっとどういう感じが想像ができないので、スクショにメモを入れて共有してもらうか、似たようなデザインのサイトを上げてもらえればと思います。
いいねをした人：ありがとうございます！！
カバーブロックの子ブロック（この場合だと「上部」）を選択し、スタイルタブ → 位置 → 位置オプション（三点ボタン）→ 重ね合わせレベル、をクリックすると設定ができるようになります。
おかげさまで、できました！
ありがとうございます。３）左側のロゴマークが、帯からはみ出しているデザイン
これは難しそうなのとあまり格好良くならない気がしてきたので、やめます。
ちなみに下記サイトのような感じでした。（このサイトではPC表示の時のみ）４）スマホでハンバーガーメニューを展開できない（ヘッダーの位置でだけで小さく表示されてスクロールしないとメニューが見れない）という現象が発生しています。
どのようにしたら解決できますでしょうか。５）ヘッダーメニューの背景、このままでもいい感じなのですが、透明度やぼかし具合、色を変えるのは、CSSでやるのでしょうか。
以上、ご教示のほどよろしくお願いいたします。
いいねをした人： いませんこれは難しそうなのとあまり格好良くならない気がしてきたので、やめます。
ちなみに下記サイトのような感じでした。（このサイトではPC表示の時のみ）ロゴ部分の
positionをrelativeかabsoluteにして、topでずらせばできそうかなと思いました。ただモバイルでもズレちゃうのと、デザインのバランスの調整が難しそうなので、ちゃんとやるなら CSS で調整することになるかなぁと感じました。４）スマホでハンバーガーメニューを展開できない（ヘッダーの位置でだけで小さく表示されてスクロールしないとメニューが見れない）という現象が発生しています。
どのようにしたら解決できますでしょうか。ナビゲーションブロックの親のセクションブロックに
blurを設定されてますよね？ CSS の仕様的に、blur（というか背景フィルター）を設定すると、子要素がはみ出れなくなっちゃうんですよね…。５）ヘッダーメニューの背景、このままでもいい感じなのですが、透明度やぼかし具合、色を変えるのは、CSSでやるのでしょうか。
背景色や文字色はセクションブロックで設定できますが、前述したようにぼかし（
blur）を設定するとナビゲーションがはみ出せなくなるので、ぼかしを設定したい場合はちょっと工夫が必要です。色々やり方があると思いますが、例えば
- セクションブロックをレイヤーブロックでラップする → レイヤーブロックで囲むと子要素が重なる - セクションブロックの上にデコレーターブロックを挿入する → セクションブロックとデコレーターブロックが重なる - デコレーターブロックにぼかし（blur）を設定する
ちょっと手間はかかりますが、これで実現できます。
いいねをした人： いません
- このトピックに返信するにはログインが必要です。
