スキップしてメイン コンテンツに移動

些細な日常

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>を使ってモバイルでのガジェットの表示を切り替えられる。

関連ページ
参考サイト

コメント

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...