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;
}