1. 検索窓を設置する

1. 検索窓を設置する

1) 検索窓を表示したいhtmlファイルの<head>〜</head>の中に、以下のタグを埋め込んでください。
 必ず直リンクでcssを読み込んでください。デザインを編集されたい場合はオーバーライドしてください。

<!-- ↓CSS -->

<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">
※オレンジ色の部分は、カスタムエレメント版のバージョン番号です。
※「1.0-latest」は、「1.0.X.X」の範囲内で最新バージョンを提供いたします。

2) 検索窓を表示したいhtmlファイルの<body>〜</body>の中に、以下のタグを埋め込んでください。

<div class="mf_finder_container">

 

        <!-- ↓検索窓用カスタムエレメント -->

        <mf-search-box

           submit-text=""

           ajax-url="//xxxx.marsflag.com/xxxx__xxxx__xxxx/x_search.x"

           serp-url="//xxxx.marsflag.jp/result.html#/"

        ></mf-search-box>

 

</div>

※青字の部分はお客様によって異なります。

※緑字の部分は検索結果を表示するhtmlファイルのURLを記載してください。（省略せず記載されることを推奨します。）

3) 検索窓を表示したいhtmlファイルの</body>の直前に、以下のタグを埋め込んでください。

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script> 
※オレンジ色の部分は、カスタムエレメント版のバージョン番号です。
※「1.0-latest」は、「1.0.X.X」の範囲内で最新バージョンを提供いたします。

4) 完成イメージ