b481
1
CSSやその他に非常に不慣れなので、以下が信じられないほど初歩的かつ/かつ長々としている場合はお詫び申し上げます。
私の質問は、CSSを通じて「ember」要素を特定して削除する方法は何かということです。おそらく「display:none」プロパティを使用するのでしょう。
単なるランダムな例として、トピックの下部にあるブックマークボタンを消したいとしましょう。Chromeのコンソールで要素を検索すると、すべてのトピックフッターボタンのCSSは見えるものの、特定のボタンだけのCSSは表示されません。そのため、ここで「display:none」を適用すると、特定のボタンだけでなく、すべてのボタンに適用されてしまいます。
CSSのボタンタグに「display:none」を適用した結果。
適用前：
「display:none」を適用後：
特定の1つだけを削除することは可能だと確信しています。また、これは他のember要素にも同様に適用できるはずです。以前、他のember要素（具体的には、作曲タスクバーにある「両端揃え」ボタン）を削除できたことがありますが、その際は当フォーラムの他のユーザーの助けを借りて実現しました。
では、具体的に「display:none」を適用できるCSSタグをどのように特定すればよいのでしょうか？
重ねて申し上げますが、これが初歩的すぎたり、長々としている場合はお詫び申し上げます。
IAmGav
(Gavin Perch)
2
これは管理設定で対応可能です。CSS は不要です。
管理 > 設定 > 基本設定 > 投稿メニュー
「いいね！」 2
b481
3
例が不適切だったらすみません。CSS 以外のオプションがあることを知らなかったため、単にランダムな Ember 要素を選びました。
より良い例としては、ユーザーページが挙げられます。問題は、CSS に何を含めることができるかを特定する方法を探しているということです（上記で参照した「MD Composer Extras」スレッドの引用投稿以降の議論と同様に）。これにより、理論的には Ember 要素の表示を停止させることができます。
より具体的な例としては、プロフィールの「アクティビティ」セクションにあるサイドバーが挙げられます。私の知る限り、この設定には特定のオプションは存在せず、CSS を使用する必要があります。
neounix
(Dark Matter)
4
@b481 さん、こんにちは。
お探しのものは「CSS セレクター」（略して単に「セレクター」とも呼ばれます）と呼ばれます。CSS セレクターは、スタイルを適用したい DOM 要素を「見つける」（つまり選択する）ために使用されます。
例えば、今私がタイピングしている場所から、コンポーザー内のあなたのユーザー名（b481）のセレクターを探してみましょう（これは単なる例です）。
まず、マウスカーソルをその要素（コンポーザー内の b481 というユーザー名）の上に移動させ、右クリックします。するとメニューが表示され、「Inspect（検証）」という項目があります。
「Inspect」をクリックすると、開発者コンソールが開きます（私は現在 macOS の Chrome を使用しています）。運が良ければ、目的の要素がハイライト表示されます。
コンソールでハイライトされた要素上で右クリックすると、「Copy（コピー）」→「Copy selector（セレクターをコピー）」というメニュー項目が表示されます。
これを選択してセレクターをコピーすると、この例では以下のようになります。
#ember433 > span > a
これはあまり良いセレクターではありません。なぜなら #ember433 は Ember によって割り当てられるためです。しかし、コンソール内の要素上にマウスを移動させると、対象のページとコンソールの両方で要素がハイライト表示されます。幸いなことに、これで簡易的に概略を把握できました。
次に、非表示にしたい要素を見つけ、この例ではその要素（このケース）上で再度右クリックし、マウスカーソル下のメニューから「add attribute（属性の追加）」を選択して、セレクターのテストを行うことができます。
私はこれを例として以下のキャプチャで行いました。
これで、ID が ‘b481’ の要素がその DOM の部分で非表示になっています。
つまり、この場合、以下の CSS を使用すればよいことがわかります。
span.action-title{
display:none;
}
これをテーマに追加すれば、その要素を非表示にできます。
この場合、同じセレクターを持つ要素がページ上に複数存在しないか確認し、また、選択したセレクターが「貪欲」になり、非表示にしたくない他のページの要素まで選択しないかも確認する必要があります。
セレクターはより具体的であればあるほど良いでしょう。
例えば、このケースでは、セレクターを親要素の子要素として指定することで、より具体的にできます（未検証）。
div.compose-action-title > span.action-title{
display:none;
}
ご覧の通り、より具体的になっています。この時点で、変更したい要素を探す方法について、かなり良いイメージが掴めたはずです。
良い探索を！
最後に一点だけ。
JavaScript や jQuery を使って要素を選択することもできますが、Discourse/Ember のような SPA アプリでは、少なくとも私の場合、CSS セレクターがよく機能します。JavaScript セレクターは、DOM を「巧妙な」方法でトラバースする必要がある場合（これも非常に楽しいですが）にのみ使用する傾向があります。
お役に立てれば幸いです。
関連記事:
「いいね！」 4
b481
6
@neounix さん、どうもありがとうございます。後で試してみます。
b481
7
少し問題が発生しました。上記で投稿した「bookmarks」の例を削除しようとしたのですが、付随している Ember の番号が絶えず変わるため、削除することができません。
以下は、番号が 52 のときに使用したコードです。!important を使わない場合も試しました。
span.ember52.ember-view{
display:none !important;
}
neounix
(Dark Matter)
8
良いスタートですが、@b481 さん、まだ改善の余地があります。
はい、@b481 さん、すでに申し上げたとおり、Ember が割り当てたクラスや ID に基づいてセレクターを選択すべきではありません。
Ember が割り当てたクラスではないセレクターを使用する必要があります。これは以前の返信で説明した通りです。
サイドバー：参考までに、この方法では（上記でおっしゃったように）DOM からこれらのアイテムを「削除」しているのではなく、単に「非表示」にしているだけです。ただし、これは別の話題ですね 
Ember によって自動的に割り当てられるものではないセレクターを使用してください。
お役に立てれば幸いです。
注:
（あなたの例では）トピックの下部にあるブックマークボタンを非表示にしようとしている場合、以下の方法を試しましたか？
#topic-footer-button-bookmark
{
display:none;
}
申し訳ありませんが、あなたの投稿内容からは、DOM のどの要素（例または実際のもの）を非表示にしたいのか、正確にはわかりません。
「いいね！」 1
これらのセクションのいずれかを非表示にするには、以下のようにしてください：
.user-secondary-navigation li:nth-child(3) {
display: none;
}
非表示にしたい番号に数値を置き換えてください。
もちろん、これはリストが予測可能な場合にのみ機能します。そうでない場合、CSS では解決できません。
「いいね！」 2
b481
10
慣れるまで時間がかかりましたが、ようやくコツを掴めました。
@neounix さん、ありがとうございます。とても助かりましたし、私のフォーラムにとって大きなプラスになるでしょう。
「いいね！」 2
b481
11
「投稿全体を引用」オプションのみを削除し、左側のオプションは残す方法をご存じの方はいらっしゃいますか？両者は同じ CSS と同じ親 div を共有しているため、片方だけを削除する方法が見つかりません。
neounix
(Dark Matter)
12
@b481 さん、こんにちは
[属性=値] 選択子を使用できます。
参考:
https://www.w3schools.com/cssref/sel_attribute_value.asp
属性は title、値は Blockquote (⌘⇧9) を指定します。
例（未検証）:
button[title="Blockquote (⌘⇧9)"]
{
display:none;
}
あるいは以下も試してみてください:
button[title*="Blockquote"]
{
display:none;
}
未検証のため、調整が必要かもしれません。
また、別の「荒っぽい」方法として、svg 要素のみを非表示にする方法もあります:
svg.d-icon-quote-right
{
display:none;
}
他にも有効な CSS 選択子が考えられます。より優れた選択子を提案できる方もいるはずです。
これがあなたの課題解決の助けになれば幸いです。
関連リンク:
-
CSS Attribute Selectors
-
以下も参照
「いいね！」 2
