WordPressの無料テーマ「Cocoon」は完全なレスポンシブデザインになりました。
その分、良くも悪くも超シンプルなデザイン設計となっていますね。
そんなCocoon。カスタマイズする人も多いテーマということで、今回はPCサイトとスマホサイトでデザインを変える方法を紹介したいと思います。
「スマホサイトにだけこのcssを使いたい」とか。
PCサイトとスマホサイトは画面サイズが大きく変わるので、カスタマイズしているとそれぞれレイアウトを変えたい場面が必ずあります。
ぜひ覚えておきましょう！
PCサイトとスマホサイトでデザインを変えたい
レスポンシブデザインである以上、PCとスマホでデザインを変えるには「1つのHTMLコードをもとに、cssを使って2つのデザインを作ること」が必要です。
1から作ろうとするとなかなか面倒なことなんですが、すでに完成しているテーマの一部をカスタマイズするだけなら簡単なので安心してください。
よくあるのが、スマホサイトにだけこのcssを適用させたいという場面。これは多いですよね。
もちろん、オリジナルのHTMLコードを生成してそれぞれのデザインを変える場合は、「HTML」と「css」の知識がある程度必要。多少の勉強をする必要があります。
CSSの「メディアクエリ」を使って画面サイズを把握
ここからは具体的な方法について見ていきましょう。
レスポンシブデザインに欠かせないのが、cssの「メディアクエリ」と呼ばれる機能。
これは、「画面の横幅サイズによって適用させるスタイルを変化させる仕組み」となっています。
例えばこんな感じ。
@media screen and (max-width:480px) {
/* この中に適用させたいCSSを記述します */
}
これがメディアクエリの記述です。
「max-width:480px;」と書かれていますが、これはつまり「画面サイズが最大480pxまではこの中のcssを適用させる」という命令をしていることになります。
逆に言うと、横幅が480pxを越えるとこの中に記述したcssは無視されるということです。
ちなみに「max-width」の反対で「min-width」も存在します。
これは、「画面サイズが最小〇pxまではこの中のcssを適用させる」という意味ですね。
PCサイトのみに適用させたい時はこっちが便利。
こんな感じで「画面の横幅」によってPCとスマホ、あるいはタブレットを識別してcssを使い分けていくのがメディアクエリの使い方です。
Cocoonのレスポンシブデザイン用メディアクエリ
Cocoonの「スタイルシート（style.css）」にはメディアクエリの記述欄場所が初めから用意されています。
スタイルシート内の一番下にあるのでチェックしてみてください。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
先ほど紹介したメディアクエリが並んでいますね。
スマホのみにcssを適用させたい場合は、一番下の「480px以下」の中に記述していきましょう。
他に必要なものがあれば、各自「min-width」などのメディアクエリを追加してカスタマイズしてみてください。
