ブログテーマをモバイルフレンドリーに対応する方法

2015052101.jpg

このブログでは、小粋空間テーマを使用しており、勿論レスポンシブ対応版を使用しているわけですが、そのままではモバイルフレンドリー対応ではありません。そのため、モバイルフレンドリー対応でテストすると、問題があることが表示されます。

Googleモバイルフレンドリーテスト

テーマに少しだけ手を加えると、モバイルフレンドリー表示で問題が無いことが示されます。小粋空間さんの記事でもありますので、ここでは簡単に要点だけ示しておきます。

小粋空間テーマを利用している場合の修正例

<head></head>内に以下の<meta>要素を追加します。MovebleTypeの場合はデザイン→テンプレートモジュール→ヘッダー、WordPressの場合は外観→テーマの編集→header.phpです。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport(ビューポート)は、モバイルでのページ表示方法を制御するためのもので、これがないとモバイルフレンドリーテストでエラーとなります。

レスポンシブWebデザインでは常識ですが、画像サイズの表示を、画面表示サイズに合わせて制御するため、スタイルシートに以下を付け加えます。

img {
    max-width: 100%;
    height: auto;
}

※ここで書いた方法は、小粋空間配布のテーマを対象としていますが、他のテーマを使用している場合も同じと考えて問題ないと思います。

ブログをモバイルフレンドリーにする方法

あとがき
レスポンシブ表示を確認するサイトで問題なく表示されていても、Googleのモバイルフレンドリーチェックで行うと、対応されていないと出ることもあり、この場合はテーマの修正が必要であることも分かった。常に最新の情報を確認したい。
関連記事