Blogger:モバイルバージョンに検索ボックスを導入

ウェブバージョンではNavbarの検索を使っていますが、モバイルバージョンではNavbarの表示方法がわからず検索機能なしで不自由していました。ということでモバイルバージョンの上部に検索ガジェットを導入することにしました。しかしそれは使いにくいものだったの代わりにもっと単純でよい方法を採用することにしました。

モバイルサイトのみに表示される検索ボックスを追加する

まずは検索ボックスのガジェットを追加する方法です。

この方法はお手軽にできそうで実は全然お手軽ではありませんでしたので採用しませんでした。


Bloggerのレイアウト画面のcrosscolでガジェットを追加をクリック。

検索ボックスガジェットを追加。

「このブログ」だけにチェックを入れました。

タイトルも不要なので消しました。

これで保存をするとウェブバージョンでは投稿の上部に検索ボックスが表示されました。


ウェブバージョンでは検索ボックスは使わないのでこれをモバイルバージョンだけに表示させるようにテンプレートを編集します。

テンプレートを元に戻すのは大変なのでまずバックアップをとっておきます。

テンプレートの画面の右上にある「バックアップ/復元」ボタンをクリック。

テンプレートをすべてダウンロード。

これでxmlファイルがダウンロードされますのでバックアップとして適当なところに保存しておきます。

テンプレート→HTMLの編集。

ウィジェットへ移動→CustomSearch1。

展開してみると検索ボックスのウィジェットは75行もありました。

先頭のwidgetタグにmobile='only'プロパティを追記してテンプレートを保存しました。

        <b:widget id='CustomSearch1' locked='false' mobile='only' title='' type='CustomSearch' visible='true'>
          <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <span class='cse-status'><data:loadingMsg/></span>
      </div>
    </div>

    <!-- override gsearch.css -->
    <style type='text/css'>
      #uds-searchControl .gs-result .gs-title,
      #uds-searchControl .gs-result .gs-title *,
      #uds-searchControl .gsc-results .gsc-trailing-more-results,
      #uds-searchControl .gsc-results .gsc-trailing-more-results * {
        color:<data:linkColor/>;
      }

      #uds-searchControl .gs-result .gs-title a:visited,
      #uds-searchControl .gs-result .gs-title a:visited * {
        color:<data:visitedLinkColor/>;
      }

      #uds-searchControl .gs-relativePublishedDate,
      #uds-searchControl .gs-publishedDate {
        color: <data:dateColor/>;
      }

      #uds-searchControl .gs-result a.gs-visibleUrl,
      #uds-searchControl .gs-result .gs-visibleUrl {
        color: <data:urlColor/>;
      }

      #uds-searchControl .gsc-results {
        border-color: <data:borderColor/>;
        background-color: <data:backgroundColor/>;
      }

      #uds-searchControl .gsc-tabhActive {
        border-color: <data:borderColor/>;
        border-top-color: <data:activeBorderColor/>;
        background-color: <data:backgroundColor/>;
        color: <data:textColor/>;
      }

      #uds-searchControl .gsc-tabhInactive {
        border-color: <data:borderColor/>;
        background-color: transparent;
        color: <data:linkColor/>;
      }

      #uds-searchClearResults {
        border-color: <data:borderColor/>;
      }

      #uds-searchClearResults:hover {
        border-color: <data:activeBorderColor/>;
      }

      #uds-searchControl .gsc-cursor-page {
        color: <data:linkColor/>;
      }

      #uds-searchControl .gsc-cursor-current-page {
        color: <data:textColor/>;
      }
    </style>

    <b:include name='quickedit'/>
  </b:includable>
        </b:widget>

これでモバイルサイトのみで投稿の上に検索ボックスが表示されるようになりました。


検索をかけてみると検索ボックスの下に検索結果が表示されるのですが、文字が見にくくて仕方ありません。

さて、ここからCSSをいじったり置き場所を変えることも検討しましたがもっとよい方法がみつかったのでやめました。

簡単に検索ボックスを追加する方法

Bloggerにブログ内検索を設置する ALIENWARE M17xR2/ウェブリブログ

ここに書いてある方法がすごく簡単で、しかもNavbarと同じ結果が得られます。

使いやすそうなのでモバイルバージョンだけでなくPCバージョンにも導入することにします。

先ほどと同様にBloggerのレイアウト画面のcrosscolでガジェットを追加をクリック。


HTML/JavaScriptガジェットを追加。

タイトルは空欄にしてコンテンツに以下のコードを入力しました。

<div class="separator" style="clear: both; text-align: center; margin-bottom: 10px">
  <form id="searchform" action="/search" method="get">
    <input id="s" value="" name="q"  type="text"/>
    <input id="searchsubmit" value="このブログを検索" type="submit"/>
  </form>
</div>

sizeの指定をするとモバイルサイトの幅と合わなくなるので指定をせずに自動調整にしました。


これで記事の上に検索ボックスが表示されるようになりました。

この機会にNavbarの表示はオフにしました。

今度はこの検索ボックをモバイルサイトでも表示されるようにします。

予めBlogger：レイアウト編集(10)ウィジェットのIDを確認する方法で検索ボックスのウィジェットのIDを調べておきます。

今回はHTML7でした。

テンプレート→HTMLの編集。

ウィジェットへ移動→HTML7。

 <b:widget id='HTML7' locked='false' mobile='yes' title='' type='HTML' visible='true'>

mobile='yes'というプロパティを追加してテンプレートを保存します。


モバイルサイトでも同じ位置に検索ボックスが表示されました。

<div class="separator" style="clear: both; text-align: center;margin-bottom: 10px">
  <form id="searchform" action="/search" method="get">
    <input id="searchsubmit" value="このブログを検索" type="submit"/>
    <input id="s" style="width: 80%" value="" name="q"  type="text" ”/>
  </form>
</div>

その後2015年4月版 input size について ｜ フォーム改善のプロを読んで再検討した結果、幅は%で指定することにしました。

さらにボタンは文字入力枠の左側にもってきました。

ステータスメッセージの背景の透過度を下げる

検索結果のステータスメッセージのリンクが背景の色と重なって判別しにくくなっていることに気がつきました。

PCで&m=1をつけて要素を検証してみると.status-msg-borderのopacityプロパティを変更すると文字が判別できることがわかりました。

ところがテンプレートを検索してもそのようなセレクタはみつけられませんでした。

.status-msg-border {
  opacity:.7 
 }

なのでテンプレートの]]></b:skin>の上行にこのCSSを追加しました。

デフォルトのopacity 0.4を0.7にしたわけです。


これで見やすくなりました。

(2016.6.29追記。それにしてもこのNavbarの検索結果はいまいちです。部分一致ではヒットしないのか、思った結果が出てこないことが多いです。自分では記事に書いたはずのことも結果にでてきません。結局自分で記事を検索するときはBloggerダッシュボードの検索機能を使っています。なのでダッシュボードの検索ボックスをブログに設定したいのですがどうやることやら。)

参考にしたサイト

Bloggerにブログ内検索を設置する ALIENWARE M17xR2/ウェブリブログ
検索ボックスのガジェットよりも遥かに簡単にNavbarと同じ結果になる検索ボックスを追加する方法。

2015年4月版 input size について ｜ フォーム改善のプロ
inputタグのsizeの指定についての解説。