【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン【その１】

自分の運営している別のウェブサイトは気づくとスマホからのアクセスがPCに匹敵するほどになり、アドセンスのクリックはスマホからが圧倒し、スマホへの最適化は不可欠となりました。

恐らく、こういう現象が起きているのは自分だけではないはず！
今後、スマートフォンやタブレットの普及が広がることはあっても、落ちることはないと思うので、サイトを運営するうえで、スマホへの最適化を図るのは必須になっていくでしょう。

そんな自分が悪戦苦闘しながらスマホへの最適化を図ったので、その情報を共有していきたいと思います。

スマホ用に最適化するには、大きく別けて以下の3つのパターンがあります。

1・テンプレート→モバイル→設定→「はい。携帯端末でモバイル テンプレートを表示する。」でBloggerデフォルトのスマホ用テンプレートを使用する。

• 難易度：1
• メリット：たったワンクリックでスマホ用に最適化できる手軽さ。
• デメリット：記事本文以外にアドセンスの貼り付けをできないなど、カスタマイズはほぼ不可能。PC用と大きくテンプレートのデザインが変わる可能性大。

2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。

非公式のテンプレートサイトでテンプレートをダウンロードしている方も多いと思います。中には、スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートもあります。

• 難易度：3（カスタマイズしない場合は1）
• メリット：PC用とテンプレートが変わることなく、カスタマイズ自由。
• デメリット：カスタマイズするにはHTML/CSSの知識が必要。

※こういったテンプレートをスマホで正しく表示させる場合はモバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にしましょう。

この設定にすると、Blogger用のモバイルタグ

<b:if cond='data:blog.isMobile'>

は効かないので、メディア・クエリを使用します。これについては後日。

・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

3・モバイル設定を「はい。携帯端末でモバイル テンプレートを表示する。 」→「カスタム」を選択し、自分で最適化を図る。

HTML/CSSの知識があれば、そこまで難しくないのですが、結構な知識を必要としますので、オススメはしません。
というか、ここまでテンプレートをいじれる方は、このブログを必要としていないと思うので、当ブログでは以下、簡単なBlogger用のモバイルタグだけの説明に留めておきます。

• 難易度：4
• メリット：全て自分の思い描く通りに再現可能。
• デメリット：豊富なHTML/CSSの知識が必要。

■Blogger用のモバイルタグ

以下は、モバイル設定を「はい。携帯端末でモバイル テンプレートを表示する。 」→「カスタム」を選択した場合に適用されます。

モバイルとPCで表示させたい内容を変えるタグ

<b:if cond='data:blog.isMobile'>

/* モバイルからのアクセスで表示される内容 */

<b:else/>

  /* PCからのアクセスで表示される内容 */

</b:if>

モバイルからのアクセスでもガジェットを表示させたい場合
表示させたいガジェットの

<b:widget id='' locked='false' title='' type=''>

の中に

mobile='yes'

を記述

<b:widget id='' locked='false' title='' mobile='yes' type=''>

最後に、Bloggerに限ったタグではないですが、デバイスの横幅に自動であわせるタグです。

</head>

内に記述しましょう。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

以上で、その1は終わりです。
次回は、「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について詳しく解説していきたいと思います。


・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

Related Posts