【MALIA】ヘッダーの写真を小さくしたい

アメーバオウンドホームページ作成サポート、ラクリエイトです。

アメーバオウンドのデザイン「MALIA」

アメブロと連携できるデザインです。

ヘッダーの写真を小さくしたい

MALIAですが、ヘッダーの写真が大きく印象的なデザインなのですが、大きすぎると感じる方もいらっしゃるようです。

私もこのデザインを使う時には写真の高さを低くしています。

基本のままだとこのような感じです。

サイトタイトルをスクロールしないと見えないこともあります。

この写真の高さを低く表示してみます。

低くするとこのような見え方になります。

写真の高さの値を小さくしました。

標準のものよりサイトタイトルまでの間隔が短くなります。

大きさを比較してみる

標準のものと比べてみるとこんな感じです。

右側のものは高さを600pxにしています。

画像の見え方が変わるので印象が違いますね。

書き込むのはこれ

書き込む場所はこちらで書いています。

.keyvisual__item {
height: 600px;
}

この「height: 600px」の部分を自分の好みの高さにしてください。

全体だけ入れると、スマホ表示も「600px」になるので、

スマートフォンのほうにも

.keyvisual__item {
height: 200px;
}

を入れてください。

スマホ表示はこうなります。

スマホ表示を200pxにするとこのような表示になります。

スマホもパソコンも見ている人が使っている端末によって、見え方が変わってきますので、絶妙にこの高さ！と揃えるのではなく、だいたいこれくらいの表示、と思っていた方が良いです。