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

些細な日常

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

関連ページ
参考サイト

コメント

人気の投稿

吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす

イメージ

歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます! を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...

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

イメージ

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

ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳

イメージ

十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン (1835)の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...