-->
スポンサーリンク

2017年2月26日日曜日

Blogger「ブログ検索」ガジェットをモバイルで任意の場所に表示する方法

ブログ検索ガジェット
Bloggerの基本ガジェットにはブログ内が検索できる「ブログ検索」ガジェットがあります。
モバイルで表示する場合は、レイアウト画面でガジェットを追加し、「HTML編集画面」で「mobile='yes'」を設定する必要があります。
ただし、これだけではモバイル表示をするとガジェットがフッターに表示されてしまいます。
縦に長い記事だと不便なので任意の場所に表示します。
下に表示された検索ボックス

テンプレートをいじるので保存してから作業を進めましょう。

手順1.レイアウト場面で「ブログ検索」ガジェットを追加し、「設定を保存」をクリック。
ブログ検索ガジェットを追加

手順2.テンプレート→HTMLの編集で「ブログ検索」ガジェットへ移動し「…」をクリックして展開します。
クリックして展開

手順3.展開したら以下のコードを抜き出してコピー。
<form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>

手順4.任意の場所に貼り付けます。
そのまま貼り付けても良いですが、センター揃えにし、「このブログを検索」というタイトルを追加。
さらに検索ボックスとタイトルの間隔を開けたかったのでマージンを指定しました。
以下のコードをコピーしてそのまま使えます。

<!--スマホ投稿タイトル上・ブログ内検索-->
<div align='center'>
<div style='margin:0px 0px 0px 0px;'>
  <font size='2'>このブログを検索</font></div>
<div style='margin:5px 0px 0px 0px;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='20' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
     </div></div>
<!--スマホ投稿タイトル上・ブログ内検索-->
設置見本

検索ボックスのサイズが小さかったので10から20へ変更し、投稿タイトル上と記事下の2ヶ所に設置しました。
マージンと検索ボックスのサイズはお好みで調整してください。

これまでBloggerのブログ内検索は何も考えずに「Googleカスタム検索」を使っていました。
でも、AdSense広告が貼れないアクセスの低いサイトでは収益が発生する「Googleカスタム検索」は使えないんですよね。
ようやく気付いて「ブログ検索」ガジェットに慌てて変更したという訳です…^^;

検索ガジェットのカスタムは無理かと思いましたが、試しにいじくってみたらわりと簡単にできました。
よければお試しください。
スポンサーリンク
こんな記事も書いてます↓