フルカスタマイズテンプレート

全コンポーネントを使用し、様々なカスタマイズオプションを適用した実装例です。

例1: ベーシック設定

全コンポーネントを使用した基本的な設定です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  search-on-load
  search-keyword="サービス"
></mf-search-box>

<mf-featured-contents></mf-featured-contents>

<mf-drilldown></mf-drilldown>

<mf-search-results 
  use-related-keywords
></mf-search-results>

例2: クリアボタン付きシンプル検索

入力クリアボタンとカスタムハイライト色を使用した例です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  input-placeholder="サイト内を検索"
  submit-btn-text="検索"
  use-clear-input-btn
  doctype-hidden
  options-hidden
  search-on-load
  search-keyword="マーズ"
></mf-search-box>

<mf-search-results
  highlight-color="#90ee9080"
  pagination-max="7"
></mf-search-results>

例3: リアルタイム検索結果

サジェストの代わりにリアルタイム検索結果を表示する例です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  use-realtime-results
  urr-link-target="self"
  use-clear-input-btn
  input-placeholder="入力すると即座に結果を表示"
></mf-search-box>

例4: 詳細フィルター付き

カテゴリ、ドキュメントタイプ、日付範囲、タイトルフィルターなどの詳細フィルターを使用した例です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  category-csv="ニュース,製品,サポート,会社情報"
  doctype-csv="html,pdf,doc,xls,ppt"
  pagemax-csv="10,20,50"
  sort-text-csv="関連度順,新しい順,古い順"
  use-date-select
  date-select-from="2020-01"
  use-title-filter
  search-history-max="10"
  use-append-to-input
  search-on-load
  search-keyword="検索"
></mf-search-box>

<mf-featured-contents
  header-text="おすすめ記事"
  max-shown-items="3"
></mf-featured-contents>

<mf-drilldown
  header-text="カテゴリから探す"
></mf-drilldown>

<mf-search-results
  use-related-keywords
  related-keywords-header-text="こちらも検索されています"
  highlight-color="#ffd70080"
  link-target="auto"
></mf-search-results>

例5: リンクスタイルフィルター

ドロップダウンの代わりにリンクスタイルのフィルターを使用した例です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  use-links
  use-links-category-text="カテゴリを選択"
  use-links-sort-text="並び替え"
  use-links-pagemax-text="表示件数"
  category-csv="ニュース,製品,サポート"
  sort-text-csv="関連度順,新しい順,古い順"
  pagemax-csv="10,20,30"
  search-on-load
  search-keyword="フラグ"
></mf-search-box>

<mf-search-results></mf-search-results>

例6: ミニマル設定

最小限の要素だけを表示したシンプルな例です。

html

<mf-search-box 
  ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
  use-alt-submit-btn
  use-clear-input-btn
  doctype-hidden
  options-hidden
  search-on-load
  search-keyword="API"
></mf-search-box>

<mf-search-results
  header-hidden
  mars-logo-hidden
></mf-search-results>

CSSカスタマイズ

CSS変数でカラーをカスタマイズ

各コンポーネントは CSS 変数を使用してスタイルをカスタマイズできます。

html

<style>
.custom-search-box {
  --input-border-style: 2px solid #ff6b6b;
  --hover-highlight-color: #ffe0e0;
  --button-color: #ff6b6b;
  --button-hover-color: #ff5252;
  --button-selected-color: #ffe0e0;
  --button-selected-border-color: #ff6b6b;
  --border-color: #ff6b6b;
}

.custom-search-results {
  --accent-color: #ff6b6b;
  --highlight-color: #ffcccc80;
}
</style>

<div class="custom-search-box">
  <mf-search-box 
    ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
    search-on-load
    search-keyword="カスタム"
  ></mf-search-box>
</div>

<div class="custom-search-results">
  <mf-search-results></mf-search-results>
</div>

例7: グリーンテーマ

緑系の配色でカスタマイズした例です。

html

<style>
.green-theme-box {
  --input-border-style: 1px solid #10b981;
  --hover-highlight-color: #d1fae5;
  --button-color: #10b981;
  --button-hover-color: #059669;
  --button-selected-color: #d1fae5;
  --button-selected-border-color: #10b981;
  --border-color: #10b981;
}

.green-theme-results {
  --accent-color: #10b981;
  --highlight-color: #a7f3d080;
}
</style>

