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="..." 
id="mt-site-search-script" async defer></script>
</div>

検索結果をページ送りする

検索結果ページに表示される記事件数が10件を超えると、次のページに検索結果が表示されます。一度に表示される検索結果は10ページ（100件）までです。
検索結果の HTML 構造は以下を参考にしてください。

検索結果の HTML 構成

<div class="..." style="...">
  <div class="mt-site-search-container">
    <div id="mt-site-search" class="mt-site-search" data-fields="keywords" data-language="ja_JP" data-entry-jsons="..." data-search-result-count="30" data-form-action="....html" data-storage-id="..." data-no-site-fetch="1" data-site-id="..." data-search-result-container="..." data-search-id="..." data-show-thumbnail-on-result="1">
      <div>
        <form class="mt-site-search-form"><input id="mt-site-search-form__query" class="mt-site-search-form__query" type="search" title="検索"><button class="mt-site-search-form__button" type="submit">検索</button></form>
      </div>
    </div>
    <script src="..." id="mt-site-search-script" async="" defer=""></script>
  </div>
</div>

<div style="...">
  <div id="...">
    <div>
      <div id="mt-site-search-result-container" class="mt-site-search-result-container">
        <div class="mt-site-search-result">
          <div class="mt-site-search-result__message">
            <span class="mt-site-search-result__message-about">"検索キーワード"について</span>
            <span class="mt-site-search-result__message-message">30件見つかりました</span>
          </div>
          <div class="mt-site-search-result__list">
            <div class="mt-site-search-result-item">
              <a href="..." class="mt-site-search-result-item__link" target="_self">
                <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__thumbnail"><img class="mt-site-search-result-item__thumbnail-image" src="画像">
              </div>
              <div class="mt-site-search-result-item__excerpt">
                記事概要
              </div>
            </div>
          </div>
        </div>

        <div class="mt-site-search__pagination">
          <ul>
            <li class="mt-site-search-pagination-item mt-site-search-pagination-item--current">
              <a class="mt-site-search-pagination-item__link" href="...">
                <strong>1</strong>
              </a>
            </li>
            <li class="mt-site-search-pagination-item">
              <a class="mt-site-search-pagination-item__link" href="...">
                2
              </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>
  </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;
}