【カスタムCSS】サポートサイトに任意のCSSを当てる方法
サポートアクションではブランド設定やカスタムCSSから簡単に見た目の調整が可能ですが、実はサポートサイトでも任意のCSSを当てることが可能です。
このアンサーでは、太字の背景を例にとりサポートサイトに任意のCSSを当てる方法を記載します。
※文字の背景色を変更するアンサーはこちらにあるため、今回はCSSの説明自体は省きます
サポートサイトの初期表示(太字に背景色が設定されている)
サポートサイトのCSS適用後の表示(太字に背景色が設定されていない)
サポートサイトに任意のCSSを当てる方法
該当サポートサイトの設定から、メタ>タグに以下のようにCSSを設定し保存することでサポートサイトの太字の背景色を消すことができます。
タグに入れてる内容は以下です。
この内容を任意に変更することで、アンサーの好きな要素(ex. 見出し、文章、画像)に任意のCSSを当てることが可能です。
<style> div[class^="faqContent_content"] strong { background: transparent; } </style>
保存した設定は新アーキテクチャに変更済みの場合は即時、未変更の場合は数分後に反映されます。
サポートサイトにCSSを当てる際の注意点
サポートサイトはサポートアクションとは異なる点が複数あるため、CSSを当てる際は注意が必要です。
- アンサーの中の要素にはclassが割り振られないためタグで指定する必要がある
- 「プレビューからCSSセレクタを取得する」ができないため検証ツールからCSSセレクタを取得する必要がある
- classにランダムな接尾語が付与される
などが具体的な差異です。
そのため、サポートサイトにCSSを当てる際は、検証ツールの要素から該当の要素を指定しセレクタを確認する必要があります。
また、ランダムな接尾語の対策が必要になるため、classを記載する際は[class^="固定のclass名"]で前方一致でのセレクタを指定することを推奨します。
以下に、上記を加味したサポートサイト上の主な要素のセレクタ例を記載します。
参考としてご活用ください。
対象 | セレクタ例 |
全体:デフォルトのヘッダー | header[class^="header_header"] |
全体:検索バー | div[class^="searchbar_searchBar"] |
記事ページ:コンテンツエリア(メイン・サイドバー含) | div[class^="body_body"] |
記事ページ:コンテンツエリア(サイドバー) | div[class^="columns_sub"] |
記事ページ:コンテンツエリア(メイン) | div[class^="columns_main"] |
記事ページ:ページタイトル | div[class^="faqTitle_title"] h1 |
記事ページ:目次 | nav[class^="faqTableOfContents_toc"] |
記事ページ:アンサー本文(全体) | div[class^="faqContent_content"] |
記事ページ:アンサー本文>文章 | div[class^="faqContent_content"] p |
記事ページ:アンサー本文>見出し1 | div[class^="faqContent_content"] h1 |
記事ページ:アンサー本文>見出し2 | div[class^="faqContent_content"] h2 |
記事ページ:アンサー本文>見出し3 | div[class^="faqContent_content"] h3 |
記事ページ:アンサー本文>太字 | div[class^="faqContent_content"] strong |