ヘッダーのロゴに関して

日本語 ディスカッション 技術的なQ＆A
1

SVGファイルにて、ヘッダーのロゴを作成を行い、入れ込みを行いました。

その際、ヘッダーの幅も変わってしまいます。

デフォルトの文字の部分のみ、オリジナルロゴに変更したいのですが、どのように行えばよいでしょうか。

（Dawnのバージョン15.2.0を使用、ロゴの配置は中央です）

お手数ですがご教示よろしくお願いします。

1 Like
2

質問拝見しました。

ロゴの大きさとヘッダーの高さを制限することによって、ヘッダーの幅を変えずに調整できるかと思います。

適宜cssのクラス名やサイズを変更して参考にしていただけますと幸いです。

ロゴのサイズ調整（CSS）

SVGロゴがヘッダー全体の幅を変えないようにCSSで制限を加えます。

・以下のCSSを追加します

.header__heading-logo 
{ max-width: 150px; /* ロゴの最大幅 */ 
height: auto; /* 自動で縦横比を維持 */ 
}

ヘッダーの高さを調整

ロゴサイズに合わせてヘッダーの高さも調整します。

.header { 
height: auto; /* 自動で高さを調整 */ 
padding: 10px 0; /* ヘッダー内の上下の余白を調整 */ 
}

上記で下記が解決できるかと思います。

・ロゴが大きくなりすぎるのを防止。

・ヘッダーの幅や高さが崩れない。

プレビューリンクなどの共有やキャプチャ画像などいただけたらもっと適切なcssなどを提示できるかと思います。

一度上記方法を参考にしていただけますと幸いです。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

3

株式会社フルバランス様

コメントありがとうございます。

.header {
height: auto; /* 自動で高さを調整 /
padding: 10px 0; / ヘッダー内の上下の余白を調整 */
}

上記のコードを入れ込むとPCは問題ないのですが、スマホの全体のレイアウトが崩れてしまいます。

（大きくなってしまいます）

もしお分かりであればご教示お願いします。