【ブログカスタマイズ】Bloggerでレスポンシブ対応のテーマを使うときのモバイル用テーマの設定方法。スマホからの確認を忘れずに。

2020年9月12日土曜日

ブログカスタマイズ

t f B! P L

僕がブログで使用している「QooQ」や「Vaster2」は、レスポンシブ対応のテーマです。

「レスポンシブ対応」とは、パソコンやスマホ、タブレットなど、画面の大きさの異なる端末でも同一のコードで対応できるテーマのこと。

パソコン版とモバイル版でテーマが分かれていないので、デザインの変更の手間が少なくて済むのがメリットです。


ところがBloggerでは、デフォルトだとモバイル用のテーマがパソコン用とは別で設定されており、両方で同じテーマを使うには、自分で設定を変える必要があります。

当初、僕はこのブログでの作業をうっかり忘れていて、3記事ほど公開してから気づき慌てて直しました(汗)

今回は、レスポンシブ対応のテーマをモバイル用端末にも適用させる手順について書きます。

モバイル用テーマの設定方法

まず、Bloggerを開いたら、左側のメニューの中にある「テーマ」を選択します。

Bloggerでのモバイル用テーマの設定手順その1

すると、パソコンとモバイル端末それぞれの設定画面が出てくるので、右側の「モバイル」の下にある歯車のアイコンをクリック。

Bloggerでのモバイル用テーマの設定手順その2

レスポンシブ対応のテーマを使用する場合は、ここで下の「いいえ。モバイルデバイスでもパソコン用のテーマを表示する。」を選びます。

Bloggerでのモバイル用テーマの設定手順その3

最後に右下の「保存」ボタンを押せば、変更完了!

これでスマホやタブレットでもパソコンと同じテーマが適用されます。


ちなみに、先ほどのモバイルテーマの選択で「はい。モバイルデバイスでモバイルテーマを表示する。」を選ぶと、モバイル端末にはBloggerが用意している標準テーマが使われます。

正直デザインはいまいちですが、いろいろなバリエーションの中から好きなものを選択可能。

「プレビュー」ボタンを押すと、別ウィンドウでスマホ版の表示を確認できます。

Bloggerでのモバイル用テーマの設定手順その4

また、自分で用意したテーマだけど、レスポンシブ対応ではない場合は、一番下の「カスタム」を選択すればOK。

パソコン版で使用中のテーマを、Bloggerが自動でモバイル用に調整してくれます。

ただ、割とおかしな表示になりがちなので、ご利用は慎重に。

Bloggerでのモバイル用テーマの設定手順その5


スマホでのチェックは必須

テーマの設定を変更した後は、必ずスマホでブログを開いて、正常に表示されているかを確認しましょう。

どんなに面倒でも、スマホでのチェックは必須!

普段自分がパソコンでしかブログを見る習慣がないと、とんでもないミスを放置したままになってしまいます。


たとえば、僕のメインブログでは、開設してから半年ほど、モバイル端末での文字の表示がずっと明朝体でした(笑)

レスポンシブ対応のテーマでも完ぺきとは限らないので、自分の目で見て確かめるのが安全です。

QooQ