デスクトップからモバイルビューへのロゴとヘッダーの高さを増やすCSS

Firefox のインスペクター経由で、PC デスクトップからロゴの高さを操作する CSS タグは次のとおりです。

.d-header .title {
  --d-logo-height: 4em;
}

しかし、この CSS タグをデスクトップのデフォルトテーマの CSS エディターに挿入しても、PC デスクトップや携帯電話で表示されるロゴの高さには何も影響しないことに気づきました。
しかし、同じ CSS コードをモバイルに挿入すると、PC デスクトップだけでなく携帯電話でもロゴの高さが変更されます。これは Discourse のバグですか、それとも何か見落としていますか。

「いいね!」 1

こんにちは。

念のため、このCSSはどこに配置しましたか?

「いいね!」 2

ヘルプを求めるリクエストは、もう少しうまく構成すると常に良いでしょう。ここの多くの人々は非常に熱心に手伝ってくれますが、物事を行う方法はたくさんあるため、できるだけ早く助けを得るには、良い説明が不可欠です :slight_smile:

また、ローカルで何かをテストしている場合は、URL に ?mobile_view=1 を追加するのを忘れないでください。

「いいね!」 3

Firefoxのインスペクター経由で、PCデスクトップからロゴの高さを操作するCSSタグは以下の通りです。

.d-header .title {
  --d-logo-height: 4em;
}

しかし、このCSSタグをデスクトップ用のデフォルトテーマのCSSエディターに挿入しても、PCデスクトップや携帯電話で表示されるロゴの高さには何も影響がないことに気づきました。
しかし、同じCSSコードをモバイル用に挿入すると、PCデスクトップだけでなく携帯電話でもロゴの高さが変更されます。これはDiscourseのバグでしょうか、それとも何か見落としているのでしょうか。

再現しようとしましたが、再現できませんでした。

モバイルでは正しく変更され、デスクトップには影響しません。

エディタにこのCSSを追加すると、デスクトップで期待どおりに動作します。

モバイルの場合は、ヘッダーではなくロゴの高さを設定するだけで済みます。

お役に立てば幸いです。

「いいね!」 1

ありがとうございます。別のマシン、Ubuntu 22.04(Webサーバー)を実行しているマシンで試したところ、デスクトップのCSSバケットのCSSコードが正しくレンダリングされました。そのため、Windows 7を実行している他のPCデスクトップではブラウザの問題が発生している可能性があります。

モバイルCSSバケットでは、以下に制限されているようです。

.d-header #site-logo {
  height: 3em;
}

3emを超えようとしても、キャッシュを更新しても、携帯電話(GS23)のロゴの高さは変わりません。

何か考えはありますか?

はい、ロゴの max-width を解除してみてください。これにより、制約から解放されるはずです。

「いいね!」 1

設定ではそのオプションが見つかりませんでした。CSSまたはRailsのコマンドライン入力で実行しますか?もしそうなら、どのようなものですか?

それはCSSのようになります。

.d-header #site-logo {
  max-width: unset;
}

それでもうまくいかない場合は、!important を追加してください。

「いいね!」 3

ご協力ありがとうございます。

後から来て、デスクトップとモバイルの両方の表示でロゴサイズを大きくしたい方のために。

  1. カスタマイズ → テーマ → デフォルト → CSS/HTMLの編集

a) デスクトップのバケットに投稿:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) モバイルのバケットに投稿:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
「いいね!」 2

これらは1つのルールにすることができます:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

最初のルールセットもコンパクトにできると思いますが、すぐにどうやるかは覚えていません。

「いいね!」 2

もう一つ役立つのは、モバイル表示でロゴを左に移動させるためにパディングを減らす方法を追加することです。どう思われますか?

.wrap {
  padding-left: 0;
}

この時点で、CSSの入門コースを受講することをお勧めします。なぜなら:

独自のテーマ開発の詳細については、開発者カテゴリをお読みください。

「いいね!」 2

チャーリー、ありがとう。助かります。
Firefoxなどのインスペクターを使用して、いくつかの解決策を導き出すことには慣れています。

Discourseのコア機能にロゴのリサイズが含まれていない理由について、何か考えはありますか?ウェブサイトのブランディングは非常に重要であり、この点での詳細設定の欠如は驚くべきことです。

「いいね!」 1

「ロゴの操作」は、テーマやテーマコンポーネント内で、他のすべてのスタイリングと同様に、完全に可能です。

ご自身で行うには、html/css/jsの基本を学び、metaにある豊富なドキュメントを調べる必要があります。または、希望する変更を行うために雇用できる人を探す必要があります。

後者は、マーケットプレイスカテゴリで行うことができます。

元の質問には回答があったので、これでトピックを終了できると思います。

フォーラムの成功を祈っています。

「いいね!」 3

個人的には、フォーラムプラットフォームのコア機能に会社ロゴのサイズ設定が含まれるとは思いません。さらに、当社のソフトウェアはオープンソースであり、上記のようにこれを達成するためのサポートを提供しています。独自のカスタマイズを開発する方法に関する情報も多数提供しています。

「いいね!」 3

チャーリー様

「ロゴの操作」とは、UI内でロゴのサイズを変更できる機能のことです。

ご協力ありがとうございます。

このトピックは、最後の返信から30日後に自動的にクローズされました。新しい返信は許可されていません。