Bloggerブログでモバイルのガジェットの表示を切り替えるソースコード

Bloggerはウェブの編集のレイアウトからブログに様々なコンテンツのガジェットを設定できる。

パソコン／タブレットのウェブバージョンとモバイルバージョンにデザインが分かれている場合、公式テーマのシンプル、動的ビュー、画像ウィンドウ、Awesomely Inc.、ウォーターマーク、エスィリアル、旅行など、テーマのHTML編集からガジェットのレイアウト用ページ要素タグの<b:widget></b:widget>の開始タグに「mobile」属性を追加してモバイルバージョンのガジェットの表示を切り替えられる。

ガジェットのモバイルバージョンへの四つの指定

mobile='yes': モバイルでガジェットを表示する
mobile='no': モバイルでガジェットを表示しない
mobile='only': モバイルのみでガジェットを表示する
mobile='default': モバイルでヘッダーとブログの投稿と基本情報とページとAttribution（帰属）のガジェットだけを表示する

BloggerのHTML編集での記載例

<b:widget id='BlogArchive1' locked='false' title='ブログアーカイブ' type='BlogArchive' visible='true' mobile='yes'>
（中略）
</b:widget>

ガジェットのレイアウト用ページ要素タグでどんな内容かは「id」に記載されているので、表示を切り替えたいところに「mobile」を追加する。

注意点としてはガジェットに「locked」で「true」が指定されていると表示を切り替えられないので、「false」に書き換えなくてはならない。

もう一つ「default」（初期値）以外のガジェットはモバイルバージョンの設定が「カスタム」でなくてはならないので、表示するためにはテーマの「モバイル」から予め変更しておくと大丈夫なんだ。

他のテンプレートでガジェットのレイアウト用ページ要素タグの開始タグに「mobile」属性を記載しても表示を切り替えられない場合もある。

公式テーマのContempo、Soho、Emporio、Notableなどのデザインがウェブバージョンとモバイルバージョンに分かれてないBloggerブログはレイアウト用のウィジェットタグの<b:if></b:if>を使ってモバイルにデータの出力から振り分けると良い。

シンプルなどの旧テーマでも同様のマークアップは可能になっている。

モバイルにガジェットを表示するためのソースコード

<b:if cond='data:blog.isMobileRequest'></b:if>

モバイルにガジェットを表示しないためのソースコード

<b:if cond='not data:blog.isMobileRequest'></b:if>

または

<b:if cond='!data:blog.isMobileRequest'></b:if>

BloggerのHTML編集での記載例

<b:if cond='data:blog.isMobileRequest'>
  <b:section class='sidebar_top' id='sidebar_top' name='Sidebar (Top)'>
    <b:widget id='BlogArchive1' locked='false' title='ブログアーカイブ' type='BlogArchive' visible='true'>
（中略）
    </b:widget>
  </b:section>
</b:if>

何れもモバイルで表示を切り替えたいガジェットのソースコードを開始タグと終了タグで囲んてしまえば反映する。

Bloggerのガジェットのソースコード自体は<b:widget></b:widget>だけれどもそれが<b:section></b:section>で囲まれてデータが出力されている。

どちらかをモバイルのガジェットの切り替えのためのソースコードで囲めば大丈夫だけど、しかし<b:section></b:section>から囲むと無駄が残らない。

ブログに複数のウィジェットが連続して記載される場合には全てが一つのセクションの中に入っているので、モバイルでの表示を個別に切り替えるには<b:widget></b:widget>を囲まなくてはならない。

追記：Bloggerのwidgetタグやsectionタグはそれぞれの開始タグにcond属性を追加して表示を振り分けられるんだ。モバイルの場合は表示したければ「cond='data:blog.isMobileRequest'」を、表示したくなければ「cond='not data:blog.isMobileRequest'」か「cond='!data:blog.isMobileRequest'」を使う。例えば<b:section cond='data:blog.isMobileRequest'>中略</b:section>のように記載する。

Bloggerの公式テーマでいうとシンプルなどのウェブバージョンとモバイルバージョンでデザインが分かれているテンプレートは「mobile」を、Contempoなどのデバイスでデザインが共通のテンプレートは<b:if></b:if>を使ってモバイルでのガジェットの表示を切り替えられる。