Stinger5カスタマイズ！どこがどのデバイスに対応？「style.css」徹底分析！

絶大な人気を誇るWordpressテーマ「Stinger」。

最新版のStinger5はどのデバイスから見ても見た目が自動で最適化される「レスポンシブデザイン」を採用しています。
大きなウィンドウでも小さなウィンドウでもキレイにサイトが表示され、よりユーザーフレンドリーになりました。

この魔法のような表示の秘密は「style.css」にあります。
cssを画面の横幅で分岐させることでレスポンシブデザインを可能にしているんですね。

今回は「style.css」のどの部分がどのデバイスに適応されているのかを分析してみたいと思います。

これを読んで頂けばcssの最後にある「}」がなんのためのものかもわかりますよ。

※class,id構造が知りたい方はこちら: Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編-

「style.css」のざっくりした構造

デフォルトのstyle.cssの構造はざっくりこんな感じになっています。

@media only screen and (○○○-width: ○○○px) 

のコードを境に大きく4つの領域にわかれています。

この「@media only screen and (○○○-width: ○○○px) 」の部分がレスポンシブデザインの要です。

@media only screen and (○○○-width: ○○○px) の意味

@media only screen and (○○○-width: ○○○px) はウィンドウの横幅によってcssを分岐するためのコードです。

(○○○-width: ○○○px)の部分に当てはまるウィンドウサイズのときに限ってcssを適用します。

たとえば
「@media only screen and (max-width: 100px)」では横幅が100px以下のデバイスに、
「@media only screen and (min-width: 100px)」では横幅が100px以上のデバイスに適用されます。

横幅によるcssの適用範囲

@media onlyのコードを踏まえて横幅によるcssの適用範囲を見るとこうなります。

一番上の領域①はすべての場合に適用されて、残りは横幅のピクセル数で適用される場合とされない場合があるんですね。

結局どこがどのデバイスなの？

どこがどのデバイスなのかという点で重要になってくるのが「何ピクセルまではスマホとみなして、何ピクセルからはパソコンで…」といった線引。

Stinge5では

としているようです。

最終的にこうなるよ！

以上をすべて考えると適用範囲はこのようになります。

スマホだけ、タブレットだけの見た目を変えたい！という場合には該当の領域にコードを書いてくださいね。

おまけ:子テーマを作るとき

カスタマイズは子テーマでするよ！という方は、はじめに子テーマのcssにも「@media…」のコードを書いて領域分けしておくといいかもしれません。

領域分けせずにcssを書くとすべて領域①の扱いになってどのデバイスにも反映されてしまいます。
想定外の結果を防ぐためにも領域分けはしておきましょう。

あとがき

@Jimon_sさんをフォロー