フォーラム掲示板について

以下の目的、注意点などご確認いただき、ご使用ください。

目的
Connect-CMSのユーザやConnect-CMSに興味のある方同士で自由に意見交換できる場を提供する目的で、コミュニティ掲示板として提供しています。
投稿方法
このサイトにユーザー登録することで、投稿することができます。
投稿内容
投稿内容は公開されます。
Connect-CMSに無関係な内容が記載されたと判断した場合、削除することがあります。
バグ情報
バグ(不具合)はGithub のIssues(https://github.com/opensource-workshop/connect-cms/issues)に記載していただくと、開発者に伝わりやすくなります。
また、セキュリティなど重大な事象の場合は、お問い合わせページよりお知らせください。優先的に調査いたします。
また、貢献ガイド(https://connect-cms.jp/abount/contributions)も参照をお願いします。
ユーザ登録
当サイトへのユーザ登録は以下のお問い合わせフォームよりお願いいたします。
https://connect-cms.jp/contact

フォーラムでのサポート範囲

当フォーラムでは、Connect-CMSのトラブルなどの相談も記載いただけますが、作業を肩代わりするものではありません。
作業の依頼は、株式会社オープンソース・ワークショップの調査メニューなどをご検討ください。
https://opensource-workshop.jp/service/rescue

フォーラム掲示板

Re: スマホで「ヘッダーを表示しない」とメニュー出現の両立

2021年2月10日 19時50分 [jsuzuki]

横槍です。

少し気になって触ってみました。

「タブ」「ドロップダウン」にすると確かにヘッターを消すと、消えてしまいますね。

枠線などを標準のままにしてるとそこが空欄になります。

一番上にメニューがあるのがいいですか?

タブ型でないとダメですか?

自分は、左側にメニューを乗せていて、それが一番下に表示されるようにしています。

このメニューはdefualtで作っています。

<追記>

メニューですが、タブにすると、メインに設置しても消えちゃいますね。

これはバグなのかなぁ?仕様なのかなぁ?

なんとなく、予測される挙動ではないような気がします。

[無題]がタブのメニューが「メイン」に入っているところです。

(更新:2021年2月10日 19時58分)
スレッドの記事一覧

先日は色々とありがとうございました。
そして、またすぐに現れて恐縮なのですが、
お知恵を拝借したく存じます。

--- ---
作成したWebサイトを一般公開する際、「サイト管理」画面で「ヘッダーを表示しない」の設定を選びたいと思っています。

しかし、スマートフォンとタブレットでは、(画面構成で言う)ヘッダー領域に配置したメニュー(navbar)のリンクはハンバーガーメニューにたたみ込まれて画面の一番上にあるヘッダーに入っており、設定で「ヘッダーを表示しない」を選ぶと一緒に非表示になってしまいます。

割りと簡単に解決できるようでしたら、
手順を紹介いただけないでしょうか。

---
いちおう試みたこと
(1)CSSでハンバーガーメニュー以外のヘッダーの部品の色を抜いた( navbarに background-color: transparent; 、サイト名に対してdisplay:none; )
  → その場所に空白ができた(できれば埋めたい)

(2)CSSでヘッダーを画面外に押しやり、ハンバーガーメニューだけを画面内に戻す
  → 試行錯誤中(やりすぎて他の部品に影響がでないか心配)

(3)「固定記事」でスマホ画面用のメニューを作り、パソコン画面では非表示にする(ページの追加や変更があるため、できればメニューの機能を使いたい)

(4)サイト名(navbar-brand)だけを非表示にし、ヘッダーの色を生かしたデザインへの変更を検討する(できれば最後の手段にしたい)

--- ---
よろしくお願いします。

Re: スマホで「ヘッダーを表示しない」とメニュー出現の両立
2021-02-10 [jsuzuki]

横槍です。

少し気になって触ってみました。

「タブ」「ドロップダウン」にすると確かにヘッターを消すと、消えてしまいますね。

枠線などを標準のままにしてるとそこが空欄になります。

一番上にメニューがあるのがいいですか?

タブ型でないとダメですか?

自分は、左側にメニューを乗せていて、それが一番下に表示されるようにしています。

このメニューは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週間ほど使ってみて優先度の低い要望はぽろぽろあるのですが、
気の利いた機能もたくさん付いており、
これから便利に使わせていただくことになりそうです。
今後ともよろしくお願いします。