Experience Cloud 開発者ガイド
jカスタム CSS でのテンプレート要素の上書き
エクスペリエンスビルダーで CSS エディタを使用して、デフォルトのテンプレートと [テーマ] パネルのスタイルを上書きするカスタム CSS を追加します。また、パディングの調整など、標準コンポーネントの外観を少し変更することもできます。
テンプレート項目の CSS に若干の変更を加える場合は、Chrome DevTools を使用してページを調査し、項目の完全修飾名と CSS クラスを見つけます。そして、この情報を使用して、項目の標準 CSS をカスタム CSS で上書きします。ページとスタイルの調査と編集についての詳細は、「Google Chrome DevTools」の Web サイトを参照してください。
コンポーネントを調査するのに最も簡単な方法は、プレビューモードでページを表示することです。次の例では、[見出し] コンポーネントを調査して、コンポーネントの完全修飾名 (forceCommunityHeadline) を特定しています。
次に、スタイルを適用する要素 (例: headlineTitleText) を探します。要素にクラス名がない場合は、要素を対象とした特定のセレクタを作成する必要があります。
この情報を元に、デフォルトのタイトル色を上書きするためのカスタムスタイルを作成できます。
1.forceCommunityHeadline .headlineTitleText
2{
3 color: red;
4}次に、このスタイルを CSS エディタに追加します。
同様に、カスタム CSS を使用して、コンポーネント全体を非表示することもできます。
1.forceCommunityHeadline
2{
3 display: none;
4}