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

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


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

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


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

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

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


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



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

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



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

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

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


大きさを比較してみる

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

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

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



書き込むのはこれ

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



.keyvisual__item {
height: 600px;
}


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

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

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


.keyvisual__item {
height: 200px;
}


を入れてください。



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

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

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

0コメント

  • 1000 / 1000