CSSを使ったHack デジタルエクスペリエンスサイト




+ [コミュニティの記事詳細コンポーネントからタイトルフィールドとURL名フィールドを非表示にする方法](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000A7syrSAB)
+ [SALESFORCE COMMUNITY BUILDER ヘッダーのグローバル検索バーを非表示にする方法](https://simplysalesforce.com/2016/02/24/til-how-to-hide-the-global-search-bar-on-the-standard-community-builder-header/)
+ [Build You Own (LWR) community site ではCSSを編集できる設定が使えない](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000MhnFPSAZ)
+ [カスタマー サービス コミュニティ テンプレートでユーザー プロファイル メニューを非表示にするにはどうすればよいですか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000BsPa7)
+ [Lightning Web コンポーネントの内部要素の CSS をオーバーライドするにはどうすればよいですか?](https://qiita.com/Keiji_otsubo/items/6af5c98bca1c35157ec7)

----------------
+ [エクスペリエンスサイト　Top Articles　サイトページに表示されるフォントサイズについて](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000O6CvB)

:::note
この画面と同じなら、CSSでテキスト文字の大きさを変更しているようです。

https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000A8XTMSA3
:::

+ [ケースの作成時にフィールドに完了ボタンが表示されない](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000074Vrvj)

:::note
Within Experience Cloud some of the CSS Classes for buttons are shared and so if you hide one button somewhere it can hide another button somewhere.

In a sandbox if you temporarily comment out the CSS Override does the button come back?
:::


+ [記事のURL及びタイトルの非表示](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007I4j8y)

:::note
記事のURL及びタイトルの非表示については、英語ですが同じような質問があって解答されています。display:none;を使って非表示にしていますね。

https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000A7syrSAB
:::

+ [デジタルエクスペリエンスサイトでAuraを使用して構築をしています。sf側が元々作成しているCSSを編集したいのですが、編集することはできるのでしょうか？](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007aibK6)

:::note
!importantを付与しても上書きされませんか？

適切なclassを指定して、変えたいところだけに適用できないですか？

```CSS
.THIS .slds-modal__container { 
  width : 60% !important; max-width : 80% !important; 
} 
```

LWCではできないけど、Auraでは可能だと書かれてます。

Placeholder position change to top of the input field
https://salesforce.stackexchange.com/questions/326184/placeholder-position-change-to-top-of-the-input-field
:::


+ [グローバルアクション確認ボタンのテキストの名前を変更しますか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000A99EA)

:::note
You can override the css to change the text. Follow these steps:

1. Open the CSS editor in the builder.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/2cf6d6f6-fa87-8564-6177-88f43d619457.png)

2\. Copy/Paste this code there, Save and Publish:
(The content property holds the new value)

```
 .label.bBody { 
            visibility: hidden; 
    		position: relative; 
        } 

.label.bBody:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0;
    		right: 0;
            content: "Submit"; 
        }
```

:::

+ [Hide Case Status from Community User with CSS](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007aiski)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c93a7210-fbcb-cd7f-dbe1-28b79d609369.png)

:::note
Are you working on a Lightning Web Runtime website or an Aura website?

If it's an Aura site, each page has a CSS class added to the <body> tag in HTML. If you view the web page you want to change in your browser, use the browser inspect tool (https://developer.chrome.com/docs/devtools/open/) to view the HTML code, look for this element <body class="">. 

To use the browser inspect tool, you can right-click anywhere on a web page and select "Inspect". It depends on the page, but you might see something like <body class="comm-page-detail"> or <body class="comm-page-custom-some-page-name">. Then you can use that class name to target the page in css. 

Lightning Web ランタイム Web サイトまたは Aura Web サイトで作業していますか?

Aura サイトの場合、各ページには HTML の <body> タグに CSS クラスが追加されます。変更したい Web ページをブラウザで表示する場合は、ブラウザ検査ツール (https://developer.chrome.com/docs/devtools/open/) を使用して HTML コードを表示し、この要素 <body class を探します。 ="">。

ブラウザ検査ツールを使用するには、Web ページ上の任意の場所を右クリックし、[検査] を選択します。ページによって異なりますが、<body class="comm-page-detail"> や <body class="comm-page-custom-some-page-name"> のようなものが表示される場合があります。次に、そのクラス名を使用して、CSS でページをターゲットにすることができます。
:::

# できないこと？

+ [Experience Cloud Siteでの CMS content（News）の色の指定について](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SWdEw)