- このトピックには7件の返信、2人の参加者があり、最後に
により1年、 10ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 18.2.0
【お使いの Snow Monkey Blocks のバージョン】バージョン 17.2.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.1.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】制作中### 実現したいこと
メニューバーを左表示にした際、以下のようにメニューバー（ヘッダー）の修正を行いたい。
①左表示にした状態での横幅の変更
②各メニュー項目のセンタリング
③ロゴの左寄せ
### 発生している問題
### 試したこと
お世話になります。
上記について、修正が可能か、また可能である場合の方法をご教示いただけたら幸いです。
よろしくお願い致します。
いいねをした人: 居ませんCSSで対応できると思いますが、すでにお試しでしょうか？以下のようにやればできるかと思います。PCでの表示用のみ書いているので、必要であればメディアクエリなどで分岐してつかってください。
①左表示にした状態での横幅の変更
最初に左サイドバーの幅を上書きします。その後に、コンテンツエリアについている左マージン（＝左サイドバーの幅分）も設定し直します。
.l-header--left { width: 150px; } [data-header-layout=left] { margin-left: 150px; }②各メニュー項目のセンタリング
.l-header--left .p-global-nav .c-navbar__item>a { align-items: center; }③ロゴの左寄せ
ロゴ画像は全幅で表示されていると思うので、左サイドバーのコンテンツエリア幅よりも小さくなるように画像サイズを指定してあげてください。必要であれば以下のように
!importantをつけてあげてください。.c-site-branding__title { text-align: left; } .c-site-branding__title > a > img { width: 100px !important; }いいねをした人:
一度トピックを閉じさせていただきましたが、関連した質問が生じましたので、失礼ながら再開させていただきます。
さきほどご教示いただいた内容により、PCについては問題なく表示されておりますが、スマートフォンでの表示の際には、ヘッダーを左表示するのではなく、上下ノーマルな形にしたいと考えております。
この件についても適切な処理方法等を教えていただけないでしょうか？
いいねをした人: 居ませんスマートフォンでの表示の際には、ヘッダーを左表示するのではなく、上下ノーマルな形にしたいと考えております。
ヘッダーを「左」にしたとしても、モバイル表示時には左に表示されることなくナビバーなどで表示されると思いますが、いかがでしょうか？
いいねをした人: 居ませんご回答ありがとうございます。
先にご教示いただいた①及び②のCSSを追加CSSに書き込んだところ、PCでの挙動は意図したとおりになりました。
その状態でモバイル表示をすると、PCと同様に左表示になりましたので、試しに追加記載したCSSを削除すると、ご指摘の通りモバイルでもノーマルな表示になりました。
冒頭でご教示いただいた以下の点
＞PCでの表示用のみ書いているので、必要であればメディアクエリなどで分岐してつかってください。
これを怠っているからでしょうか？初心者のため意味がわからず何もしていないのですが。。
お手数をおかけしますが、よろしくお願いいたします。
いいねをした人: 居ません実際に作られているサイトを見ているわけではないので確実なことは言えませんが、
＞PCでの表示用のみ書いているので、必要であればメディアクエリなどで分岐してつかってください。
これを怠っているからでしょうか？初心者のため意味がわからず何もしていないのですが。。
Snow Monkey はモバイルファーストな形でCSSを書かれているので、メディアクエリを設定せずに記述すると、スマホ＞タブレット＞PCと全てのデバイスへ適応されます。ですので、スマホ表示だけに適応したい、PC幅表示時だけ適応したい、などという場合には、メディアクエリを記述する必要が出てきます。
その辺りはぜひご自身で調べて試してみてください。
いいねをした人:
- トピック「メニューバーを左表示した際の、メニュー幅の修正等」には新しい返信をつけることはできません。