Bloggerテーマの基礎知識 - 「ブログ検索」ガジェットについて知ろう

Bloggerでは「レイアウト」メニューからガジェットを追加できます。
追加されたガジェットがどのような構造を持っているかは「テーマ」の「HTML編集」から確認できます。

「ブログ検索」ガジェットの構造について確認してみましょう。

「ブログ検索」ガジェットとは

「ブログ検索」ガジェットはキーワードを入力してブログの投稿を検索するガジェットです。

「ブログ検索」が出力する構造

スタイルシートの設定

上記の構造を見ると指定すべきスタイルシートの項目が見えてきます。
取り合ずこの辺↓を設定すれば良さそうですね。

.BlogSearch form{
}
.BlogSearch .search-input{
}
.BlogSearch .search-input input{
}
.BlogSearch .search-action{
}

「ブログ アーカイブ」ガジェットのソース

<b:widget id='BlogSearch2' locked='false' title='SEARCH' type='BlogSearch' visible='true'>
  <b:includable id='main'>
    <b:include name='widget-title'/>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content' role='search'>
      <b:include name='searchForm'/>
    </div>
  </b:includable>
  <b:includable id='searchForm'>
    <form expr:action='data:blog.searchUrl'>
      <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
      <b:include name='urlParamsAsFormInput'/>
      <div class='search-input'>
        <input autocomplete='off'
                  expr:aria-label='data:messages.searchThisBlog'
                  expr:placeholder='data:messages.searchThisBlog'
                  expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;'
                  name='q'/>
      </div>
      <b:include name='searchSubmit'/>
    </form>
  </b:includable>
  <b:includable id='searchSubmit'>
    <input class='search-action' expr:value='data:messages.search.escaped' type='submit'/>
  </b:includable>
</b:widget>