僕がブログで使用している「QooQ」や「Vaster2」は、レスポンシブ対応のテーマです。
「レスポンシブ対応」とは、パソコンやスマホ、タブレットなど、画面の大きさの異なる端末でも同一のコードで対応できるテーマのこと。
パソコン版とモバイル版でテーマが分かれていないので、デザインの変更の手間が少なくて済むのがメリットです。
ところがBloggerでは、デフォルトだとモバイル用のテーマがパソコン用とは別で設定されており、両方で同じテーマを使うには、自分で設定を変える必要があります。
当初、僕はこのブログでの作業をうっかり忘れていて、3記事ほど公開してから気づき慌てて直しました(汗)
今回は、レスポンシブ対応のテーマをモバイル用端末にも適用させる手順について書きます。
モバイル用テーマの設定方法
まず、Bloggerを開いたら、左側のメニューの中にある「テーマ」を選択します。すると、パソコンとモバイル端末それぞれの設定画面が出てくるので、右側の「モバイル」の下にある歯車のアイコンをクリック。
レスポンシブ対応のテーマを使用する場合は、ここで下の「いいえ。モバイルデバイスでもパソコン用のテーマを表示する。」を選びます。
最後に右下の「保存」ボタンを押せば、変更完了!
これでスマホやタブレットでもパソコンと同じテーマが適用されます。
ちなみに、先ほどのモバイルテーマの選択で「はい。モバイルデバイスでモバイルテーマを表示する。」を選ぶと、モバイル端末にはBloggerが用意している標準テーマが使われます。
正直デザインはいまいちですが、いろいろなバリエーションの中から好きなものを選択可能。
「プレビュー」ボタンを押すと、別ウィンドウでスマホ版の表示を確認できます。
また、自分で用意したテーマだけど、レスポンシブ対応ではない場合は、一番下の「カスタム」を選択すればOK。
パソコン版で使用中のテーマを、Bloggerが自動でモバイル用に調整してくれます。
ただ、割とおかしな表示になりがちなので、ご利用は慎重に。
スマホでのチェックは必須
テーマの設定を変更した後は、必ずスマホでブログを開いて、正常に表示されているかを確認しましょう。どんなに面倒でも、スマホでのチェックは必須!
普段自分がパソコンでしかブログを見る習慣がないと、とんでもないミスを放置したままになってしまいます。
たとえば、僕のメインブログでは、開設してから半年ほど、モバイル端末での文字の表示がずっと明朝体でした(笑)
レスポンシブ対応のテーマでも完ぺきとは限らないので、自分の目で見て確かめるのが安全です。