【Blogger改造】完璧な検索窓設置のためのポイント2つ

<b:if cond='data:blog.isMobile'>
  <input name='m' type='hidden' value='1'/>
 <b:elseif cond='data:mobileLinkUrl'/>
  <input name='m' type='hidden' value='0'/>
</b:if>

Blogger のテンプレートのカスタマイズに関する話題です。

検索窓の設置に関する記事で言及を見ないがそつなく設定しておくとエレガントな2つのポイントをご紹介しますよ。

以下が当ブログでも使用している完璧な検索窓のコードになります。次の2つの配慮がされている点がグレート過ぎます。

1. 検索結果ページに入った際に検索ワードが検索窓に入っている
2. PCブラウザ+モバイルテンプレートで検索結果ページに飛んだ際にモバイルテンプレートを維持する

<form action='/search' method='get'>
 <b:if cond='data:blog.isMobile'>
  <input name='m' type='hidden' value='1'/>
 </b:if>
 <input name='max-results' type='hidden' value='10'/>
 <input type='text' name='q' placeholder='ブログ内を検索' autocapitalize="off" expr:value='data:blog.searchQuery'/>
 <input type='submit' value='検索'/>
</form>

それぞれのポイントについて解説していきます。

その1、検索ワードが検索窓に入ってる

検索結果ページの検索窓に検索文字が入っていれば、ユーザは検索文字を再編集できるのでフレンドリですね。

このカスタマイズの当該コードはexpr:value='data:blog.searchQuery'です。

その2、PCブラウザで検索結果ページに飛んだ際にモバイルテンプレートを維持

スマホからのアクセスで検索結果ページに飛んだ際は Google 側で判定してモバイルテンプレートが使用されます。

一方でPCブラウザを使っての検証や、転送量の節約のためにモバイルページを読み込んでいる際には通常、モバイルテンプレートが解除されてしまいます。

この意図しない解除を防ぐために GET のパラメータに &m=1 を追加します。

そのためのコードが <b:if cond='data:blog.isMobile'><input name='m' type='hidden' value='1'/></b:if> です。

ちなみに当ブログのモバイルテンプレートはPC用テンプレートに比べて転送量が16KB(47KB→31KB)少ないです。これは、モバイルテンプレートで"人気の記事"が非表示になりこのためのサムネイル画像が読み込まれなくなるためです。

モバイル通信では前時代的な従量制が一般なことですし、ご自身のブログのブックマークにはモバイル版を設定しておくのはアリに思います。

ではでは～