スマホでみたときの左右の余白を変更する [Blogger / Vaster2]

Blogger用テンプレートVaster2のカスタマイズ記事です。

この記事はスマホやタブレット(パソコンより小さな画面)で記事を見たときに、左右に余白を作る方法を説明します。

修正前後

修正前



画面いっぱいに文字が書かれていて、読みにくい状態です。
(灰色の部分は見分けが付きやすいようにあとから付け足した部分です)

実はテンプレートを変更する前は普通に余白があったように思います。
しかし、いつの間にか左右ぴったりまで文字と絵が表示されて読みにくくなってしまっていました。

修正後



左右に余白ができました。
今回は余白の幅を変更するので、もっと余白を狭くしたい・広くしたいという変更も可能です。

スポンサーリンク

修正方法

1. Vaster2のテンプレートから以下の部分を探して書き換えます。

/*   レスポンシブデザイン
--------------------------------------------------- */      
@media screen and (max-width: 768px){

~~~(間色々書いてあるかも)

.content-wrapper{
   width:auto; ←変更するのはココ
   margin:auto;
  padding-top:5px;

このブログは90%で設定しています。


関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

0 件のコメント :

コメントを投稿