テーマギャラリー

CSS + props の組み合わせ例です。各カードの コードを見る に <style> と HTML が入っているので、そのままコピーして ajax-url だけ差し替えてください。
結果付きデモは最大4件表示です。キーワードはマーズフラッグのサービス語を使用しています。

検索 + 結果

企業・メディア・官公庁・EC など現実的なユースケース別の20テーマ。

1. コーポレートネイビー企業ポータル向け・部門ラベル・タイトル絞り込み

コードを見る

html

<style>.theme-corp-navy {
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 40%, #fff 100%);
  border-top: 3px solid #1e3a8a;
  padding: 1rem;
  --input-border-style: 1px solid #64748b;
  --hover-highlight-color: #e2e8f0;
  --button-color: #1e3a8a;
  --button-hover-color: #1e40af;
  --button-selected-color: #dbeafe;
  --button-selected-border-color: #1e3a8a;
  --border-color: #1e3a8a;
  --accent-color: #1d4ed8;
  --highlight-color: #93c5fd88;
}
.theme-corp-navy .mf-search-bar_button {
  border-radius: 2px !important;
  font-weight: 700 !important;
}
.theme-corp-navy .mf-search-results_body_result_texts_title a {
  color: #1e3a8a !important;
  font-weight: 600;
}
</style>

<div class="theme-corp-navy">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="社内・サイトを検索"
    submit-btn-text="検索"
    category-csv="ニュース,製品,サポート,採用"
    category-label="部門"
    sort-text-csv="関連度順,新しい順,古い順"
    sort-label="並び順"
    use-title-filter
    title-filter-label="タイトルのみ"
    doctype-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="導入事例"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#93c5fd88"
    link-target="blank"
    pagination-max="4"
  ></mf-search-results>
</div>

2. ニュースセリフ報道・メディア向け・ヘッダー非表示・下線入力

コードを見る

html

