WordPressテーマSANGOの質問

PCとモバイルでロゴ画像のサイズを変えたい

美波

2019/10/18

いつもお世話になっております。

ご質問させてください。
上記の「ロゴ画像の最大幅を指定する場合のCSS」を使用しているのですが、スマホは違うサイズで指定したいと思っています。

どのようにすれば良いでしょうか？
（PCはサイズ大きめ設定、スマホは小さめ設定にしたい）

/*ロゴ画像を横全体に表示*/
#inner-header, #drawer + #inner-header,#logo{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.header–center #logo img {
padding: 0;
height: auto;
width: 100%;
max-width: 600px;
}
.header–center #logo {
padding: 0;
}
/*END ロゴ画像を横全体に表示*/

よろしくお願いいたします。

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

コメントへの回答

サルワカくん

2019/10/18

お世話になっております。
その場合、CSSの「メディアクエリ」という仕組みを使います。
たとえば、480px以上の画面でのみ適用したいCSSがある場合、以下のように書きます。

@media only screen and (min-width: 480px) {
  ここに幅480px以上でのみ適用されるCSSを書く
}

たとえば、今回のカスタマイズの内容を480px以上のスクリーンでのみ適用したい場合、以下のようなCSSを追加します。

/* 480px以上で適用 */
@media only screen and (min-width: 480px) {
  /*ロゴ画像を横全体に表示*/
  #inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 600px;
  }
  .header--center #logo {
    padding: 0;
  }
  /*END ロゴ画像を横全体に表示*/
}
/* 480px以上 ここまで */

もし、「480px~768pxの画面ではロゴの最大幅を400pxにして、それ以上の画面ではロゴの最大幅を500pxにしたい」という場合は以下のようにします。

/* 480px以上で適用 */
@media only screen and (min-width: 480px) {
  #inner-header, #drawer + #inner-header, #logo{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 400px;
  }
  .header--center #logo {
    padding: 0;
  }
}
/* 480px以上 ここまで */
/* 768px以上で適用 */
@media only screen and (min-width: 768px) {
  .header--center #logo img {
    max-width: 500px;
  }
}
/* 768px以上で適用 ここまで */

よろしくお願いします。