hossy online - といぼっくす

_ [個人サイト] 今更ながらスマホ対応と游ゴシック使用

スマホ対応

普段サイト巡回はPCを使っています。だから自分のページも携帯で確認していませんでした。最近「携帯で全然見られなかったからPCで開いてみた」という話を聞いて、え、そうなの？ と手元の iPhone5 で見てみたところ。

……え、ええ、みごとに壊滅的じゃないですか orz

右側のサイドバーが幅を取るからと、本文の右側の余白を取っていたことが理由でした。こんなの、横320px相当だと読めるわけが……。

div.main {
  margin-right: 250px;
}
div.sidebar {
  position: absolute;
  top: 160px;
  right: 4px;
  width: 250px;
}

というわけで横幅が480pxより小さなデバイスではデザインを切り替えるように、CSSの下側にこのように書いてみました。他にも、もう少し余白を詰める指定を追加しています。

/* ＝＝＝＝＝＝＝＝
    小さい画面用
   ＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 480px) {
  div.main {
      margin-right: 0;
  }
  div.sidebar {
    position: relative;
  }
}

うん、一応読めるようになりました(汗汗)。

昔からデザインをあまり変えていない人は、もしかするとスマホで表示してみると悲しいことに気づいてしまうかもしれません、ということで orz

游ゴシック

Windows8.1から、[字游工房] の游ゴシックが標準で使えるようになりました。そこで、うちの日記も標準フォントをメイリオから游ゴシックに変えてみました。メイリオ、 Meiryo UI文章表示向けというよりはUI向けで、本文表示はこちらの方が綺麗かなと。

……少し細いような気もします。游ゴシック Light ではない、普通の太さのはずなのですけれど。そのうち慣れますかね？