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

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

第二回はその1の記事の「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について解説していきます。

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

非公式テンプレートは以下のサイトなどからダウンロードできます。

・Blogger Templates Gallery
・Pro Templates Lab
・ThemeXpose
・Templateism: Professional Blogger Templates

ダウンロードしたファイルを解凍したら、Xmlファイルを「テンプレート→バックアップ復元→ファイルを選択」の順に選びアップロードしましょう。

最後に、モバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にすれば完成です。

スマホ用に自動でサイズを調整してくれるテンプレートであれば、スマートフォンに対応したデザインに自動で切り替わると思います。

しかし、まだ満足できない！といった方はカスタマイズしてみましょう。

Blogger用のモバイルタグ

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

は効かないので、メディア・クエリを使用します。

メディア・クエリ一覧

・max-width：表示領域の横幅。指定したサイズより小さい場合に適用
・min-width：表示領域の横幅。指定したサイズより大きい場合に適用

（例）画面の表示領域の横幅が800px以下のときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) {
    .sample {background-color:red;
} 
}

・max-device-width：デバイスサイズの横幅。指定したサイズより小さい場合に適用
・min-device-width：デバイスサイズの横幅。指定したサイズより大きい場合に適用

（例）デバイスサイズの横幅が800px～1280pxのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (min-device-width :800px) and (max-device-width :1280px) {
    .sample {background-color:red;
} 
}

・device-pixel-ratio：デバイス・ピクセル比

・orientation：デバイスの向き
portrait = 縦向きのときに適用 / landscape = 横向きのときに適用 / どちらも記入しない場合は、デバイスの向きに関わらず適用）

（例）画面の表示領域が800px以下で、縦向きのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) and (orientation : portrait) {
    .sample {background-color:red;
} 
}

これを使って、スマホとPCで見た際にデザインを変えることができます。

max-width、min-widthにすれば、PCでブラウザの横幅を変えるだけで反映されるので、どのようなデザインになるか簡単に確認できます。


また、どちらかのデバイス一方に表示させたくない場合は

{display: none;}

を記述して下さい。

スマホで表示させたくない場合

キーワードは「display: none;」

（例）画面の表示領域の横幅が420px以下のときに

class="sample"

で囲った部分を表示させたくない場合

 <div class="sample">
テスト
テスト
テスト
テスト
</div>

これを画面の表示領域が420px以下のときに表示させたくない場合はメディア・クエリを追加し、以下のようにスタイルシートを書きます。

@media screen and (max-width :420px) {
    .sample {display: none;}
}

スマホの主なサイズについては以下のサイトの「Devices」をクリックして確認してみて下さい。

http://resizr.co/


以上でメディア・クエリの説明は終わりです。

何かデザインを変えるときは、レスポンシブにするために基本的には横幅の指定は%で行いましょう。

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

Related Posts