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) 完成イメージ


    • Related Articles

    • 検索窓を設置する

      検索窓を設置する 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" ...

    • 1. 検索窓を設置する Ver.2 ( 推奨 )

      ステップ1★検索窓を表示したいhtmlファイルにタグを埋め込む 1）検索窓を表示したいhtmlファイル（例 window.html）の<body>～</body>の中に、以下のタグを埋め込んでください。　 <!-- ↓検索窓用カスタムエレメント --> <mf-search-box ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search" ...

    • 1. 検索窓を設置する Ver.1 ( 初期バージョン )

      ステップ1★検索窓を表示したいhtmlファイルにタグを埋め込む 1） 検索窓を表示したいhtmlファイル（例 window.html）の<head>～</head>の中に、 以下のタグを埋め込んでください。　 <!-- ↓CSS --> <link href="https://ce.mf.marsflag.com/latest/css/mf-search.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8"> ...

    • はじめに

      カスタムエレメント版(CE版)最新バージョンについて記述しています。 検索窓を設置する 検索結果を設置する ずばケンを表示する ずば画像を表示する キーワードランキングを表示する カテゴリを利用する タイトルアイコンを表示する ドリルダウンを表示する 関連検索キーワードを表示する ■検索窓設置イメージ ■検索結果設置イメージ https://www.marsflag.com/searchresult/ce-result.html#/

    • サービス作成前なのですが、サンプルとして使えるajax-URLはありますか

      Q.サービス作成前なのですが、サンプルとして使えるajax-URLはありますか。 A.はい、ございます。以下のajax-URLをお使いください。 https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/bbce25dc/search 参考： カスタムエレメント設置ガイド->1. 検索窓を設置する カスタムエレメント設置ガイド->2. 検索結果を設置する