スタイリングガイド

一般的なスタイリング方法

カスタムエレメントのCSSクラスを使用して、スタイリングをすることが可能です。
下記は検索結果を表示する領域の背景を白色に変更しています。

  .mf_search-results {
    background-color: #ffffff;
  }

ヒント

カスタムエレメントを既存ページ(すでに公開されているページ)などで使用した場合、そのページで適用されているCSSによって、カスタムエレメントのスタイルが変更されてしまう可能性があります。
フォントや色(文字色、背景)、その他スタイルにご注意ください。

また、CSSコードの優先度によって、時々に!importantを使用する必要があります。

.mf_search-results {
  background-color: #ffffff !important;
}

注意

ハイライトや検索結果のヘッダー、その他要素の出しわけなどは、属性を用いてスタイル変更が可能な場合もあります。
以下はハイライトのスタイリング例です。

<mf-search-results
  highlight-hidden
  highlight-color="#FF000080"
  no-highlight-animation
></mf-search-results>

詳しくはそれぞれのコンポネントページをご参照いただくか、ガイド付きセットアップを使用してご確認ください。

その他のCSSクラス

上記で説明させていただいたスタイリング以外にも、下記のように特殊なスタイルを当てることによって変更ができる要素もあります。

検索結果に表示される画像のCSS

検索結果に表示される画像の大きさやその他設定を行えます。
下記CSSはデフォルトで設定されている値です。

  .mf_imgsize-0 {
    display: none;
  }

  .mf_imgsize-1,
  .mf_imgsize-2,
  .mf_imgsize-3 {
    height: auto;
  }

  .mf_imgsize-1 {
    width: 175px;
  }

  .mf_imgsize-2 {
    width: 200px;
  }

  .mf_imgsize-3 {
    width: 225px;
  }

おすすめコンテンツのスクロールバー

macOS環境下ではおすすめコンテンツのスクロールバーは表示されません。
下記CSSを追加することによってmacOS環境下のChromeとSafariでスクロールバーを表示させることができます。(Firefoxは非対応)

また、macOS環境下ではMac本体のデバイス設定によってスクロールバーを常時表示することができます。Macのシステム設定→外観→スクロールバーを表示をご参照ください。

&::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

&::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

&::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 5px;
}