Bloggerのモバイル版でガジェトを表示させるための方法。



ガジェット表示なしのモバイル版Blogger


Bloggerのモバイル版は初期設定の時点でガジェットが表示されません。

ウェブ版で表示されているガジェットをモバイル版で表示させようとするならば、HTMLコードを追加する必要があります。

今回は、ガジェットを表示させるために、どんなHTMLコードをどこに入れたらよいかを紹介します。

HTMLコードを追加する場所


ガジェットをモバイル版に表示させるために、HTMLコードを編集します。

なので、テーマからHTMLの編集を選んでHTMLコードを編集する画面を出してください。

そして、ガジェット表示しているコードを探してください。

人気の投稿の場合は、以下のようなコードです。

<b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts' version='1'>

id・locked・title・type・versionが書かれているコードがガジェットのコードです。

このコードに新たにモバイル設定を追加します。


追加するコード


モバイル設定のために追加するコードは以下の2つのうちのどちらかを選んでください。

mobile='yes'
mobile='only'

mobile='yes'はウェブ版と同じガジェットをモバイル版にも表示するという意味です。

mobile='only'はモバイル版にのみ表示するという意味で、ウェブ版には表示されません。

これを、ガジェット表示しているコードに追加します。

<b:widget id='PopularPosts1' locked='false' mobile='○○' title='人気の投稿' type='PopularPosts' version='1'>

mobile='○○'と書いていますが、実際は○○のところにyesかonlyが入ります。

これで、モバイル版にガジェットが表示されるようになりました。

あとは、保存してモバイル版をプレビューして実際に表示されているか確かめてください。


私のおススメはonly


yesの場合は、ウェブ版とモバイル版に同じガジェットを表示できるのですが、ガジェットとの順番も同じになります。

ウェブ版では上にあるガジェットをモバイル版では下にしたいと思ってもできません。

onlyを使うと、レイアウトに表示されているガジェットは増えますが、ウェブ版には増えませんし、モバイル版だけに表示したいガジェットを作れます。

ガジェットの順番を変えても内容や構成を変えてもウェブ版には影響はありません。

なので、onlyをお勧めします。

このブログも、レイアウトには人気の投稿が2つ、カテゴリー(ラベル)が2つ、など同じガジェットを複数配置していますが、ウェブ版にもモバイル版にも1つしか表示されていません。

モバイル版の場合は、サイドバーにガジェットを設置していても表示されるのはフッターなので、モバイル版のガジェットはフッターに固めて設置しています。

onlyはウェブ版のガジェットに影響しないので、モバイル版だということをわかりやすくするための区別として固めて設置するようにしています。
おすすめ