Bloggerのモバイルテンプレートを「カスタマイズ」にしてみました

公開日 : 最終更新日 :

カテゴリー :

Bloggerのモバイルテンプレートを「デフォルト」から「カスタマイズ」にしてみました。ブログ開設当初から「デフォルト」でやってきましたが、「デフォルト」だといろいろといろいろと使えないウィジェットも多くて、僕なりに変えたいなぁと思っていました。レスポンシブWEBデザインをしようとしたときに作ったものを応用して「デフォルト」から「カスタマイズ」に変更しました。今回は、モバイルテンプレートを「カスタマイズ」にしたときに出来ることと実際に「カスタマイズ」にするときにやったこととその注意点を紹介します。

モバイルテンプレートでできること

モバイルテンプレートで出来ることから紹介します。モバイルテンプレートを有効にして「カスタマイズ」を選択すると使えるようになる属性やDataタグがあります。

mobile属性

  • data:blog.isMobile
  • data:blog.mobileClass

これらが使えるようになるタグです。まずは、mobile属性から紹介します。mobile属性は、ウィジェットをスマホでも見せるようにするかどうかを設定できます。mobile属性で使えるのは、’yes’、’no’、’only’、’default’の4種類です。これら4つがPC・スマホでどのようになるかは以下の通りです。

pc スマホ
yes

no

×

only

×

default ウィジェットに合わせる ウィジェットに合わせる

data:blog.isMobileについて

次に、data:blog.isMobileについてです。これは、スマホで見ているかどうかを識別しています。主に<if>で使われます。使い方は以下の通りです。

data:blog.mobileClassについて

最後にdata:blog.mobileClassについてです。これは、スマホでブログを見ているときに「mobile」を追加する機能です。これを追加するとCSSでモバイルを見ているときに設定しやすくなります。

カスタマイズを有効にしたときにやったこと

ここまでモバイルテンプレートを有効にしたときに使える属性やDataタグを紹介しました。それでは、このブログのモバイルテンプレートを「カスタマイズ」したときにやったことを紹介します。

mobile属性で振り分け

スマホで表示・非表示を選んで、mobile属性で振り分けました。主にFacebookやTwitterといった通信をするHTMLウィジェットは、非表示にしています。あとは、記事上にあるAdsenseは、PC用・スマホ用どちらもウィジェットを取得してmobile属性で切り替えています。

ウィジェットはblog.isMobileで

ブログウィジェットの中のものは、data:blog.isMobileを使って切り替えています。例えば記事下のAdsenseはそうです。

モバイルテンプレートでの注意点

CSSは、PC用のCSSの後に、data:blog.isMobileを使ってスマホ用のCSSを読み込んでいます。本来ならこれで終わりなのですが、レスポンシブWEBデザインをするときに作ったスマホ用CSSのとモバイルテンプレートで入れたCSSは一緒のコードなのですが、確認するときに全く違った表示をしていてびっくりしました。原因を調べてみたらスマホ用に「widget_css_mobile_bundle.css」というCSSが読み込まれていてでこれが邪魔していました。なのでこれをどうにかしたかったのですが、どうにもうまくいかなかったので、影響が出ているものをオーバーライドさせる形で対処しました。

なので、モバイルテンプレートのカスタマイズでスマホ用のCSSを作る場合は、widget_css_mobile_bundle.cssにも注意したほうがいいでしょう。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>