<div class="green-theme-box">
  <mf-search-box 
    ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
    use-clear-input-btn
    category-csv="ニュース,製品,サポート"
    search-on-load
    search-keyword="グリーン"
  ></mf-search-box>
</div>

<div class="green-theme-results">
  <mf-featured-contents></mf-featured-contents>
  <mf-search-results use-related-keywords></mf-search-results>
</div>

例8: ダークテーマ

ダークモード風の配色でカスタマイズした例です。

html

<style>
.dark-theme-box {
  --input-border-style: 1px solid #6366f1;
  --hover-highlight-color: #312e81;
  --button-color: #6366f1;
  --button-hover-color: #4f46e5;
  --button-selected-color: #312e81;
  --button-selected-border-color: #818cf8;
  --border-color: #818cf8;
  background-color: #1f2937;
  padding: 20px;
  border-radius: 8px;
}

.dark-theme-box .mf-search-bar_input {
  background-color: #374151;
  color: #f9fafb;
  border: 1px solid #4b5563;
}

.dark-theme-results {
  --accent-color: #818cf8;
  --highlight-color: #6366f180;
  background-color: #1f2937;
  color: #f9fafb;
  padding: 20px;
  border-radius: 8px;
}

.dark-theme-results .mf-search-results_header {
  color: #f9fafb;
}

.dark-theme-results .mf-search-results_body_result_texts_description {
  color: #d1d5db;
}

.dark-theme-results .mf-search-results_body_result_texts_url {
  color: #9ca3af;
}
</style>

<div class="dark-theme-box">
  <mf-search-box 
    ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f44f3a16/search"
    use-clear-input-btn
    use-alt-submit-btn
    doctype-hidden
    search-on-load
    search-keyword="ダーク"
  ></mf-search-box>
</div>

<div class="dark-theme-results">
  <mf-search-results></mf-search-results>
</div>

CSS変数リファレンス

css

.mf-search-box {
  --input-border-style: 1px solid #333;      /* 入力フィールドのボーダー */
  --hover-highlight-color: #8194ff25;        /* ホバー時のハイライト色 */
  --button-color: #166af1;                   /* ボタンの背景色 */
  --button-hover-color: #0063e6;             /* ボタンホバー時の背景色 */
  --button-selected-color: #c4e1ff81;        /* 選択されたボタンの背景色 */
  --button-selected-border-color: #007bff;   /* 選択されたボタンのボーダー色 */
  --icon-size: 16px;                         /* アイコンのサイズ */
  --border-color: #007bff;                   /* フォーカス時のボーダー色 */
}

SearchResults CSS変数

css

.mf-search-results {
  --accent-color: #166af1;                   /* リンクやアクセントの色 */
  --highlight-color: #ffff0050;              /* 検索キーワードのハイライト色 */
}

よく使うクラス

css

/* 検索ボックスの入力フィールド */
.mf-search-bar_input { }

/* 検索ボタン */
.mf-search-bar_button { }

/* サジェストリスト */
.mf-search-bar_dropdown-list { }

/* 検索結果アイテム */
.mf-search-results_body_result { }

/* 検索結果のタイトル */
.mf-search-results_body_result_texts_title { }

/* 検索結果の説明文 */
.mf-search-results_body_result_texts_description { }

/* ドリルダウン */
.mf-drill-down { }

/* 注目コンテンツ */
.mf-featured-contents { }

フルカスタマイズテンプレート ​

例1: ベーシック設定 ​

例2: クリアボタン付きシンプル検索 ​

例3: リアルタイム検索結果 ​

例4: 詳細フィルター付き ​

例5: リンクスタイルフィルター ​

例6: ミニマル設定 ​

CSSカスタマイズ ​

CSS変数でカラーをカスタマイズ ​

例7: グリーンテーマ ​

例8: ダークテーマ ​

CSS変数リファレンス ​

SearchBox CSS変数 ​

SearchResults CSS変数 ​

よく使うクラス ​

フルカスタマイズテンプレート

例1: ベーシック設定

例2: クリアボタン付きシンプル検索

例3: リアルタイム検索結果

例4: 詳細フィルター付き

例5: リンクスタイルフィルター

例6: ミニマル設定

CSSカスタマイズ

CSS変数でカラーをカスタマイズ

例7: グリーンテーマ

例8: ダークテーマ

CSS変数リファレンス

SearchBox CSS変数

SearchResults CSS変数

よく使うクラス