【MALIA】ヘッダーの写真を小さくしたい
アメーバオウンドホームページ作成サポート、ラクリエイトです。
アメーバオウンドのデザイン「MALIA」
アメブロと連携できるデザインです。
ヘッダーの写真を小さくしたい
MALIAですが、ヘッダーの写真が大きく印象的なデザインなのですが、大きすぎると感じる方もいらっしゃるようです。
私もこのデザインを使う時には写真の高さを低くしています。
基本のままだとこのような感じです。
サイトタイトルをスクロールしないと見えないこともあります。
この写真の高さを低く表示してみます。
低くするとこのような見え方になります。
写真の高さの値を小さくしました。
標準のものよりサイトタイトルまでの間隔が短くなります。
大きさを比較してみる
標準のものと比べてみるとこんな感じです。
右側のものは高さを600pxにしています。
画像の見え方が変わるので印象が違いますね。
書き込むのはこれ
書き込む場所はこちらで書いています。
.keyvisual__item {
height: 600px;
}
この「height: 600px」の部分を自分の好みの高さにしてください。
全体だけ入れると、スマホ表示も「600px」になるので、
スマートフォンのほうにも
.keyvisual__item {
height: 200px;
}
を入れてください。
スマホ表示はこうなります。
スマホ表示を200pxにするとこのような表示になります。
スマホもパソコンも見ている人が使っている端末によって、見え方が変わってきますので、絶妙にこの高さ!と揃えるのではなく、だいたいこれくらいの表示、と思っていた方が良いです。
0コメント