スキップしてメイン コンテンツに移動

Blogger テンプレートのタブレット対応


このブログを Windows 10 タブレットで表示してみたところ
画面の右側が表示しきれていないことに気付きました。

Microsoft Edge、Microsoft Internet Explorer、Google Chrome で確認したところ、どれもブログの横幅が画面に収まらず、ブラウザの表示エリアからはみ出してしまうのです。タブレットモードの ON と OFF を切り替えても改善しませんでした。もちろん横スクロールバーが出るのでスクロールさせれば見えないわけではないものの、これではあまりにも不便です。

どうも Blogger はテンプレートに力が入っていなくて困ります。
(他の機能はとても良いと思うのですが)


それでは簡易ではありますが、下記が対処方法です。


テンプレートのHTMLを変更します。
変更するのは、 <b:template-skin> の少し下にある body の部分です。

テンプレートにもよりますが、おおよそデフォルトでは
body {
  min-width: $(content.width);
}
といった内容なっていますが、これを
body {
  max-width: $(content.width);
  margin-right: auto;
  margin-left : auto;

}
とします。変更点は赤文字の部分です。

これで記事本文部分の幅が自動調整されるようになり、ブログの横全体が画面に収まるようになります(サイドバーの幅は固定、全体はセンタリング)。

※ブログ全体の幅やサイドバーの幅は管理画面より「テンプレート」→「カスタマイズ」→「幅を指定」で変更します。


今回中華タブレットを入手してこの件に気付きましたが、ウェブ開発者やデザイナーにとって、実際に様々な環境で試すことはとても重要なものですね・・・

って、これは Blogger のユーザが個々に頑張ることじゃないですよね、運営側がやってくれなきゃ意味がないです。いつもながら Blogger サンにはもうちょっと気合を入れて欲しいと感じるところです。