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