カスタムCSS

ハウツーガイド すべてのプラン 3 分で読めます

設定、フォント、カラーではできないこと（特別なホバー効果、1つの項目のフォントサイズ、テーマの小さな修正など）には、スタイルシート / CSS を使います。CSSはメニューと一緒に保存され、公開するとストアフロントに追加されます。

ノート

カスタムCSSには、CSSの基本的な知識が必要です。コードを書きたくない場合は、お問い合わせください。スタイルの小さな変更は無料でお手伝いします。

カスタムCSSを追加する

1. 詳細設定タブを開く

   メニューエディターで、左サイドバーの 詳細設定 アイコン（</>）をクリックします (1)。

   

   詳細設定タブを開き (1)、スタイルシート / CSS にCSSを入力します (2)。

2. CSSを追加する

   スタイルシート / CSS (2) にCSSを入力または貼り付けて、//enter css custom here のプレースホルダーを置き換えます。

3. 保存して公開する

   保存 をクリックし、公開 をクリックします。ストアフロントを強制的に再読み込みして結果を確認します。

正しい要素を対象にする

CSSはそのままページに追加され、このメニューだけに限定されないため、セレクターの範囲を絞ってください。

• すべてのメニュー — .gm-menu から始めます。
• 1つのメニュー — .gm-menu-<ID> から始めます。IDを調べるには、ストアフロントでメニューを右クリックして 検証 を選びます。
• 1つの項目 — 項目の設定の 詳細設定 セクションで 追加のクラス名 を付け（メニュー項目を編集するをご覧ください）、そのクラスを使います。

たとえば、追加のクラス名が sale-item の項目を太字の赤にするには、次のようにします。

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

詳細設定 タブには、メニューを選択したマーケットに限定する マーケット別の提供状況 もあります。マーケット別にメニューを表示するをご覧ください。

トラブルシューティング

CSSが反映されない

• 保存した後に 公開 をクリックしたことを確認してください。
• アプリ自体のスタイルには !important が使われていることが多いため、ルールにも必要な場合があります。
• 閉じ波括弧の閉じ忘れなどの入力ミスがないか確認してください。1つのエラーで、それ以降のルールが無効になることがあります。

関連ページ

• メニューの色を調整するメニューバー、サブメニュー、タブ、商品ラベル、カートに追加ボタンの色を設定します。
• メニューのフォントを調整するメニューの各部分のフォントファミリー、太さ、サイズを選択します。
• メニュー項目を編集する項目のタイトル、リンク、アイコン、色、バッジ、サブメニュー、表示設定を変更したり、項目を複製、移動、削除したりします。

このページは役に立ちましたか？

問題を報告