Bloggerのモバイルテンプレートを編集してサイドバーを表示する方法

Bloggerのテンプレートを、レスポンシブWebデザインに変更したのに、スマホで見るとおかしな表示になってしまったため、モバイルテンプレートを編集して、記事の下にサイドバーやアドセンス広告を表示するようにしました。
Bloggerのサイトをスマホなどで見ると、URLの後ろに?m=1が自動で追加されて、モバイル専用テンプレートを読み込みます。

テンプレートのモバイル画像の下にある歯車ボタンをクリックし、
いいえ。携帯端末で PC テンプレートを表示する。
を選択してスマホで見たときに、サイドバーのレイアウトが崩れてしまったため、
はい。携帯端末でモバイル テンプレートを表示する。
を選択して、モバイルテンプレートを選択で「カスタム」を選択して、HTMLの編集でサイドバーに設置しているウィジェットを表示させるようにしました。

<b:section class='sidebar1' id='sidebar1' preferred='yes'>
サイドバー丸ごと表示できれば簡単だと思ったけど、これではだめだったためウィジェット単位で表示させた。
それぞれの後ろにmobile='yes'を追加すると携帯(スマホ)で見たときにもウィジェットが表示される。それぞれのIDは、このブログの場合の例です。わかりにくい場合はtitleで探したほうが見つけやすいこともあります。

例えば、サイト内検索(ガジェットのタイトル)を探すときに、「CustomSearch」で検索するのではなく「サイト内検索」で検索するといいかも。

サイト内検索
<b:widget id='CustomSearch1'

最新の記事
 <b:widget id='Feed1'

忍者まとめ
<b:widget id='HTML8'

人気記事
<b:widget id='PopularPosts2'

AdSense(サイドバー)
<b:widget id='HTML3'

AdSense(メイン下)
<b:widget id='HTML4'

AdSense(メイン上)
<b:widget id='HTML2'

変更後のHTMLはこのようになります。
黄色でハイライトされた部分が、追加したmobile='yes'です。
これで、スマホなどで見たときも、記事の下にサイドバーが表示されるようになります。

モバイル表示の確認方法

実際に、スマホなどの携帯端末でアクセスする方法のほかに、URLの後ろに?m=1をつける方法とBloggerのプレビュー機能を使う方法や、GoogleChromeの拡張機能を使う方法があります。

URLに?m=1を追加

このブログのトップページを確認する場合は、http://wordpress-customize.blogspot.jp/?m=1となります。

Bloggerのモバイルプレビュー機能

テンプレートのモバイル画像の下にある歯車ボタンをクリックします。

QRコードの下のプレビューボタンを押すと、スマホサイズのウィンドウが開き確認できます。

GoogleChromeの拡張機能を使う

Chromeの「User-Agent Switcher for Chrome」という拡張機能を使ってiPhoneやAndroidで画面の確認ができます。
参考:パソコンでスマートフォン(スマホ)表示の確認
スポンサーリンク
スポンサーリンク