[当ブログは、アフィリエイトプログラムに参加しています。ページに広告が含まれる場合があります]

2017/02/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のラベル表示をモバイルでプルダウン化する