パソコン/プログラム編

PCとモバイルの表示レイアウトの違い

PC上でBlogger画面のレイアウトを色々カスタマイズしても、モバイル表示では違ったレイアウトになっしまいます。選択したテーマによっては同じではないかもしれませんが今回はPCとモバイルでどこを注意したほうが良いかをまとめてみました。

私も最初はPC画面で変更してスマホ画面はちょっと確認しただけで気にしていませんでしたが、よく見るとレイアウトは違うしフォントも一貫性が無い。最悪なのはモバイル表示されるウィジェットが勝手に設定されていて、すべてが表示されているわけではないことがわかりました。

どのウィジェットが表示されるかはテーマ毎に違うかもしれません。最初に確認することは初期設定で表示されないウィジェットと追加しても表示されないウィジェットを確認することです。


モバイルの場合すべてを表示するのが言い訳ではないのでここで選択をしておきます。


モバイル表示されていないウィジェットを表示したいときは「テーマ」からHTML編集を選択してウィジェットを見つけて以下のように変更してください。

例はラベルを表示させたときです。

変更前
<b:widget id='Label1' locked='false'  title='ラベル' type='Label'>
変更後
<b:widget id='Label1' locked='false' mobile='yes' title='ラベル' type='Label'>

自分で追加したウィジェットは基本モバイル表示は設定されていないと思ったほうがいいと思います。