「Simplicity」 画面サイズでデザインを変えるカスタマイズ

画面サイズで細かくデザインを変えてみよう

Simplicityは、いまや常識となりつつある「レズポンシブ表示」に対応しています。

ひとつのHTMLファイルを設定するだけで、視聴する画面サイズの横幅に合わせて、デザイン(サイズが)が自動的に調整されます。

simplicity12016y03m14d_232531579
Simplicity公式HPより Simplicity製作者  わいひら様HP

このように画面サイズに合わせて自動で調整されます。

画面サイズごとにデザインを設定しなくても、どの画面サイズでも似たような表示することができます。

でも、画面サイズによってデザインを変えたいなー

どうゆこと?

例えば、スマホ表示の時とPC表示の時で色を変えたりしてみたい

できるよ!

ほんと?!

じゃあ、PCとスマホ表示だけじゃなくスマホを横にした時も加えて3種類を切り替えてみよう!

スポンサーリンク

視聴デバイスの幅でデザインを変える

ダッシュボード → 概観 → テーマ編集(エディター)

右側のテンプレートの中のResponsive.cssを選びます。(子テーマ使用が推奨です)

@charset "UTF-8";

/*ここにレスポンシブのスタイルを書く*/

@charset "UTF-8";

/*PCの表示*/

/*スマホ縦画面時の表示*/
@media screen and (max-width: 780px) {

}
}
/*スマホ横向きとタブレット縦画面時の表示*/
@media screen and (min-width: 480px) {

}
}
/*タブレット横とPCの表示*/
@media screen and (min-width: 780px) {

}
}

この3つをResponsive.cssに書き込みます。

666

こんな感じです。

@media screen and・・・によって、コードを適用する画面サイズを指定することができます。

その後の「{ 」と「 }」の間にコードを記述します。

大切なのは赤矢印の部分です。もうひとつ「 }」を記述することで、画面サイズの設定を閉じることができます。ここを忘れずに入れてください。

試しに画面サイズごとにH2の見出しの色を変えてみる!

2016y03m15d_234554314

画面サイズに合わせてH2の見出しの色を変えてみます。

PC表示

2016y03m15d_224720856

スマホ(iPhone)縦で表示

image2

スマホ(iPhone)横で表示

image1

さらにバリエーションが増えてデザインに幅ができる!

いかがでしたか? Responsive表示に加えてさらに細かい表示の設定ができます。

例えば「ライフレシピ」のTOPページは、スマホ(iPhone6)の縦では2列のタイル表示ですが、スマホ横表示では3列のタイル表示です。

上記の方法で、画面が縦の場合と横の場合で、タイルと余白の幅を変えて調整しています。

その他にもバリエーションはたくさんあります。いろいろ試してみてくださいね。 (※今回紹介したH2見出しの色設定は後ほど元に戻します。)

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク