2. 検索結果を設置する

2. 検索結果を設置する

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

<!-- ↓CSS -->

    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.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"

        ></mf-search-box>


        <!-- ↓オーガニック用エレメント -->

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

 

</div>

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

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

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

※オレンジ色の部分は、カスタムエレメント版のバージョン番号です。
※「1.0-latest」は、「1.0.X.X」の範囲内で最新バージョンを提供いたします。

4) 完成イメージ
​