お問い合わせフォームから質問をいただいたので記事にしておきます。
当サイトのタイトル画像は、上下の余白をあまり取っていないだけで、特に CSS で大きさを変更をしているわけではないのですが、デザイン的にこの部分を大きく表示させたい場合もありますよね。その場合の変更方法を説明していきます。
サイトタイトルの画像サイズ
THE THOR のデフォルトだと、タイトル画像の大きさ（高さ）は PCから見た時が 30px、モバイルからの表示で 20px です。
当サイトではカスタマイザーから設定できる中で一番大きい、PC：50px、モバイル：30px に設定していますが、タイトルが2行になってしまう場合やロゴマークを入れたい場合など、もっと大きくしたい場合もあるかと思います。
そんな時に画像サイズやタイトル周りの余白を調整する方法を紹介します。
にコピペ（とサイズ変更）で実装できます。
タイトル画像の大きさを変更する方法
このカスタマイズを行うと、カスタマイザーからの設定は反映されなくなりますのでご注意ください。
PCから見た時のサイズが70px以下で良い場合
PCから見た時のタイトル画像のサイズ（高さ）が70px以下で良い場合は、以下の CSS をコピペするだけでOKです。
画像の大きさはご自分の環境に合わせて変更してください。
style-user.css
@media only screen and (max-width: 991px) {
#top .siteTitle__logo {
height: 50px; /*モバイルの時の高さ*/
}
.l-header .menuBtn {
line-height: 50px; /*ハンバーガーメニューの位置調整*/
}
}
@media only screen and (min-width: 992px) {
#top .siteTitle__logo {
height: 70px; /*PCから見た時の高さ*/
}
}PCから見た時のサイズを71px以上にしたい場合
タイトル画像の高さを71px以上にするとハンバーガーメニュー部分の表示が崩れますので、そちらも併せて変更する形になります。
画像サイズは各自の環境に合わせて変更してください。（サンプルで同じ数字が入っている個所は、全て変更した画像サイズと同じ数字に変更してください）
style-user.css
@media only screen and (max-width: 991px) {
#top .siteTitle__logo {
height: 50px; /*モバイルの時の高さ*/
}
.l-header .menuBtn {
line-height: 50px; /*ハンバーガーメニューの位置調整*/
}
}
@media only screen and (min-width: 992px) {
#top .siteTitle__logo {
height: 80px; /*PCから見た時の高さ*/
}
/*ハンバーガーメニューの表示調整*/
#top .menuBtn {
min-height: 80px;
}
#top .menuBtn__link{
min-height: 80px;
line-height: 80px;
}
余白の大きさの変更方法
モバイルから見た時の余白を小さくする方法
タイトル画像によっては、モバイルから見た時に上下の余白が大きすぎて気になるかもしれません。
これを狭くするには、以下のCSSを追記してください。
タイトル画像のサイズ変更のカスタマイズを行っている場合は、メディアクエリが重複するので、上記CSSの7行目の後あたりに、下記の色付きの部分（2～7行目）をコピペするとスマートです。
style-user.css
@media only screen and (max-width: 991px){
.l-header {
padding: 10px 0 10px 0;
}
.l-header .siteTitle {
margin-bottom:0;
}
}PCから見た時に余白を大きくしたい場合
タイトル画像のサイズを大きくするとヘッダー部分の余白がなくなるため、画像によっては上下に余白を取りたい場合もあると思います。
その場合は、上記のCSSの後半部分を（メディアクエリから後を丸ごと）以下のものに差し替えてください。
「タイトル画像の余白」というコメントが入っている行の「10px」という部分が上下の余白のサイズ（0 は左右の余白サイズ）です。
下記サンプルの「100px」が3つ並んでいる部分には、画像サイズと余白サイズを足した数値が入りますので、これらのサイズを変更する場合は併せて計算してください。
style-user.css
@media only screen and (min-width: 992px){
#top .siteTitle__logo {
height: 80px;/*PCから見た時の画像サイズ（高さ）*/
}
#top .siteTitle__link{
padding:10px 0;/*タイトル画像の余白*/
}
#top .menuBtn {
min-height: 100px;
}
#top .menuBtn__link{
min-height: 100px;
line-height: 100px;
}
}