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

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


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


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


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

Bloggerのhtmi編集での記載例


<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 == "true"'></b:if>

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


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

Bloggerのhtmi編集での記載例


<b:if cond='data:blog.isMobileRequest == "true"'>
  <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の公式テーマでいうとシンプルなどのウェブバージョンとモバイルバージョンでデザインが分かれているテンプレートは「mobile」を、Contempoなどのデバイスでデザインが共通のテンプレートは<b:if></b:if>を使ってモバイルでのガジェットの表示を切り替えられる。


参考:Bloggerサイドバーをモバイルにも表示させる方法 モバイルテンプレートもカスタマイズ可能に Properly Hide/Show Any Widget In Blogger Mobile Template

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策