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

SHARE

「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見出しの色設定は後ほど元に戻します。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です