Pages

モバイルのデザイン、タイトルフォントとウィジェットの余白を設定しました

モバイルのデザインを微調整しましたので、記録させてください。

タイトルのフォントを変更

なぜかタイトルだけフォントが違っていたので設定しました。
.mobile-index-title {
  font: $(post.title.font);
  font-size:120%;
  }
上記のタグをCSSに追加しました。
これでPCで見た時のタイトルのフォントと同じものがモバイルデザインのタイトルフォントに設定されます。
フォントの変更でタイトルのサイズ感も変わってきてしまったので、ついでにフォントサイズも調整しちゃいました。


ウィジェットの余白設定

html .widget {
    margin: 0 0 10px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    clear: both;
}
検証したところ、上記が既定の設定になっているようです。
以下のように変更したものをCSSに追加しました。
html .widget {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 2em;
    margin-left: 0.5em;
}
em表記に変更したのはレスポンシブデザインでは絶対的な余白の設定よりも相対的な余白の設定のほうがいいかなと感じたためです。
PC、モバイル両方に反映される設定なのでそれも考慮した余白の設定を行いました。

0 件のコメント:

コメントを投稿