カスタマイズなしの状態

カスタムエレメントmf-search-boxを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"></mf-search-box>

レンダリング結果

ページ右上に設置する検索窓の典型例

コード

css追加

  <style>
  .my-search-box {
    width: 300px;
  }
  .my-search-box .mf_finder_searchBox_submit {
    padding: 0;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   options-hidden
   doctype-hidden
   ignore-search-result
   placeholder="サイト内検索"
   submit-text=""
   ></mf-search-box>

レンダリング結果

検索結果受信時にデータをフォームへ反映させず無視する

属性 ignore-search-resultを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-ignore-search-result .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-ignore-search-result"
   ignore-search-result
   ></mf-search-box>

レンダリング結果

検索語入力エリアのプレースホルダをカスタマイズ

属性 placeholderを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-placeholder .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-placeholder"
   placeholder="サイト内検索はこちら"
   ></mf-search-box>

レンダリング結果

検索語入力エリアのtitle属性をカスタマイズ

属性 input-titleを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-input-title .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-input-title"
   placeholder="ここにマウスオーバーしてください"
   input-title="検索したいワードを入力するエリアです"
   ></mf-search-box>

レンダリング結果

カテゴリの選択用UIを非表示にする

属性 category-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   category-hidden
   ></mf-search-box>

レンダリング結果

検索結果並び順の選択用UIを非表示にする

属性 sort-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   sort-hidden
   ></mf-search-box>

レンダリング結果

ページ毎表示件数の選択用UIを非表示にする

属性 pagemax-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   pagemax-hidden
   ></mf-search-box>

レンダリング結果

画像サイズの選択用UIを非表示にする

属性 imgsize-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   imgsize-hidden
   ></mf-search-box>

レンダリング結果

カテゴリ、検索結果並び順、ページ毎の表示件数、画像サイズの選択用UIを非表示にする

属性 options-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   options-hidden
   ></mf-search-box>

レンダリング結果

文書種別選択用UIを非表示にする

属性 doctype-hiddenを利用する。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   doctype-hidden
   ></mf-search-box>

レンダリング結果

検索ボタンのテキストを属性「submit-text」でカスタマイズ

属性 submit-textを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-submit-text .mf_finder_searchBox_submit span {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-submit-text"
   submit-text="test"
   ></mf-search-box>

レンダリング結果

文書種別選択用セレクトボックスのAll用表示テキストをカスタマイズ

属性 doctype-all-textを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doctype-all-text .mf_finder_searchBox_doctype_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-doctype-all-text"
   doctype-all-text="全て"
   ></mf-search-box>

レンダリング結果

カテゴリ選択用セレクトボックスのAll Category用表示テキストをカスタマイズ

属性 category-all-textを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-category-all-text .mf_finder_searchBox_category_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-category-all-text"
   category-all-text="全カテゴリ"
   ></mf-search-box>

レンダリング結果

検索結果並び順選択用セレクトボックスの表示テキストをカスタマイズ

属性 sort-text-csvを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-sort-text-csv .mf_finder_searchBox_sort_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-sort-text-csv"
   sort-text-csv="マッチ順,日時順"
   ></mf-search-box>

レンダリング結果

ページ毎表示件数の選択肢をカスタマイズ

属性 pagemax-csvを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-pagemax-csv .mf_finder_searchBox_pagemax_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-pagemax-csv"
   pagemax-csv="10,50,100"
   ></mf-search-box>

レンダリング結果

画像サイズ選択用セレクトボックスの表示テキストをカスタマイズ

属性 imgsize-text-csvを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-imgsize-text-csv .mf_finder_searchBox_imgsize_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-imgsize-text-csv"
   imgsize-text-csv="画像なし,画像小,画像中,画像大"
   ></mf-search-box>

レンダリング結果

検索条件選択用UIにセレクトボックスでなくリンクを使う

属性 use-linksを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-use-links .mf_finder_searchBox_links {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-links"
   use-links
   ></mf-search-box>

レンダリング結果

リンクを使う場合の表示言語設定

属性 use-links でリンク表示にした場合は、 属性lang をカスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 設定することで、リンクの表示言語を切り替えることができる。

コード

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   use-links
   lang="ja"
   ></mf-search-box>

レンダリング結果

検索条件選択用UIにセレクトボックスのトグル表示を使う

属性 use-toggleを利用する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_toggle * {
    background-color: pink;
  }
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_misc {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-toggle"
   use-toggle
   ></mf-search-box>

レンダリング結果

検索結果