カテゴリボックス 画像配置の問題

こんにちは。素晴らしいAir Themeを使用しています。

カテゴリをボックスとして設定しました。200 x 200pxの画像はきれいに収まりません。右側のボックスのように、画像が端まで色が付くようにするには、どのようなCSSが必要か分かりません。

アップデートのお知らせです。アップロード画面には次のように表示されています。「推奨アスペクト比は1:1、最小サイズは200pxです。空白のままにすると画像は表示されません。」- 1000x1000にしても変化がないため、テーマの動作方法に問題があるのではないかと思います。画像がボックスの端まで表示されないだけでなく、画像の後ろに以前の青い背景の一部が表示されています。

何か考えやアイデアはありますか?

こんにちは。ホストされているトライアルをご利用でしょうか?もしそうであれば、残念ながらスタータープランではCSSを編集することはできません。

「いいね!」 1

Hawkさん、

返信ありがとうございます。

いいえ、Air Theme を使用したクリーンなセルフホストインストールです。画像の配置が正しく行われないのは、テーマの問題だと考えています。推奨される比率でファイルをアップロードしただけで、表示結果は上記のようになります。

プレースホルダーのように、画像をアップロードする前に表示されるエッジまで画像が表示されると嬉しいです。少なくとも、画像の後ろに見えるプレースホルダーの青い残骸がないようにしてください。

CSS コードをどこかに配置して修正することはできますが、どこにどのようなコードを入れるべきかわかりません。ただし、前述したように、テーマがアップロードされたファイルを正しく表示していないことが原因である可能性があると考えています。

親のdivに margin-top: .5em が設定されており、親要素と子要素の画像が下にずれています。

この動作を上書きしてみてください。

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

この問題は公式に修正されるべきだと思います。

「いいね!」 2

Coin-coin le Canapinさん、こんにちは。

CSSコードをありがとうございます。どこに追加すればよいかよくわかりません。オンラインで検索したところ、airテーマのコンポーネントとして追加する必要があると考えています。追加して有効にしましたが、何も変更されませんでした。おそらく間違っているのでしょう。

テーマで確認する必要があると思います。テーマページに投稿して修正できるか見てみます。

Hawkさん

この投稿でAir Themeチームの誰かをメンションして、この問題の解決を試みる方法はありますか?

この投稿で他のユーザーが言及していたCSSを試しましたが、うまくいかないようです。

よろしく
Bec

Becさん、デザイナーに確認を依頼しましたが、週末のため、現時点ではいつ対応できるかお伝えできません。申し訳ありません。

「いいね!」 1

どういたしまして。どうもありがとうございます。

「いいね!」 1

こんにちは!ご報告ありがとうございます。確認して、すぐに回答いたします。または、テーマに修正を追加します。

「いいね!」 1

修正はこちらです → DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

エアテーマにインストールされているモダンカテゴリボックステーマコンポーネントを更新すると、問題が解決するはずです。

ありがとうございます!

「いいね!」 4

ジョーダン様

ありがとうございます。おかげさまで、背景にプレースホルダーが表示される問題は解決しました。

プレースホルダーのように、画像をボックスの端まで表示させるにはどうすればよいか教えていただけますでしょうか。その方がずっと見栄えが良く、画像をアップロードしたときも同じようになると期待していました。

もしCSSが必要な場合、どこに追加すればよいでしょうか?以前試したCSSは機能しなかったのですが、テーマの変更が許可されていないのか、それとも単に私がディスコースに慣れていないだけなのか分かりません。

よろしくお願いいたします。
ベック

ジョーダン様

ご報告です。

3番目のカテゴリボックスを編集していたら、突然すべての画像が自動的に配置されたのです。そのため、今はすべて問題なく表示されています。

ご協力いただき、ありがとうございました。

こんにちは、ジョーダンさん、

実際、3つ連続していないカテゴリがあると問題になります。3つ目の画像が連続して追加されると、前のメッセージのようにすべてきれいに収まります。しかし、2つしか連続していない場合、画像はボックス内にきれいに配置されず、四角形として配置されます。そのため、きれいに見える画像と四角形の画像が混在することになります。

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.