カテゴリリスト画像のセットアップについて

こんにちは!

カテゴリリストに、最近の閲覧でユーザーの画像が表示されるのと同じように、カテゴリ画像を表示したいと考えています。カテゴリ - Discourse Meta

Chrome の開発者ツールでいじくり回して、望む結果に近づけることができました。

これは CSS で実現可能でしょうか、それとも HTML テンプレートを編集する必要がありますか?

ライブで確認したい場合は、ウェブサイトは APF - Auberge du Pixel Fringant (apfcommu.ga) で公開されています。

お時間をいただきありがとうございます :slight_smile:

こんにちは!

非常に可能性が高いと思いますし、Chrome をいじってすでに見つけられたようです。もしご質問が「修正をどこに適用すればよいか?」という点であれば、こちらに例があります:

また、こちらにも多くの例があります:Search results for 'category-list' - Discourse Meta

正直なところ、HTML要素を移動させることでごまかしました。

例では、カテゴリの説明を削除して、説明を画像に直接追加することで動作するようにしています。私はこれを避けたいと考えています。

ああ、なるほど、私のミスですね :sweat_smile:
実は CSS があまり得意ではないので、position: relative を使う方向に進むのはお勧めできません。HTML の並び替えを行う場合、こちらの方が役立つでしょう:

また、https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs がありますが、discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub の一部を変更したい場合は、おそらくプラグインが必要になるでしょう。

CSSも私自身はあまり得意ではありません。

リソースをありがとうございます。時間ができたらそれを見てみたいと思います。

おそらくプラグインの道を進む必要がありそうです。

この新しいコンポーネントをお勧めします:

これにより、CSS でスタイリングしやすいよりクリーンなマークアップが得られます。また、ほぼ同じクラスセレクタを使用して、デスクトップとモバイルで同じ見た目を実現できます。