レスポンシブウェブデザイン対応

少し専門的な話にはなりますが、本ブログのレスポンシブデザイン対応が完了しました。わかる人は試してみてください。きっと様々なデバイスでもうまく表示されるようになっているはずです。(レスポンシブデザインについてはこちらをご参照ください
 →レスポンシブウェブデザイン

これに伴いスマートフォンでの専用デザインを廃止し、PCと同じものが表示されるようになっています。(ガラケーは無視です) これを機に少しブログのデザインも変えてみようかななんてことも考えています。

ちなみにseesaaの場合は、以下の2つの記述を追加する事で簡単に対応できます。

-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
【HTMLのheaderタグに追加するもの】
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=2″>
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

※括弧<>は半角に直してください

【CSSの最後に追加するもの】
@media screen and (min-width : 0px) and (max-width : 767px){
#container{width: 100%}
#content{width: 100%}
.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden} #links{width: 100%}
}
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

ちょっとマニアックかつ備忘録的なお話でした。