Sumirexxx

今日もiPhone片手に出かけます

[š]CSSメディアクエリ(@media)を使ってレスポンシブ切り替えする方法に変更しました はてなブックマーク - [š]CSSメディアクエリ(@media)を使ってレスポンシブ切り替えする方法に変更しました

ブログ

Placeit

こんにちは、すみれ(@sumire20120524)です。

レスポンシブ対応。最近よく耳にする言葉です。

時代の波に乗ってみようと、Sumirexxxもレスポンシブ対応の仕方を子テーマから@media記述の方法に変えてみました。

もしPCで見れたら、Sumirexxxを開いてブラウザを縮めたり拡大したりしてみてください。

おそらく、ブラウザのサイズによって表示が変わると思います。

レスポンシブ対応

スマホサイズ599pxまで

このサイズは主にスマホサイズに適用するようにしています。

最小サイズ599pxまで

タブレットサイズ600px以上~767px以下

タブレットサイズは、記事の詳細も出すようにしています。サイドバーは下に配置されるようにしました。

タブレットサイズ

PCサイズ768px以上

そしてPCサイズは従来通り。左に記事一覧、右にサイドメニューという配置になっています。

PCサイズ

今までは子テーマでレスポンシブ対応

今までこのブログのレスポンシブは、子テーマを作る方法で対応していました。

今あるテーマとは別にもう一つ(あるいは複数)作って、必要なファイル(CSSとか)だけ新しく作成したのが子テーマです。

で、親テーマのfunction.phpには”共通してる部分は親テーマから読み込んでね”と設定しておいて、子テーマには”共通で使いたいところだけ親テーマを継承します”って書いとくみたいな手順があります。

WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など

これを当時いっしょうけんめい説明した記事がこちら。笑

超簡単☆WordPressスマホ最適化!Wptouchをやめて子テーマにしました | Sumirexxx

WordPressの子テーマで、フォントサイズを最適化する方法 | Sumirexxx

これからは@mediaでレスポンシブ対応

がんばって作った子テーマではありますが、今回はいくつもcssを作るようなことはせず、cssは1枚だけ

@mediaというcssのタグをつかって、画面の大きさによって振り分けるようにしてみました。

CSSの具体的なソース

viewportの設定

headタグ内にこれは必ず入れます。各端末の画面幅に合わせて表示します。

viewport

元となるCSS

CSS

こんな感じで上から普通にCSSを書き込んでいます。

ほぼ、ヘッダー>メイン>サイドバー>フッターの順で記述しています。

共通部分なので書き直す必要はありません。

スマホ用CSS

スマホ@media

タブレット用CSS(小)

タブレットサイズも同様です。

KindleやiPad miniサイズ

タブレット用CSS(大)

タブレット

まとめ

なんとか表示は切り替えられたものの、CSSも記述に不安が残ります。

地味にフッターや諸々表示も変えたりしています。

あやふやな部分をなくしていくのが今年の目標ですー!

<