マニュアル
検索ボックスと検索結果の見た目をカスタマイズする
MovableType.net サイトサーチの検索ボックスについて、見た目をカスタマイズする際は、以下の HTML 構成を参考にしてください。
検索ボックスの HTML 構成
<div class="mt-site-search-container"> <div id="mt-site-search" class="mt-site-search" data-worker="/blog2/.app/search-worker.js" data-fields="title,body,more,keywords" data-language="ja_JP"></div> <script src="https://dev-site-search.movabletype.net/v1.0.0/js/search.js" id="mt-site-search-script" async defer></script> </div>
検索結果をページ送りする
検索結果ページに表示される記事件数が10件を超えると、次のページに検索結果が表示されます。一度に表示される検索結果は10ページ(100件)までです。
検索結果の HTML 構造は以下を参考にしてください。
検索結果の HTML 構成
<div> <form class="mt-site-search-form"> <input id="mt-site-search-form__query" class="mt-site-search-form__query" type="search" /> <button class="mt-site-search-form__button" type="submit"> 検索 </button> </form> <div class="mt-site-search-result-container"> <div class="mt-site-search-result"> <div class="mt-site-search-result__message">10件見つかりました</div> <div class="mt-site-search-result__list"> <div class="mt-site-search-result-item"> <a href="..." class="mt-site-search-result-item__link"> <div class="mt-site-search-result-item__label"> 記事タイトル </div> <div class="mt-site-search-result-item__url"> <cite>記事URL</cite> </div> </a> <div class="mt-site-search-result-item__excerpt"> 記事概要(HTMLは削れる) </div> </div> </div> </div> <div class="mt-site-search__pagination"> <ul> <li class="mt-site-search-pagination-item mt-site-search-pagination-item--previous"> <a class="mt-site-search-pagination-item__link" href="..."> <span aria-hidden="true">≪</span> </a> </li> <li class="mt-site-search-pagination-item"> <a class="mt-site-search-pagination-item__link" href="...">1</a> </li> <li class="mt-site-search-pagination-item mt-site-search-pagination-item--current"> <a class="mt-site-search-pagination-item__link" href="..."> <strong>2</strong> </a> </li> <li class="mt-site-search-pagination-item"> <a class="mt-site-search-pagination-item__link" href="...">3</a> </li> <li class="mt-site-search-pagination-item mt-site-search-pagination-item--next"> <a class="mt-site-search-pagination-item__link" href="..."> <span aria-hidden="true">≫</span> </a> </li> </ul> </div> </div> </div>
サンプルCSS
.mt-site-search-form { width: 300px; margin: 16px auto; display: flex; } .mt-site-search-form__query { width: 204px; height: 32px; padding: 0 8px; border: 1px solid #cccccc; font-size: 1rem; } .mt-site-search-form__button { width: 80px; height: 32px; font-size: 1rem; margin-left: 18px; }