<style>.theme-news-serif {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  background: #faf8f5;
  border-bottom: 1px solid #d6d3d1;
  padding: 1.25rem 1rem;
  --input-border-style: 1px solid #1c1917;
  --hover-highlight-color: #f5f5f4;
  --button-color: #1c1917;
  --button-hover-color: #44403c;
  --border-color: #1c1917;
  --accent-color: #9a3412;
  --highlight-color: #fde68a90;
}
.theme-news-serif .mf-search-bar_input {
  border: none !important;
  border-bottom: 2px solid #1c1917 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.theme-news-serif .mf-search-bar_button {
  border-radius: 0 !important;
  letter-spacing: 0.08em;
  font-size: 0.75rem !important;
}
.theme-news-serif .mf-search-results_body_result { border-bottom: 1px solid #e7e5e4; }
.theme-news-serif .mf-search-results_body_result_texts_title a { color: #1c1917 !important; }
</style>

<div class="theme-news-serif">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="記事・ニュースをさがす"
    submit-btn-text="検索"
    suggest-max="8"
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="ニュース"
  ></mf-search-box>
  <mf-search-results
    header-hidden
    mars-logo-hidden
    highlight-color="#fde68a90"
    pagination-max="4"
  ></mf-search-results>
</div>

3. ファインダースカイMARS FINDER 製品サイト風・丸ピル

コードを見る

html

<style>.theme-finder-sky {
  font-family: 'Hiragino Sans', sans-serif;
  background: linear-gradient(160deg, #e0f2fe, #fff);
  padding: 1rem;
  --input-border-style: 1px solid #38bdf8;
  --hover-highlight-color: #e0f2fe;
  --button-color: #0284c7;
  --button-hover-color: #0369a1;
  --border-color: #0284c7;
  --accent-color: #0284c7;
  --highlight-color: #7dd3fc80;
}
.theme-finder-sky .mf-search-bar_input,
.theme-finder-sky .mf-search-bar_button { border-radius: 999px !important; }
.theme-finder-sky .mf-search-bar_button { font-weight: 700 !important; }
</style>

<div class="theme-finder-sky">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="サイト内を検索"
    submit-btn-text="検索"
    use-clear-input-btn
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="サイト内検索"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#7dd3fc80"
    pagination-max="4"
  ></mf-search-results>
</div>

4. リテールコーラルEC・販促向け・カテゴリ絞り込み・GO

コードを見る

html

<style>.theme-retail-coral {
  font-family: 'Hiragino Sans', sans-serif;
  background: linear-gradient(180deg, #fff7ed, #fff);
  padding: 1rem;
  --input-border-style: 2px solid #fb923c;
  --hover-highlight-color: #ffedd5;
  --button-color: #ea580c;
  --button-hover-color: #c2410c;
  --border-color: #ea580c;
  --accent-color: #c2410c;
  --highlight-color: #fdba7480;
}
.theme-retail-coral .mf-search-bar_input,
.theme-retail-coral .mf-search-bar_button {
  border-radius: 12px !important;
  border-width: 2px !important;
}
.theme-retail-coral .mf-search-results_body_result_texts_title a {
  color: #9a3412 !important;
  font-weight: 700;
}
</style>

<div class="theme-retail-coral">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="商品・サービスを探す"
    submit-btn-text="GO"
    use-clear-input-btn
    category-csv="製品,導入事例,サポート"
    category-all-text="すべて"
    category-label="カテゴリ"
    doctype-hidden
    sort-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="製品詳細"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#fdba7480"
    pagination-max="4"
  ></mf-search-results>
</div>

5. 抹茶カード和テイスト・結果カード分割・履歴

コードを見る

html

<style>.theme-matcha-card {
  font-family: 'Hiragino Sans', sans-serif;
  background: #f4faf5;
  padding: 1rem;
  --input-border-style: 1px solid #86a789;
  --hover-highlight-color: #e8f5e9;
  --button-color: #3d6b4f;
  --button-hover-color: #2f523c;
  --border-color: #3d6b4f;
  --accent-color: #3d6b4f;
  --highlight-color: #b7e4c780;
}
.theme-matcha-card .mf-search-bar_input,
.theme-matcha-card .mf-search-bar_button { border-radius: 6px !important; }
.theme-matcha-card .mf-search-results_body_result {
  background: #fff;
  border: 1px solid #e2efe4;
  border-radius: 10px;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem !important;
}
.theme-matcha-card .mf-search-results_body_result_texts_title a { color: #1b4332 !important; }
</style>

<div class="theme-matcha-card">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="キーワードを入力"
    submit-btn-text="検索する"
    use-clear-input-btn
    use-append-to-input
    search-history-max="8"
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="マーズフラッグ"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#b7e4c780"
    pagination-max="4"
  ></mf-search-results>
</div>

6. ミッドナイトドキュメント開発者向けダーク・アイコン検索・suggest非表示

コードを見る

html

<style>.theme-midnight-docs {
  font-family: 'Hiragino Sans', sans-serif;
  background: #0b1020;
  color: #e2e8f0;
  padding: 1rem;
  --input-border-style: 1px solid #818cf8;
  --hover-highlight-color: #1e1b4b;
  --button-color: #a855f7;
  --button-hover-color: #9333ea;
  --border-color: #a855f7;
  --accent-color: #c4b5fd;
  --highlight-color: #a855f766;
}
.theme-midnight-docs .mf-search-bar_input {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #4c1d95 !important;
  border-radius: 10px !important;
}
.theme-midnight-docs .mf-search-bar_button {
  border-radius: 10px !important;
  box-shadow: 0 0 14px #a855f755;
}
.theme-midnight-docs .mf-search-results_header,
.theme-midnight-docs .mf-search-results_body_result_texts_description,
.theme-midnight-docs .mf-search-results_body_result_texts_title a { color: #e2e8f0 !important; }
.theme-midnight-docs .mf-search-results_body_result_texts_url { color: #94a3b8 !important; }
.theme-midnight-docs .mf-pagination_button {
  background: #1e1b4b !important;
  color: #e2e8f0 !important;
  border-color: #6366f1 !important;
}
.theme-midnight-docs .mf-pagination_button.active-page {
  background: #a855f7 !important;
  color: #fff !important;
}
</style>

<div class="theme-midnight-docs">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    use-alt-submit-btn
    use-clear-input-btn
    suggest-hidden
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="API連携"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#a855f766"
    pagination-max="4"
  ></mf-search-results>
</div>

7. サポートコンパクトヘルプデスク向け・省スペース・header非表示

コードを見る

html

<style>.theme-support-compact {
  font-family: 'Hiragino Sans', sans-serif;
  background: #fff;
  border: 1px dashed #cbd5e1;
  padding: 0.75rem;
  --input-border-style: 1px solid #94a3b8;
  --hover-highlight-color: #f1f5f9;
  --button-color: #334155;
  --button-hover-color: #1e293b;
  --border-color: #334155;
  --accent-color: #0f172a;
  --highlight-color: #fde04770;
  --icon-size: 14px;
}
.theme-support-compact .mf-search-bar_input,
.theme-support-compact .mf-search-bar_button { border-radius: 4px !important; }
</style>

<div class="theme-support-compact">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="ヘルプを検索…"
    use-alt-submit-btn
    use-clear-input-btn
    suggest-max="5"
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="お問い合わせ"
  ></mf-search-box>
  <mf-search-results
    header-hidden
    mars-logo-hidden
    highlight-color="#fde04770"
    pagination-max="4"
  ></mf-search-results>
</div>

8. グラスマーケティングLP風すりガラス・結果カード

コードを見る

html

<style>.theme-glass-market {
  font-family: 'Hiragino Sans', sans-serif;
  background:
    radial-gradient(900px 280px at 8% -20%, #93c5fd55, transparent 55%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 1rem;
  --input-border-style: 1px solid #c7d2fe;
  --hover-highlight-color: #ffffff88;
  --button-color: #4f46e5;
  --button-hover-color: #4338ca;
  --border-color: #4f46e5;
  --accent-color: #4338ca;
  --highlight-color: #a5b4fc66;
}
.theme-glass-market .mf-search-bar_input {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(10px);
  border-radius: 14px !important;
}
.theme-glass-market .mf-search-bar_button { border-radius: 14px !important; }
.theme-glass-market .mf-search-results_body_result {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem !important;
}
</style>

<div class="theme-glass-market">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="キーワードを入力"
    submit-btn-text="検索"
    use-clear-input-btn
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="サーチテクノロジー"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#a5b4fc66"
    pagination-max="4"
  ></mf-search-results>
</div>

9. ハイコントラストアクセシビリティ重視・黒枠黄ハイライト

コードを見る

html

<style>.theme-a11y-hc {
  font-family: 'Hiragino Sans', sans-serif;
  background: #fff;
  padding: 1rem;
  --input-border-style: 3px solid #000;
  --hover-highlight-color: #ffff00;
  --button-color: #000;
  --button-hover-color: #222;
  --border-color: #000;
  --accent-color: #0000ee;
  --highlight-color: #ffff0099;
}
.theme-a11y-hc .mf-search-bar_input,
.theme-a11y-hc .mf-search-bar_button {
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}
.theme-a11y-hc .mf-search-results_body_result_texts_title a {
  color: #0000ee !important;
  text-decoration: underline !important;
}
.theme-a11y-hc .mf-pagination_button.active-page {
  background: #000 !important;
  color: #fff !important;
  outline: 3px solid #ffff00;
}
</style>

<div class="theme-a11y-hc">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="検索キーワード"
    input-title="サイト内検索"
    submit-btn-text="検索"
    submit-btn-title="検索を実行"
    use-clear-input-btn
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="会社情報"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#ffff0099"
    pagination-max="4"
  ></mf-search-results>
</div>

10. 和紙ペーパー罫線紙・明朝体・検索履歴

コードを見る

html

<style>.theme-washi-paper {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, #e7e0d433 24px),
    #f6f1e7;
  padding: 1rem;
  --input-border-style: 1px solid #a89070;
  --hover-highlight-color: #efe6d6;
  --button-color: #8b4513;
  --button-hover-color: #6b3410;
  --border-color: #8b4513;
  --accent-color: #7c2d12;
  --highlight-color: #f0c67488;
}
.theme-washi-paper .mf-search-bar_input {
  background: #fffaf0 !important;
  border-radius: 2px !important;
}
.theme-washi-paper .mf-search-bar_button { border-radius: 2px !important; }
.theme-washi-paper .mf-search-results_body_result_texts_title a { color: #5c3310 !important; }
</style>

<div class="theme-washi-paper">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="文書・資料を検索"
    submit-btn-text="検索"
    search-history-max="10"
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="検索エンジン"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#f0c67488"
    pagination-max="4"
  ></mf-search-results>
</div>

11. ファセットリンクuse-links・カテゴリ/ソートをリンクUI

コードを見る

html

<style>.theme-facet-links {
  font-family: 'Hiragino Sans', sans-serif;
  background: #f8fafc;
  border-left: 4px solid #0ea5e9;
  padding: 1rem;
  --input-border-style: 1px solid #94a3b8;
  --hover-highlight-color: #e0f2fe;
  --button-color: #0ea5e9;
  --button-hover-color: #0284c7;
  --button-selected-color: #bae6fd;
  --button-selected-border-color: #0284c7;
  --border-color: #0ea5e9;
  --accent-color: #0369a1;
  --highlight-color: #7dd3fc70;
}
.theme-facet-links .mf-search-bar_input,
.theme-facet-links .mf-search-bar_button { border-radius: 8px !important; }
.theme-facet-links .mf-search-results_body_result { border-bottom: 1px dashed #cbd5e1; }
.theme-facet-links .mf-search-results_body_result_texts_title a {
  font-weight: 700;
  color: #0c4a6e !important;
}
.theme-facet-links .mf-filters_use-links_item_buttons_button--selected {
  background: #bae6fd !important;
  border-color: #0284c7 !important;
}
</style>

<div class="theme-facet-links">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    use-links
    use-links-category-text="カテゴリ"
    use-links-sort-text="並び替え"
    use-links-pagemax-text="件数"
    category-csv="ニュース,製品,サポート"
    sort-text-csv="関連度順,新しい順,古い順"
    pagemax-csv="4"
    pagemax-default="4"
    pagemax-hidden
    use-clear-input-btn
    doctype-hidden
    search-on-load
    search-keyword="クラウドサービス"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#7dd3fc70"
    pagination-max="4"
  ></mf-search-results>
</div>

12. ターミナルグリーンコンソール風等幅・suggest/履歴オフ

コードを見る

html

<style>.theme-terminal-green {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: #052e16;
  color: #bbf7d0;
  padding: 1rem;
  --input-border-style: 1px solid #22c55e;
  --hover-highlight-color: #166534;
  --button-color: #22c55e;
  --button-hover-color: #16a34a;
  --border-color: #4ade80;
  --accent-color: #4ade80;
  --highlight-color: #22c55e66;
}
.theme-terminal-green .mf-search-bar_input {
  background: #14532d !important;
  color: #dcfce7 !important;
  border: 1px solid #22c55e !important;
  border-radius: 0 !important;
}
.theme-terminal-green .mf-search-bar_button { border-radius: 0 !important; }
.theme-terminal-green .mf-search-results_body_result_texts_title a { color: #86efac !important; }
.theme-terminal-green .mf-search-results_body_result_texts_description,
.theme-terminal-green .mf-search-results_body_result_texts_url { color: #86efac !important; }
.theme-terminal-green .mf-pagination_button {
  background: #14532d !important;
  color: #bbf7d0 !important;
  border-color: #22c55e !important;
  border-radius: 0 !important;
}
.theme-terminal-green .mf-pagination_button.active-page {
  background: #22c55e !important;
  color: #052e16 !important;
}
</style>

<div class="theme-terminal-green">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="query>"
    submit-btn-text="RUN"
    use-clear-input-btn
    suggest-hidden
    search-history-hidden
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="チャット"
  ></mf-search-box>
  <mf-search-results
    header-hidden
    mars-logo-hidden
    highlight-color="#22c55e66"
    pagination-max="4"
  ></mf-search-results>
</div>

13. サンセットジョイン入力とボタン結合・ドキュメント種別

コードを見る

html

<style>.theme-sunset-join {
  font-family: 'Hiragino Sans', sans-serif;
  background: linear-gradient(135deg, #fff1f2, #fff7ed 55%, #fefce8);
  padding: 1rem;
  --input-border-style: 1px solid #fb7185;
  --hover-highlight-color: #ffe4e6;
  --button-color: #e11d48;
  --button-hover-color: #be123c;
  --border-color: #e11d48;
  --accent-color: #e11d48;
  --highlight-color: #fda4af80;
}
.theme-sunset-join .mf-search-bar_input { border-radius: 8px 0 0 8px !important; }
.theme-sunset-join .mf-search-bar_button {
  border-radius: 0 8px 8px 0 !important;
  font-weight: 700 !important;
}
.theme-sunset-join .mf-search-results_body_result_texts_title a { color: #9f1239 !important; }
</style>

<div class="theme-sunset-join">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="資料を探す"
    submit-btn-text="Search"
    doctype-csv="html,pdf"
    doctype-all-text="すべて"
    sort-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="製品検索"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#fda4af80"
    show-content-size
    pagination-max="4"
  ></mf-search-results>
</div>

14. ティールライン左アクセント結果行・ソートラベル

コードを見る

html

<style>.theme-teal-lined {
  font-family: 'Hiragino Sans', sans-serif;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 1rem;
  --input-border-style: 1px solid #94a3b8;
  --hover-highlight-color: #f8fafc;
  --button-color: #0f766e;
  --button-hover-color: #0d9488;
  --border-color: #0f766e;
  --accent-color: #0f766e;
  --highlight-color: #5eead480;
}
.theme-teal-lined .mf-search-results_body_result {
  border-left: 3px solid #99f6e4;
  padding-left: 0.75rem !important;
  margin-bottom: 0.4rem;
}
.theme-teal-lined .mf-search-results_body_result_texts_title a { color: #115e59 !important; }
</style>

<div class="theme-teal-lined">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="キーワード"
    submit-btn-text="検索"
    sort-text-csv="関連度順,新しい順,古い順"
    sort-label="並び替え"
    sort-default="0"
    use-clear-input-btn
    doctype-hidden
    category-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="シェア"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#5eead480"
    pagination-max="4"
  ></mf-search-results>
</div>

15. 公共フォーマル官公庁・自治体向け・堅めグレー

コードを見る

html

<style>.theme-gov-formal {
  font-family: 'Hiragino Sans', sans-serif;
  background: #f5f5f4;
  border: 1px solid #a8a29e;
  padding: 1rem;
  --input-border-style: 1px solid #78716c;
  --hover-highlight-color: #e7e5e4;
  --button-color: #44403c;
  --button-hover-color: #292524;
  --border-color: #44403c;
  --accent-color: #1d4ed8;
  --highlight-color: #fef08a99;
}
.theme-gov-formal .mf-search-bar_input,
.theme-gov-formal .mf-search-bar_button { border-radius: 0 !important; }
.theme-gov-formal .mf-search-bar_button { font-weight: 700 !important; }
.theme-gov-formal .mf-search-results_body_result_texts_title a {
  color: #1e3a8a !important;
  text-decoration: underline;
}
</style>

<div class="theme-gov-formal">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="サイト内の情報を検索"
    submit-btn-text="検索"
    category-csv="お知らせ,手続き,施設案内"
    category-label="分類"
    doctype-csv="html,pdf"
    doctype-all-text="すべて"
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="団体事例"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#fef08a99"
    show-last-modified
    pagination-max="4"
  ></mf-search-results>
</div>

16. ユニバーシティ大学・研究機関向け・深緑クレスト

コードを見る

html

<style>.theme-univ-crest {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  background: linear-gradient(180deg, #ecfdf5, #fff);
  border-top: 4px double #065f46;
  padding: 1rem;
  --input-border-style: 1px solid #34d399;
  --hover-highlight-color: #d1fae5;
  --button-color: #065f46;
  --button-hover-color: #047857;
  --border-color: #065f46;
  --accent-color: #047857;
  --highlight-color: #6ee7b780;
}
.theme-univ-crest .mf-search-bar_button {
  border-radius: 2px !important;
  font-weight: 700 !important;
}
.theme-univ-crest .mf-search-results_body_result_texts_title a { color: #064e3b !important; }
</style>

<div class="theme-univ-crest">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="講義・研究・お知らせを検索"
    submit-btn-text="検索"
    use-clear-input-btn
    category-csv="お知らせ,研究,入試"
    category-label="区分"
    doctype-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="テクノロジー"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#6ee7b780"
    pagination-max="4"
  ></mf-search-results>
</div>

17. ヘルスケアティール医療・福祉向け・落ち着いた青緑

コードを見る

html

<style>.theme-health-teal {
  font-family: 'Hiragino Sans', sans-serif;
  background: #f0fdfa;
  padding: 1rem;
  --input-border-style: 1px solid #5eead4;
  --hover-highlight-color: #ccfbf1;
  --button-color: #0d9488;
  --button-hover-color: #0f766e;
  --border-color: #0d9488;
  --accent-color: #0f766e;
  --highlight-color: #5eead466;
}
.theme-health-teal .mf-search-bar_input,
.theme-health-teal .mf-search-bar_button { border-radius: 999px !important; }
.theme-health-teal .mf-search-results_body_result {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ccfbf1;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem !important;
}
</style>

<div class="theme-health-teal">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="症状・サービスを検索"
    submit-btn-text="検索"
    use-clear-input-btn
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="サポート"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#5eead466"
    no-highlight-animation
    pagination-max="4"
  ></mf-search-results>
</div>

18. バンクトラスト金融向け・紺×金アクセント

コードを見る

html

<style>.theme-bank-trust {
  font-family: 'Hiragino Sans', sans-serif;
  background: #0f172a;
  color: #f8fafc;
  padding: 1rem;
  --input-border-style: 1px solid #a16207;
  --hover-highlight-color: #422006;
  --button-color: #ca8a04;
  --button-hover-color: #a16207;
  --border-color: #fbbf24;
  --accent-color: #fbbf24;
  --highlight-color: #fbbf2466;
}
.theme-bank-trust .mf-search-bar_input {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #a16207 !important;
  border-radius: 2px !important;
}
.theme-bank-trust .mf-search-bar_button {
  border-radius: 2px !important;
  font-weight: 700 !important;
}
.theme-bank-trust .mf-search-results_header,
.theme-bank-trust .mf-search-results_body_result_texts_description { color: #cbd5e1 !important; }
.theme-bank-trust .mf-search-results_body_result_texts_title a { color: #fde68a !important; }
.theme-bank-trust .mf-pagination_button {
  background: #1e293b !important;
  color: #fef3c7 !important;
  border-color: #a16207 !important;
}
.theme-bank-trust .mf-pagination_button.active-page {
  background: #ca8a04 !important;
  color: #0f172a !important;
}
</style>

<div class="theme-bank-trust">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="サービス・手数料を検索"
    submit-btn-text="検索"
    use-clear-input-btn
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="サービス"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#fbbf2466"
    pagination-max="4"
  ></mf-search-results>
</div>

19. ファッションマガジン誌面風・黒×ローズ・ヘッダー非表示

コードを見る

html

<style>.theme-fashion-mag {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  background: #fff;
  border: 1px solid #e11d48;
  padding: 1.1rem;
  --input-border-style: 1px solid #e11d48;
  --hover-highlight-color: #ffe4e6;
  --button-color: #111;
  --button-hover-color: #000;
  --border-color: #e11d48;
  --accent-color: #e11d48;
  --highlight-color: #fb718580;
}
.theme-fashion-mag .mf-search-bar_input {
  border: none !important;
  border-bottom: 2px solid #e11d48 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.theme-fashion-mag .mf-search-bar_button {
  border-radius: 0 !important;
  letter-spacing: 0.12em;
  font-size: 0.75rem !important;
}
.theme-fashion-mag .mf-search-results_body_result_texts_title a {
  color: #111 !important;
  font-style: italic;
}
</style>

<div class="theme-fashion-mag">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="LOOK / 記事をさがす"
    submit-btn-text="FIND"
    doctype-hidden
    options-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="パラトライアスロン"
  ></mf-search-box>
  <mf-search-results
    header-hidden
    mars-logo-hidden
    highlight-color="#fb718580"
    pagination-max="4"
  ></mf-search-results>
</div>

20. 自治体ブルー市区町村サイト風・明るい公的ブルー

コードを見る

html

<style>.theme-municipal-blue {
  font-family: 'Hiragino Sans', sans-serif;
  background: #eff6ff;
  border: 2px solid #2563eb;
  padding: 1rem;
  --input-border-style: 2px solid #60a5fa;
  --hover-highlight-color: #dbeafe;
  --button-color: #2563eb;
  --button-hover-color: #1d4ed8;
  --border-color: #2563eb;
  --accent-color: #1d4ed8;
  --highlight-color: #93c5fd80;
}
.theme-municipal-blue .mf-search-bar_input,
.theme-municipal-blue .mf-search-bar_button { border-radius: 6px !important; }
.theme-municipal-blue .mf-search-results_body_result_texts_title a {
  color: #1e40af !important;
  font-weight: 700;
}
</style>

<div class="theme-municipal-blue">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="手続き・施設・お知らせ"
    submit-btn-text="検索"
    use-clear-input-btn
    use-links
    use-links-category-text="分野"
    use-links-sort-text="並び替え"
    category-csv="暮らし,子育て,防災"
    sort-text-csv="関連度順,新しい順"
    doctype-hidden
    pagemax-default="4"
    pagemax-hidden
    search-on-load
    search-keyword="導入インタビュー"
  ></mf-search-box>
  <mf-search-results
    mars-logo-hidden
    highlight-color="#93c5fd80"
    pagination-max="4"
  ></mf-search-results>
</div>

検索ボックスのみ

結果コンポーネントなし。リアルタイム結果・サジェスト向け。カードに余白を確保しているので、候補ポップオーバーが切れません。入力して確認してください。

B1. グラスリアルタイムすりガラス + use-realtime-results

コードを見る

html

<style>.theme-box-glass-rt {
  font-family: 'Hiragino Sans', sans-serif;
  background:
    radial-gradient(800px 260px at 10% -10%, #93c5fd66, transparent 55%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 1rem;
  min-height: 220px;
  --input-border-style: 1px solid #c7d2fe;
  --hover-highlight-color: #ffffff88;
  --button-color: #4f46e5;
  --button-hover-color: #4338ca;
  --border-color: #4f46e5;
  --accent-color: #4338ca;
}
.theme-box-glass-rt .mf-search-bar_input {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  border-radius: 14px !important;
}
.theme-box-glass-rt .mf-search-bar_button { border-radius: 14px !important; }
</style>

<div class="theme-box-glass-rt">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="入力すると候補が出ます"
    use-realtime-results
    urr-link-target="self"
    use-clear-input-btn
    doctype-hidden
    options-hidden
  ></mf-search-box>
</div>

B2. インクピルダーク丸ピル・リアルタイム・altボタン

コードを見る

html

<style>.theme-box-ink-pill {
  font-family: 'Hiragino Sans', sans-serif;
  background: #0f172a;
  color: #f8fafc;
  padding: 1rem;
  min-height: 220px;
  --input-border-style: 1px solid #334155;
  --hover-highlight-color: #334155;
  --button-color: #38bdf8;
  --button-hover-color: #0ea5e9;
  --border-color: #38bdf8;
  --accent-color: #38bdf8;
}
.theme-box-ink-pill .mf-search-bar_input {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-radius: 999px !important;
}
.theme-box-ink-pill .mf-search-bar_button { border-radius: 999px !important; }
</style>

<div class="theme-box-ink-pill">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="キーワードを入力…"
    use-realtime-results
    urr-link-target="self"
    use-alt-submit-btn
    use-clear-input-btn
    doctype-hidden
    options-hidden
  ></mf-search-box>
</div>

B3. ソフトサジェストピンク系・通常サジェスト・append

コードを見る

html

<style>.theme-box-soft-suggest {
  font-family: 'Hiragino Sans', sans-serif;
  background: linear-gradient(135deg, #fdf2f8, #faf5ff);
  padding: 1rem;
  min-height: 220px;
  --input-border-style: 1px solid #f9a8d4;
  --hover-highlight-color: #fce7f3;
  --button-color: #db2777;
  --button-hover-color: #be185d;
  --border-color: #db2777;
  --accent-color: #db2777;
}
.theme-box-soft-suggest .mf-search-bar_input,
.theme-box-soft-suggest .mf-search-bar_button { border-radius: 12px !important; }
</style>

<div class="theme-box-soft-suggest">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="キーワードを入力"
    submit-btn-text="検索"
    suggest-max="10"
    use-clear-input-btn
    use-append-to-input
    doctype-hidden
    options-hidden
  ></mf-search-box>
</div>

B4. スクエアテック角ばったアンバー・リアルタイム

コードを見る

html

<style>.theme-box-square-tech {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: #111827;
  color: #e5e7eb;
  padding: 1rem;
  min-height: 220px;
  --input-border-style: 2px solid #f59e0b;
  --hover-highlight-color: #451a03;
  --button-color: #f59e0b;
  --button-hover-color: #d97706;
  --border-color: #f59e0b;
  --accent-color: #fbbf24;
}
.theme-box-square-tech .mf-search-bar_input {
  background: #030712 !important;
  color: #f9fafb !important;
  border: 2px solid #f59e0b !important;
  border-radius: 0 !important;
}
.theme-box-square-tech .mf-search-bar_button {
  border-radius: 0 !important;
  border-width: 2px !important;
}
</style>

<div class="theme-box-square-tech">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="search://"
    use-realtime-results
    urr-link-target="blank"
    use-clear-input-btn
    suggest-hidden
    doctype-hidden
    options-hidden
  ></mf-search-box>
</div>

B5. ミントバーミント・アイコン検索・suggest-max

コードを見る

html

<style>.theme-box-mint-bar {
  font-family: 'Hiragino Sans', sans-serif;
  background: #ecfdf5;
  padding: 1rem;
  min-height: 220px;
  --input-border-style: 1px solid #6ee7b7;
  --hover-highlight-color: #d1fae5;
  --button-color: #059669;
  --button-hover-color: #047857;
  --border-color: #059669;
  --accent-color: #059669;
}
.theme-box-mint-bar .mf-search-bar_input,
.theme-box-mint-bar .mf-search-bar_button { border-radius: 6px !important; }
</style>

<div class="theme-box-mint-bar">
  <mf-search-box
    ajax-url="{取得した検索API URL}"
    input-placeholder="さがす"
    use-alt-submit-btn
    use-clear-input-btn
    suggest-max="7"
    doctype-hidden
    options-hidden
  ></mf-search-box>
</div>

テーマギャラリー ​

検索 + 結果 ​

検索ボックスのみ ​

テーマギャラリー

検索 + 結果

検索ボックスのみ