Bloggerではガジェットを追加できますが、デフォルトではモバイルに表示されません。
モバイルでガジェットを表示する場合は、レイアウト画面でガジェットを追加し、「HTML編集画面」で「mobile='yes'」を設定する必要があります。
ただし、これだけではガジェットがフッターに表示されてしまいます。
縦に長い記事だと不便なので任意の場所に表示します。
今回は例として「ブログ検索」ガジェットをモバイル表示させます。
ガジェットを表示させたい場所に★マークなどの記号を入れておくと目印になり、作業がスムーズに進みます。
手順１．レイアウト場面で「ブログ検索」ガジェットを追加し、「設定を保存」をクリック。
手順２．テンプレート→HTMLの編集で「ブログ検索」ガジェットへ移動し「…」をクリックして展開します。
手順３．展開したら以下のコードを抜き出してコピー。
<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 : ""' 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>
手順４．ガジェットを表示したい場所にコードを貼り付けます。
そのまま貼り付けても良いですが、管理人の場合はセンター揃えにし、「このブログを検索」というタイトルを追加。
さらに検索ボックスとタイトルの間隔を開けたかったのでマージンを指定しました。
以下のコードをコピーしてそのまま使えます。
<!--スマホ投稿タイトル上・ブログ内検索-->
<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 : ""' 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へ変更し、投稿タイトル上と記事下の２ヶ所に設置しました。
マージンと検索ボックスのサイズはお好みで調整してください。
この方法ですべてのガジェットをモバイルの任意の場所に表示できます。
よければお試しください。
Bloggerのラベル表示をモバイルでプルダウン化する
スポンサーリンク
関連コンテンツ