Re: スマホで「ヘッダーを表示しない」とメニュー出現の両立
2021年2月14日 09時29分 [永原 篤]こんにちは。
永原です。
「スマホで「ヘッダーを表示しない」とメニュー出現の両立」
これ、開発の初期のころに悩んだまま、現在の形でそのままになっている。という状況です。
何か良い方法を考えたいです。
ということで、現状は最終形ではないこと、方針について、これから考える状況である。ということをお知らせします。
どういうのが使いやすいか、じっくり考えたいなー。
以下の目的、注意点などご確認いただき、ご使用ください。
当フォーラムでは、Connect-CMSのトラブルなどの相談も記載いただけますが、作業を肩代わりするものではありません。
作業の依頼は、株式会社オープンソース・ワークショップの調査メニューなどをご検討ください。
https://opensource-workshop.jp/service/rescue
こんにちは。
永原です。
「スマホで「ヘッダーを表示しない」とメニュー出現の両立」
これ、開発の初期のころに悩んだまま、現在の形でそのままになっている。という状況です。
何か良い方法を考えたいです。
ということで、現状は最終形ではないこと、方針について、これから考える状況である。ということをお知らせします。
どういうのが使いやすいか、じっくり考えたいなー。
先日は色々とありがとうございました。
そして、またすぐに現れて恐縮なのですが、
お知恵を拝借したく存じます。
--- ---
作成したWebサイトを一般公開する際、「サイト管理」画面で「ヘッダーを表示しない」の設定を選びたいと思っています。
しかし、スマートフォンとタブレットでは、(画面構成で言う)ヘッダー領域に配置したメニュー(navbar)のリンクはハンバーガーメニューにたたみ込まれて画面の一番上にあるヘッダーに入っており、設定で「ヘッダーを表示しない」を選ぶと一緒に非表示になってしまいます。
割りと簡単に解決できるようでしたら、
手順を紹介いただけないでしょうか。
---
いちおう試みたこと
(1)CSSでハンバーガーメニュー以外のヘッダーの部品の色を抜いた( navbarに background-color: transparent; 、サイト名に対してdisplay:none; )
→ その場所に空白ができた(できれば埋めたい)
(2)CSSでヘッダーを画面外に押しやり、ハンバーガーメニューだけを画面内に戻す
→ 試行錯誤中(やりすぎて他の部品に影響がでないか心配)
(3)「固定記事」でスマホ画面用のメニューを作り、パソコン画面では非表示にする(ページの追加や変更があるため、できればメニューの機能を使いたい)
(4)サイト名(navbar-brand)だけを非表示にし、ヘッダーの色を生かしたデザインへの変更を検討する(できれば最後の手段にしたい)
--- ---
よろしくお願いします。
横槍です。
少し気になって触ってみました。
「タブ」「ドロップダウン」にすると確かにヘッターを消すと、消えてしまいますね。
枠線などを標準のままにしてるとそこが空欄になります。
一番上にメニューがあるのがいいですか?
タブ型でないとダメですか?
自分は、左側にメニューを乗せていて、それが一番下に表示されるようにしています。
このメニューはdefualtで作っています。
<追記>
メニューですが、タブにすると、メインに設置しても消えちゃいますね。
これはバグなのかなぁ?仕様なのかなぁ?
なんとなく、予測される挙動ではないような気がします。
[無題]がタブのメニューが「メイン」に入っているところです。
jsuzuki 様、お返事が遅れてしまい、申し訳ございません。
以下の方法を試みました。
(1)スマートフォン画面上部にあるヘッダーの高さと横比率を考慮しながら、ページの最上部に置きたいものの画像を1つ用意する(一般的にはサイト名とロゴ)。
(2)自分でサーバーに転送するかたちで、画像ファイルをアップロードする
(3)Connect-CMSで読み込むスタイルシートの末端に、
「 .navbar-brand 」に対して
・ background-image: url(cssファイルから見て画像を置いた場所/画像.png);
・ background-repeat: no-repeat; を追記する
(4)これだけだとサイト名が画像の上に表示されるため、「 .navbar-brand 」に対して以下のサイトで紹介された方法を使い、サイト名を表示領域から追い出す。( https://ss-complex.com/css-cleartext/ )
(5)CSSでスマートフォンの画面幅の時はPC用のロゴ部分を非表示にする
---
実運用には向かないと思いますが、見かけ上は可能でした。
こんにちは。
永原です。
「スマホで「ヘッダーを表示しない」とメニュー出現の両立」
これ、開発の初期のころに悩んだまま、現在の形でそのままになっている。という状況です。
何か良い方法を考えたいです。
ということで、現状は最終形ではないこと、方針について、これから考える状況である。ということをお知らせします。
どういうのが使いやすいか、じっくり考えたいなー。
永原様、
お返事ありがとうございます。
状況について承知しました。
2週間ほど使ってみて優先度の低い要望はぽろぽろあるのですが、
気の利いた機能もたくさん付いており、
これから便利に使わせていただくことになりそうです。
今後ともよろしくお願いします。