mf-x SearchResults

カスタマイズなしの状態

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

コード

html

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

レンダリング結果

表示言語の設定

カスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に属性langを設定する。

コード

css追加

  <style>
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-lang .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-lang"
   lang="ja"
   ></mf-search-results>

レンダリング結果

ページャーに表示するページ番号アイテムの最大数を5に変更

属性 :pager-item-countで指定する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-pager-item-count .mf_finder_pager_item_before_pages,
  .my-pager-item-count .mf_finder_pager_item_before_pages *,
  .my-pager-item-count .mf_finder_pager_item_current,
  .my-pager-item-count .mf_finder_pager_item_after_pages,
  .my-pager-item-count .mf_finder_pager_item_after_pages * {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-pager-item-count .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-pager-item-count"
   :pager-item-count=5
   ></mf-search-results>

レンダリング結果

検索結果のヘッダ部分を表示しない

属性 hide-headerで指定する。

コード

css追加

  <style>
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-hide-header .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   hide-header
   ></mf-search-results>

レンダリング結果

属性 hide-pagerで指定する。

コード

css追加

  <style>
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-hide-pager .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   hide-pager
   ></mf-search-results>

レンダリング結果

属性 use-related-keywordsで指定する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-use-related-keywords .mf_finder_relatedkeywords {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-use-related-keywords .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-use-related-keywords"
   use-related-keywords
   ></mf-search-results>

レンダリング結果

検索結果をクリックすると同一ウィンドウ内で画面遷移する

属性 target-selfで指定する。

コード

css追加

  <style>
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-target-self .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
    target-self
  ></mf-search-results>

レンダリング結果

ヘッダ部分をCSSでカスタマイズ

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-header-css .mf_finder_organic_header_wrapper {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-header-css .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:before {
    content:"「";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:after {
    content:"」での検索で、";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:before {
    content:"";
    margin:0;
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:after {
    content:"件がヒットしました。";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:before {
    content:"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:after {
    content:"件目から";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:before {
    content:"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:after {
    content:"件目までを表示しています。";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header {
    display: flex;
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header .mf_finder_organic_nums {
    display: flex;
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
  }
  </style>

html

  <mf-search-results
   class="my-header-css"
   ></mf-search-results>

レンダリング結果

検索結果のヘッダ部分のコンテンツをカスタマイズ

スロット headerでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-header-slot .mf_finder_organic_header_wrapper {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-header-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  .my-header-slot .mf_finder_organic_header_wrapper span {
    font-weight: bold;
  }
  </style>

html

  <mf-search-results class="my-header-slot">
    <template slot="header" scope="x">
      <div class="my-header">
        <div>
          「<span>{{x.params.q}}</span>」での検索結果を<span>{{x.params.pagemax}}</span>件ごとに表示
        </div>
        <div>
          <span>{{x.params.page}}</span>ページ目
          (<span>{{x.organic.range[0]}}</span>件目から<span>{{x.organic.range[1]}}</span>件目)
        </div>
      </div>
    </template>
  </mf-search-results>

レンダリング結果

検索結果のドキュメントリスト表示をカスタマイズ

スロット docsでテンプレートをカスタマイズする。

コード

css追加

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

html

  <mf-search-results class="my-docs-slot">
    <template slot="docs" scope="x">
      <div class="my_finder_organic_docs">ページタイトル一覧
        <ul>
          <li v-for="(doc,i) in x.docs">
            <a :href="doc.uri"
             @click.stop.prevent
             @mousedown.left="x.self.preClickDoc(doc,$event)"
             @mouseup.left="x.self.chkClickDoc(doc,$event)"
            >{{doc.title}}</a>
          </li>
        </ul>
      </div>
    </template>
  </mf-search-results>

レンダリング結果

検索結果のドキュメント毎のカスタマイズ

スロット docでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc-slot .my_finder_organic_doc {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc-slot">
    <template slot="doc" scope="x">
      <div class="my_finder_organic_doc">
          <a :href="x.doc.uri"
           @click.stop.prevent
           @mousedown.left="x.self.preClickDoc(x.doc,$event)"
           @mouseup.left="x.self.chkClickDoc(x.doc,$event)"
          >{{x.doc.title}}</a>
      </div>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎の画像表示エリアのカスタマイズ

スロット doc_imageでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_image-slot .my_finder_organic_doc_img {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_image-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_image-slot">
    <template slot="doc_image" scope="x">
      <div class="my_finder_organic_doc_img">
        <div>{{x.doc.uri.replace(/.*\/([^$])/,'$1')}}</div>
        <img alt="custom image"
          :src="x.self.imageUrls[x.i][0]"
          @error="x.self.imageError(x.self.imageUrls[x.i],$event)"
          @mouseover="x.self.showResultframe(x.doc,$event,true)"
          >
      </div>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎の情報の最上部にコンテンツを追加

スロット doc_headでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_head-slot .my_finder_organic_doc_head {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_head-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_head-slot">
    <template slot="doc_head" scope="x">
        <div class="my_finder_organic_doc_head">ヘッダ部分{{x.i+1}}</div>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎のタイトルの前にコンテンツを追加

スロット doc_title_prevでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_title_prev-slot .my_finder_organic_doc_title_prev {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_title_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_title_prev-slot">
    <template slot="doc_title_prev" scope="x">
        <span class="my_finder_organic_doc_title_prev">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎のタイトルの後にコンテンツを追加

スロット doc_title_postでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_title_post-slot .my_finder_organic_doc_title_post {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_title_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_title_post-slot">
    <template slot="doc_title_post" scope="x">
        <span class="my_finder_organic_doc_title_post">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎の説明文の前にコンテンツを追加

スロット doc_body_prevでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_body_prev-slot .my_finder_organic_doc_body_prev {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_body_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_body_prev-slot">
    <template slot="doc_body_prev" scope="x">
      <div class="my_finder_organic_doc_body_prev">◆ここから説明{{x.i+1}}◆</div>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎の説明文の後にコンテンツを追加

スロット doc_body_postでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_body_post-slot .my_finder_organic_doc_body_post {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_body_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_body_post-slot">
    <template slot="doc_body_post" scope="x">
      <div class="my_finder_organic_doc_body_post">◆説明ここまで{{x.i+1}}◆</div>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎のURLの前にコンテンツを追加

スロット doc_url_prevでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_url_prev-slot .my_finder_organic_doc_url_prev {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_url_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_url_prev-slot">
    <template slot="doc_url_prev" scope="x">
        <span class="my_finder_organic_doc_url_prev">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎のURLの後にコンテンツを追加

スロット doc_url_postでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_url_post-slot .my_finder_organic_doc_url_post {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_url_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_url_post-slot">
    <template slot="doc_url_post" scope="x">
        <span class="my_finder_organic_doc_url_post">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

レンダリング結果

ドキュメント毎の情報の最下部にコンテンツを追加

スロット doc_footでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-doc_foot-slot .my_finder_organic_doc_foot {
    background-color: pink;
  }
  /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
  .my-doc_foot-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_foot-slot">
    <template slot="doc_foot" scope="x">
        <div class="my_finder_organic_doc_foot">フッタ部分{{x.i+1}}</div>
    </template>
  </mf-search-results>

カスタマイズなしの状態

コード

html

レンダリング結果

表示言語の設定

コード

css追加

html

レンダリング結果

ページャーに表示するページ番号アイテムの最大数を5に変更

コード

css追加

html

レンダリング結果

検索結果のヘッダ部分を表示しない

コード

css追加

html

レンダリング結果

検索結果下のページャーを表示しない

コード

css追加

html

レンダリング結果

検索結果下に関連検索語を表示する

コード

css追加

html

レンダリング結果

検索結果をクリックすると同一ウィンドウ内で画面遷移する

コード

css追加

html

レンダリング結果

ヘッダ部分をCSSでカスタマイズ

コード

css追加

html

レンダリング結果

検索結果のヘッダ部分のコンテンツをカスタマイズ

コード

css追加

html

レンダリング結果

検索結果のドキュメントリスト表示をカスタマイズ

コード

css追加

html

レンダリング結果

検索結果のドキュメント毎のカスタマイズ

コード

css追加

html

レンダリング結果

ドキュメント毎の画像表示エリアのカスタマイズ

コード

css追加

html

レンダリング結果

ドキュメント毎の情報の最上部にコンテンツを追加

コード

css追加

html

レンダリング結果

ドキュメント毎のタイトルの前にコンテンツを追加

コード

css追加

html

レンダリング結果

ドキュメント毎のタイトルの後にコンテンツを追加

コード

css追加

html

レンダリング結果

ドキュメント毎の説明文の前にコンテンツを追加

コード

css追加

html

レンダリング結果

ドキュメント毎の説明文の後にコンテンツを追加