サイト設定中で、ヘッダー上部に画像を追加しようとしています。
『設定 > ブランディング』の指示には以下のように書かれています。
幅広の長方形画像（高さ120ピクセル、アスペクト比3:1以上）を使用してください
そのため、120px × 2000px の PNG 画像を使用し、左側に配置され、ヘッダー全体を完全に埋めることを期待していましたが、そうなりません！何が間違っているのでしょうか？
「いいね！」 2
スクリーンショットから、画像は正しく左側に設定されているようです。Discourse のヘッダーは、幅が制限された wrap div の内部に表示されます。そのため、ロゴが画面の左端まで完全に広がらないのです。
手順では高さ 120px の画像をアップロードするよう求められていますが、Discourse 上ではその画像の高さが約 31px に縮小されます。つまり、アップロードした画像の幅は、サイト上で表示される際に 4 分の 1 になります。スクリーンショットのロゴは約 660px に見えるため、正しく表示されていると考えられます。
もしより幅の狭いロゴが入手可能であれば、それを試して見た目を確認してみることをお勧めします。
「いいね！」 2
サイモン、ありがとうございます。ロゴがヘッダー全体を完全に埋めるようにしたいのですが、可能でしょうか？
画像の幅を縮小しても、高さが31pxに制限されたままなので、見た目が良くありません。
理論的にはヘッダーの大部分を埋めることは可能ですが、完璧にするには試行錯誤が必要になるでしょう。そのためには、サイトの CSS を調整する必要があるかもしれません。興味がある場合は、Discourse テーマの初心者ガイドとDiscourse テーマの開発者ガイドをご覧ください。
logo 設定に関する私たちの指示を見ると、最適なアスペクト比を指定すべきだと考えます。スクリーンショットのロゴはアスペクト比が 3:1 を超えていますが、広すぎるように見えます。Discourse Meta フォーラムで使用されているロゴを見ると、約 150 x 40px で表示されていることがわかります。私にはそれが理想的なアスペクト比、つまり 4:1 より少し小さい比率のように思えます。
エフェクトを実現するには、CSS を使用するとよいでしょう。
例:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
「いいね！」 2
私の意図を見誤っていると思います。効果のことではなく、現在高さが 31px に制限されているヘッダーボックスに画像を埋め込みたいのです。
ここに画像のリンクを貼ってもらえますか？
「いいね！」 1
ご質問の意図は理解しました。ただし、ご希望の画像を作成するのが難しい場合は、グラデーションなしのロゴをアップロードし、CSS でグラデーションを追加するのはどうでしょうか。私には、それがより簡単で明確な方法に思えます。
ただし、最終的な画像が CSS では実現できない可能性もありますね？
「いいね！」 3
はい、その通りです。
ちょうど、私が求めているものを実現しているようthis forumを見つけました。
さらに検索すると、彼らが使用している CSSも見つかりましたが、私はまだここが新しく、そのような変更を行うために CSS を追加する方法を理解しようとしています。
あなたの例のサイトでは、2 つの画像が使用されています。
透明な背景を持つロゴと、d.header 上の背景画像です。
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
「いいね！」 4
はい、それが次の進め方のようです 
今はその CSS をどのように追加するかを理解する必要があります。
「Shades of blue」テーマを使用しています。
Discourse ガイドを読み進めていますが、もう少し読む必要があるかもしれません。
「いいね！」 1
CSS を追加するには、現在のテーマを更新した際にあなたの修正が上書きされないようにするため、新しいテーマコンポーネントを作成するのが最善の方法だと思います。
管理画面に移動し、カスタマイズ → テーマ → コンポーネント → インストール → 新規作成を選択してください。
その後、すべてのテーマに追加をクリックするか、手動でテーマを選択し、CSS/HTML の編集に進みます。
そして、CSS タブで CSS を記述してください。
「いいね！」 4
ありがとうございます。上記のチュートリアルに従うことができました。あと少しです！
Discourse の仕組みについて、少しだけ理解が深まりました。
今夜はもう少し時間を取って、さらに学ぼうと思います。
ご支援いただき、改めて感謝申し上げます。
「いいね！」 3
talksurf ヘッダーに関する参考を踏まえて、
背景画像の元は確認できますが、背景画像の上に浮かんでいる左側の「talksurf」画像の元は特定できていません。
「talksurf」を「設定 > ブランディング > ロゴ」に画像として追加すると、Discourse が元の 120px の高さから 31px まで縮小してしまうため、画像が非常に小さくなってしまいます。talksurf の高さは 31px よりもはるかに大きいです。
Talksurf のロゴは、管理画面のブランドセクションにアップロードされた通常のロゴです。
私は全く同じロゴをアップロードしましたが、カスタマイズなしで 40px 高さのロゴが表示されました:
そのため、なぜあなたのフォーラムでは 31px になるのか理解できません。HTML と CSS を確認できるよう、リンクを教えていただけますか？
また、彼らがヘッダーをどのようにカスタマイズしたかを確認する方法は以下の通りです:
- https://forum.talksurf.com/ を開く
- ブラウザ（例として Chrome を使用）で F12 を押して開発者ツールを表示
- 選択矢印をクリック:
- ヘッダーをクリック:
- 開発者ツールの右側にある CSS を確認:
最初のルールはデフォルトのものではなく、カスタムです。それを明確に知る方法はなく、経験則的に判断する必要があります…セレクターや SCSS ファイル名などを見て判断します。
「いいね！」 3
お手伝いありがとうございます。URL は https://yas-cfr.discourse.group/ です。ご覧の通り、あなたと同じロゴを使用しても、私の場合は高さが 35px になり、 yours (40px) と異なります。
Talksurf の画像のサイズは 322 x 63px です。
以下の CSS ルールを削除する必要があります：
.d-header #site-logo {
max-height: 35px !important;
}
これはおそらくテーマに記述されているため、上書きする必要があります。
このルールは !important を使用しているため、自身のルールにも以下を追加する必要があります：
.d-header #site-logo {
max-height: none !important;
}
「いいね！」 6
「いいね！」 3
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.