# 「スタッフカラー」投稿通知のCSS改善 **URL:** https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093 **Category:** UX **Created:** [2022 年 7 月 6 日午後 12:33 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093 "2022-07-06T12:33:40Z") **Posts on this page:** 6 **Page:** 1
### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP) #### Post date: [2022 年 7 月 6 日午後 12:33 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/1 "2022-07-06T12:33:40Z")
モバイルの投稿でスタッフの色にマージンがないことに気づきました。デスクトップ版でもいくつかの小さな改善を行いました。 PRを作成しても構いませんが、デスクトップ/モバイルのCSSがどこにあるのかよくわかりません。 以下の変更を行いました。 デスクトップ ```plaintext .moderator .regular>.cooked { margin-left: 8px; } ``` モバイル ```plaintext .moderator .regular>.cooked { padding-top: 1em; padding-left: 1em; } ``` # 変更前 vs 変更後 デスクトップでは、ブロックの開始位置をユーザー名に合わせただけです（より見た目が良いように思えました）。（角丸はローカルなもので、上記のコードからは削除しましたが、すぐに作成したテンプレートに追加します） ![image](https://global.discourse-cdn.com/meta/original/4X/0/1/0/010242e28ed69e9452c92ec7571ff97b90adcc53.png) ![image](https://global.discourse-cdn.com/meta/original/4X/b/a/7/ba7293d5cb8c99ccea1889ca66159ed93742f81b.png) モバイルでは、テキストが中央揃えになるようにパディングを修正しました。 ![image](https://global.discourse-cdn.com/meta/original/4X/5/1/b/51bc69c353cbe66b32cfce82841e1af3a0766c4d.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/4/7/d/47dc0c6dec2095032d5d1b9a30cfb380da75e7c5.jpeg) ---
### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP) #### Post date: [2022 年 7 月 6 日午後 11:07 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/2 "2022-07-06T23:07:33Z")
メタでも再現できますか？モデレーターはこの投稿に「スタッフカラー」を追加できますか？ 編集：メタでも問題が発生することを確認しました。[こちら](https://meta.discourse.org/t/staff-color-applies-to-quoted-message/55774/2?u=marcp)と[こちらでモバイルバージョンを強制](https://meta.discourse.org/t/staff-color-applies-to-quoted-message/55774/2?mobile_view=1)（クリック後にリフレッシュしてモバイルをロードしてください） これはコアへの最初のPRです。標準に準拠しているか確認してください。しかし、このPRはこれをよりスムーズにするはずです。 > ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [2022 年 7 月 7 日午後 1:32 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/4 "2022-07-07T13:32:43Z")
ボックスの配置は理想的ではないことに同意しますが、可能であればテキストの配置と投稿の幅を維持したいと思います… インデントにより左揃えがシフトし、投稿のコンテンツが他の投稿よりも狭くなります。 ![image(1)](https://global.discourse-cdn.com/meta/original/4X/1/1/3/113c52dc70403df213c2c49252aeca6ed5b35d5e.png) ---
### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP) #### Post date: [2022 年 7 月 7 日午後 8:47 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/5 "2022-07-07T20:47:05Z")
ご意見に同意します。 以下に例を示します。テスト目的で詳細をより明確にするために色を変更しました。 ![image](https://global.discourse-cdn.com/meta/original/4X/b/e/a/bea9e01988fa151ac4185174c2b32af2d5607c0b.png) > > > screenshot in https://meta.discourse.org/t/staff-color-post-notice-css-improveme…nts/232093/5?u=marcp ---
### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi) #### Post date: [2022 年 7 月 8 日午前 5:16 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/6 "2022-07-08T05:16:26Z")
それは私には良く見えます。@awesomerobot さん？ ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [2022 年 7 月 8 日午後 1:57 UTC](https://meta.discourse.org/t/staff-color-post-notice-css-improvements/232093/7 "2022-07-08T13:57:43Z")
はい、これで懸念が解消されました。@MarcPさん、ありがとうございます！