このブログはBloggerという無料ブログサービスを使っていますが、Bloggerでは、以下のレイアウト設定画面から様々なウィジェットを追加することで簡単にブログをカスタマイズできます。



　ただしデフォルト設定だと、上記のウィジェットによりカスタマイズできるのは原則PC用のサイトだけになります。Bloggerのブログをスマートフォンで見た場合、モバイル用のサイトが表示されますが上記レイアウト設定で追加したガジェットはほとんどモバイルサイト内に表示されません。

　実際の例で見てみます。Bloggerブログを使って別途公開しているブログ

Windows系SEの日記

を例にしてみますと、PCで見た場合は以下のように、ガジェットで設定した「おすすめ記事」や「ブログアーカイブ」等が表示されています。



一方、上記ブログをスマートフォンなどのモバイルサイトで表示すると、以下のとおり「自己紹介」のみ表示され、その他に追加したガジェットは表示されません。ガジェットだけでなくカスタマイズも殆どできないことになります。



　本記事では、モバイルサイトでもPCサイトのガジェットを表示する等のカスタマイズを可能にする方法を2通り紹介します。

　以下で紹介する設定手順は、テンプレートとして「シンプル」を利用していることを前提としますが、他のテンプレートを使っていても同様の方法で設定可能なはずです。

■設定方法１


設定画面のテンプレートからモバイルのギアマークをクリックします。


[いいえ。携帯端末で…]をチェックし、保存をクリックします。

すると、スマートフォン等の端末でアクセスした場合もPCと同様の画面が表示されます。結果としてPCのカスタマイズがモバイルにも反映されることになります。


■設定方法２

上の設定方法は、PCサイトをモバイルでも表示する方法になります。あくまでモバイル用のサイトをカスタマイズしたい場合は、以下の設定を行って下さい。

先の[モバイルテンプレートを選択]画面で、[はい。携帯端末で…]を選択し、リストボックスから[カスタム]を選択、[保存]をクリックします。


上記の設定により、HTMLがPCサイトとモバイルサイトで共有され、モバイルサイトのカスタマイズも可能になります。

モバイルサイトをカスタマイズするには、テンプレートから[HTMLの編集]をクリックします。

以下のようにPCサイト及びモバイルサイトのHTMLが表示されます。このHTMLをカスタマイズすることでモバイルサイト（もちろんPCサイトも）をカスタマイズできるようになります。



■カスタマイズ例：モバイルサイトで表示されないウィジェットを表示する


例えば、[ブログ アーカイブ]のウィジェットをモバイルサイトでも表示したい場合は以下のとおり設定します。

[ウィジェットへ移動]を選択し、[BlogArchive1]を選択します。


該当するウィジェットのHTMLの箇所に移動します。

<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

の部分に以下のように「mobile='yes' 」を追加し、[テンプレートを保存]をクリックします。

<b:widget id='BlogArchive1' mobile='yes' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

すると、以下のようにモバイルサイトでも[ブログ アーカイブ]のウィジェットが表示されるようになります。

[ブログ アーカイブ]以外のデフォルトでモバイルサイトで表示されないウィジェットについても、同様の手順でモバイルサイトに表示することが出来ます。


■モバイルサイトでデフォルトで表示されるウィジェットについて

http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html

によると、モバイルサイトでもデフォルトで表示されるウィジェットは

  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution

とあります。上記以外のウィジェットをモバイルサイトに表示したい場合、先の手順で表示させることになります。


■注意点

上記の手順で、モバイルサイトをカスタム可能にした場合、カスタマイズが可能な分、逆にモバイルサイトのレイアウトが崩れる場合もあります。適宜モバイルサイトの表示を確認しながらカスタマイズするようにして下さい。