STINGER3をレスポンシブデザインにカスタマイズしました

公開日： 2014.09.14
カテゴリ： Wordpress
タグ： WordPress
※本ブログには広告が含まれます

このブログはWordPressのSTINGER3という有名なテーマを使わせていただいております。先日、STINGER5がリリースされてレスポンシブ対応になったのですが、当ブログはいろいろカスタマイズしていたせいもあって、アップデートしないでいました。そこで休日に思い切って、カスタマイズしたSTINGER3をレスポンシブにしてみました。

STINGER5にアップデートしてからカスタマイズするよりも、カスタマイズしたSTINGER3をレスポンシブにしたほうが楽かなという考えです。このブログは記事ページを1カラムにしていたりと、大幅に変えてしまっていたので。

ブレイクポイント

レスポンシブデザインは、画面の幅によって、デザインを変えることができます。最近は流行っているみたいで、色々なサイトでよく見ます。

元々STINGER3はPCとモバイルで読み込むCSSファイルを変えるようになっています。そこで、CSSは1つにして、画面のサイズでデザインを変えるように修正しました。

CSSの内容ですが、

・
・
共通部分
・
・
@media screen and (max-width:600px){
・
・
スマホ
・
・
}
@media screen and (min-width:601px) and (max-width:768px){
・
・
タブレット
・
・
}
@media screen and (min-width:769px){
・
・
PC
・
・
}

というように、600pxと768pxをブレイクポイントとして切り替わるようにしています。今度発売になるiPhone6とiPhone6 Plusの解像度次第では、変えるかもしれません。スマホ用のブレイクポイントは480pxぐらいが一般的なのかもしれませんが、少し広めにしました。

IE8対応

@mediaがIE8に対応していないとのことなので、header部に以下の記述を追加しました。

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/html5shiv.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/css3-mediaqueries.js"></script>
<![endif]-->

これで、IE8からもHTML5のタグとCSS3の@mediaタグが有効になります。html5shiv.min.jsとcss3-mediaqueries.jsはダウンロードして、自分のサーバーに上げました。ダウンロード先はググれば一番上に出てきました。