 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、トップ画像の表示比率をPCとスマートフォンで変更する方法をご紹介します。
スマートフォン閲覧時に縦幅を固定し縮小表示しないようにすることができます。
 |
|
 |
 |
スタイルシートを編集する
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
下記の例では、横幅840px以下になったタイミングで画像の縦を300pxに固定します。
横幅については、元の画像横幅となります。
width、heightについては、変更いただいても問題ございません。
@media only screen and (max-width: 840px) {
#photo .item_image_box img {
width: 100%;
height: 300px;
object-fit: cover;
}
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.