1分ツイートシェアはてブPocketLINEレスポンシブ表示は、画面サイズに合わせてレイアウトを調整してくれる便利な機能です。今回は、レイアウトだけではなく画面サイズごとにデザインを変えるカスタマイズを紹介します。画面サイズで細かくデザインを変えてみようSimplicityは、いまや常識となりつつある「レズポンシブ表示」に対応しています。ひとつのHTMLファイルを設定するだけで、視聴する画面サイズの横幅に合わせて、デザイン(サイズが)が自動的に調整されます。わいひら様HPこのように画面サイズに合わせて自動で調整されます。画面サイズごとにレイアウトを設定しなくても、どの画面サイズでも似たような表示にすることができます。この機能を応用して、画面サイズによってデザインを変えることができます。PC表示の時とスマホ表示の時で見出し色を変えたりすることもできます。今回はPCとスマホ表示、スマホを横にした時の3種類を切り替える方法を紹介します。テーマ編集(エディター)右側のテンプレートの中のResponsive.cssを選びます。{}}この3つをResponsive.cssに書き込みます。and・・・によって、コードを適用する画面サイズを指定することができます。}」の間にコードを記述します。大切なのは赤矢印の部分です。}」を記述することで、画面サイズの設定を閉じることができます。ここを忘れずに入れてください。試しに画面サイズごとにH2の見出しの色を変えてみる!画面サイズに合わせてH2の見出しの色を変えてみます。Responsive表示に加えてさらに細かい表示の設定ができます。「ライフレシピ」のTOPページは、スマホ(iPhone6)の縦では2列のタイル表示ですが、スマホ横表示では3列のタイル表示です。上記の方法で、画面が縦の場合と横の場合で、タイルと余白の幅を変えて調整しています。現在はレイアウト変更しています。その他にもバリエーションはたくさんあります。試してみてくださいね。(※今回紹介したH2見出しの色設定は後ほど元に戻します。見出し【Simplicity】コピペで解決!タイトル下に人気記事をリスト表示するカスタマイズ【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。キャラ画像付きのふきだしで会話風にするカスタマイズ。コメントをキャンセルメールアドレスが公開されることはありません。子供のぬいぐるみを自分で洗濯してみよう。汚れやダニをまとめて落...プロフィール東北地方に住む「ごまっちょ」です。生活に役立つ「ライフレシピ」をお届けします。キャラ画像付きのふきだしで会話風にするカスタマイズ。(CSS修正しました)「Simplicity」記事ごとにナビやヘッダー、サイドバーなどを非表示にするカスタマイズ【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。【今週のおすすめ記事】どんなほくろが危険なの?しっかり観察してみよう...手のひらや足にできたほくろに要注意。悪性化させない...たったこれだけ!PhotoShop7をWindow...ほくろの毛は抜いても大丈夫?抜く前に知っておくこと...寝る時にでる咳を止める方法。咳が出にくい寝方を紹介...わかりにくいから解説!レゴクラシックの種類とその違...レゴを買うならおすすめ!黄色のアイデアボックス(ス...鍵穴が硬い・入りにくい時の直し方【家の鍵の場合】...手のひらのほくろ。寝る時にでる咳を止める方法。咳が出にくい寝方を紹介。アフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。