ウィジェットのデザインや動作を、CSSやJavaScriptを使ってより自由にカスタマイズすることができます。
❗重要
この設定を使用するには、CSSおよびJavaScriptの基本的な知識が必要です。
将来的にウィジェットがアップデートされた際、カスタムCSSやJavaScriptがデザインに影響を与えたり、不具合を引き起こす可能性があります。
CREMAでは、カスタムコードの使用によって発生する問題については責任を負いかねますので、あらかじめご了承ください。
本記事の内容
ウィジェット全体に適用する CSS・JavaScript の設定
すべてのウィジェットに共通のスタイルや動作を適用したい場合、以下の手順でCSSやJavaScriptを設定できます。
この設定により、ストア全体に表示される全ウィジェットに影響を与えます。
設定手順:
レビュー → 設定メニュー にアクセスします。
一般設定 → ウィジェット(一般)タブ を開きます。
「表示設定」項目で 詳細設定を表示 をクリックします。
以下の各項目に、適用したいCSS・JavaScriptコードを入力します:共通 CSS(PC)、共通 CSS(モバイル)、共通 JavaScript(PC)、共通 JavaScript(モバイル)。
⌘ 注意: PCとモバイル用でコードを別々に設定する必要があります。
ページ下部の 保存 をクリックします。
特定のウィジェットにのみ CSS・JavaScript を適用する方法
この設定では、特定のウィジェットだけにカスタムスタイルや動作を適用できます。
他のウィジェットには影響を与えず、個別にデザインや機能を調整したい場合に使用します。
設定手順:
レビュー → 設定メニュー にアクセスします。
ウィジェット設定タブ を開きます。
カスタマイズしたいウィジェットの 「設定」 をクリックします。
以下のフィールドに、適用したいコードを入力します:このウィジェットにのみ適用するCSS,このウィジェットにのみ適用するJavaScript。
保存 をクリックします。