Avatar Size and Shape を使用すると、サイトのさまざまな場所でアバターのサイズと形状を簡単にカスタマイズできます。
名前
説明
latest avatar size
「最新」ページでのアバターサイズを選択します。デフォルト値は small（25px）です。変更を反映させるには、ctrl+F5 または cmd+shift+R でページを再読み込みしてください。
topic avatars size
トピックページでのアバターサイズを選択します。デフォルト値は 45px です。変更を反映させるには、ctrl+F5 または cmd+shift+R でページを再読み込みしてください。
header avatars size
ヘッダーでのアバターサイズを選択します。デフォルト値は 32px です。変更を反映させるには、ctrl+F5 または cmd+shift+R でページを再読み込みしてください。
header height
ヘッダーの高さを選択します。選択は header_avatars_size + 10px を基準に行う必要があります。例えば、header_avatars_size を 90px に設定する場合、ヘッダーは 100px にする必要があります。デフォルト値は 60px です。
margin top
ヘッダーからの距離（px）を選択します。デフォルト値は 0px です。
avatars border radius
サイト上のアバターの border-radius を選択します。この設定は、ヘッダーのアバターやユーザーカードのアバターを含む、すべてのアバターに適用されます。0% は正方形、50% は角丸の形状に対応します。デフォルト値は 50% です。
mobile avatars size
モバイル端末でのトピックページのアバターサイズを選択します。最小値は 45px（デフォルト）、最大値は 80px です。変更を反映させるには、ctrl+F5 または cmd+shift+R でページを再読み込みしてください。
latest avatar size は /latest ページのアバターサイズを変更します。すべてのアバターは medium サイズまで表示されます。large 以上では、トピックに最後に投稿したユーザーのアバターのみが表示されます。header avatar size は 60px までのサイズで適切に動作します。それ以上のサイズのアバターを使用する場合は、ヘッダーの高さ（header height）を増やす必要があり、それに伴ってヘッダーとページ内の他の要素との間隔（margin top）も増やす必要があります。
通知バブル（トピックと PM）の位置（高さ）は変更されていません。これらのバブルはアバターサイズに合わせて横方向にのみ移動します。
このテーマコンポーネントは、以下のガイドを参考に作成されました。
当社でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。
「いいね！」 46
How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.
「いいね！」 3
ariznaf
2019 年 10 月 12 日午後 9:24
4
Great component, we were looking for it.
But it would be great to change the avatar flair size too, if you are using them in your site (as we do).
Thank you.
すごく素敵ですね
あと、これは一部のフロントページのカテゴリー配置で見られるトピック投稿者div内のアバターにも適用されますか？適用されていないようですが、もし適用されると素敵なんですけど。
jrgong
2020 年 3 月 30 日午前 10:10
7
@dax 小さな問題を見つけました。Quick Messages プラグインと競合しています。
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- これが原因です*/
}
CSS セレクターに何か #… 要素を追加すると良いかもしれません。
「いいね！」 1
いいえ、残念ながらそれを行う方法を見つけられませんでした。
「いいね！」 1
dax
2020 年 4 月 2 日午後 1:11
12
zuker:
これを行う方法が見つかりましたか？
モバイルでのサイズをデフォルトの45pxから80pxまで設定できる新しい設定が追加されました。
「いいね！」 6
ダニエラさん、ありがとうございます。もう一つ提案があります。large または extra_large で返信のアバターをそのまま表示するオプションがあれば、CSS でサイズを調整できるので助かります。あるいは、プラグイン側で返信アバターのサイズを縮小するオプションがあると理想的です。私はこのようにしたいと考えていますが、もちろん、medium サイズのアバターを拡大すると、大きなアバターはぼやけてしまいます。
「いいね！」 2
素晴らしいプラグインです！ありがとうございます！
@Dax 現在見えている唯一の問題は、ヘッダー（より濃い色）にあります。ホバーは白に設定されており、検索ボタンやハンバーガーメニューでは問題なく機能していますが、アバターを少し大きく設定すると、ホバーのサイズがアバターよりも小さくなってしまいます。これを修正するにはどうすればよいでしょうか？
dax
2020 年 4 月 9 日午前 9:59
15
このコンポーネントはサイトの色を一切変更しません。背景色を上書きしているのは、おそらくあなたが使用している別のテーマです。
「いいね！」 3
ariznaf
2020 年 4 月 9 日午前 10:21
16
素晴らしいコンポーネントです。
いいえ、色の変更はありません。
私たちはこれを使用しており、非常に満足しています。
「いいね！」 2
@dax 説明が不十分だったかもしれません。色ではなく、コンテナのサイズについてです。このメタページの右上にある自分のアバターアイコンにカーソルを合わせると、:hover プロパティを持つ色付きの四角が表示され、その四角はアバターよりも大きくなっています。
しかし、このプラグインでアバターを拡大すると、:hover 四角のサイズがアバターより小さくなり、少し不自然に見えてしまいます。
「いいね！」 1
dax
2020 年 4 月 9 日午後 12:40
18
その div の高さを変更すると、他の 2 つのアイコンの位置も再調整する必要があります。そのため、以前はそれを避けるようにしていました。現在は、div にホバーした際の背景色を透明にするだけに留めています。
committed 12:36PM - 09 Apr 20 UTC
Remove background e borders colors on hover from the avatar div. In this way the… height and positioning of the other icons will remain unchanged.
「いいね！」 3
単に CSS で
.header-dropdown-toggle #current-user
をターゲットにすることはできないでしょうか？
CSSでこれを実現しようとしているのですが、すべてのヘッダーアイコンが同じクラスを使用しているため：
<li class="header-dropdown-toggle">
すべてがオンになったりオフになったりしているように見えます。アバターアイコンだけを :hover で反応しないようにするには、どのようにすればよいのでしょうか？
「いいね！」 1
余談ですが、アバターに :hover 状態（白い枠線）を設定することで、CSS でそれなりに見栄えの良いエフェクトを実現できました。あとは、li 要素の背景が他の部分と一緒にハイライトされないようにできれば完璧なんですが…
「いいね！」 1
当社でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。
