DocSearchのスタイリング

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

DocSearchのデフォルトカラースキームは、青のアクセントが特徴のグレーテーマです。

カラースキーム

このテーマはほとんどのウェブサイトで問題なく機能しますが、独自のテーマに合わせてスタイルを調整することをお勧めします。デフォルトテーマで使用されているCSSクラスを上書きすることで実現できます。

以下の注釈付きの例が各パーツのスタイリングに役立ちます：

/* Main dropdown wrapper */
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
}

/* Main category (eg. Getting Started) */
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
  color: darkgray;
  border: 1px solid gray;
}

/* Category (eg. Downloads) */
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  color: gray;
}

/* Title (eg. Bootstrap CDN) */
.algolia-autocomplete .algolia-docsearch-suggestion--title {
  font-weight: bold;
  color: black;
}

/* Description description (eg. Bootstrap currently works...) */
.algolia-autocomplete .algolia-docsearch-suggestion--text {
  font-size: 0.8rem;
  color: gray;
}

/* Highlighted text */
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: blue;
}

クレジット表記

当社はすべてのドキュメントサイト向けにDocSearchを無料で提供できることを嬉しく思っており、皆様には独自のテーマに合わせてスタイルを調整することを推奨します。唯一のお願いは、検索結果の横に「Search by Algolia」のロゴとリンクを保持していただくことです。

デフォルトのスタイリングでは、このロゴはドロップダウンに自動的に追加されます。これは、より多くの方々に当社の活動や、ご自身のウェブサイトで高速かつ関連性の高い検索を活用する方法を知っていただくための取り組みです。

独自の有料Algoliaアカウントを使用しクローラーを自身で実行している場合、ロゴを保持する必要はありません。

デバッグ

ブラウザの開発者ツールでドロップダウンのマークアップを検査するには、docsearch呼び出し時にdebug: trueを追加し、検査中に閉じないようにします。

docsearch({
  […],
  debug: true
});

その他の考慮事項

ドロップダウンは選択されたサジェストを.ds-cursorクラスでラップします。つまり、例えば.ds-cursor .algolia-docsearch-suggestion--contentを使用して選択されたサジェストのスタイルを設定できます。

小画面ではDocSearchはシングルカラムレイアウトに切り替わり、大画面ではスクリーンショットのような2カラムレイアウトを使用します。メディアクエリ（例：@media (min-width: 768px) {}）を追加して異なる表示を対象にできます。

高度なスタイリング

より詳細なスタイリングを行いたい場合は、SCSSソースコードを参照してください。_variables.scssにはすべてのデフォルトのテーマ設定、サイズ設定、ブレークポイントが含まれています。

リポジトリをクローンしてyarn run build:cssを実行することで独自のCSSファイルを生成できます。生成されたファイルは./dist/cdnに配置され、デフォルトのものの代わりに使用する必要があります。