こんにちは。初めて質問させていただきます。
無料テーマ「Debut」を使用し、
ヘッダーの透過＆固定のためコードを変更したところ、
各ページの上部の余白がなくなってしまいました。
以下、詳細画像です。
ヘッダーとタイトル（画像はブログ投稿ページ）が
重なった状態になっています。
ヘッダー編集のために触ったコードは、下記になります。
コード編集画面の**「** **Assets」にある「theme.css」**から
**「site-header」**を編集。
.site-header {
position: relative;
background-color: var(–color-body);
}
の部分を以下に書き換えました。
site-header {
background-color: transparent;
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
right:0px;
border: none;
}
無事透過＆固定はできましたが、ページ上部の余白を害するような書き方になっていますでしょうか。
また、改善方法などがありましたらご教授いただけますと幸いです。
よろしくお願い致します。
ストアURLを教えてください。 パスワードがあれば一緒に教えてください。
手を差し伸べてくださりありがとうございます、、、！
ストアURLです。
https://lienu-jewelry.myshopify.com/
下記パスワードです。
zieffa
スマホ画面からだとかなり重なって見えてしまいます。
@Kitatema
今のヘッドは正常に見えます。
ただし、トップサーチバーがあまりにも上に行きました。
theme.cssファイルに以下のコードを追加してください。
div#SearchDrawer {
top：0;
bottom: 0;
right: 0;
margin: auto;
}
役に立つ場合は、Like＆Accept solutionをクリックしてください。
他に質問があれば教えてください。
1 Like
@DavidEKim 様
お返事ありがとうございます！
トップサーチバーに関してコメントありがとうございます！
コードはtheme.cssファイルの最後の行に貼り付けで問題ないでしょうか？
コードの知識があまりなく、申し訳ありません。。
また、上記で質問させていただいているページ余白に関して
TOPページからこちらの画像をクリックしていただくとブログ投稿ページに移動するのですが、そちらのヘッダーとタイトル間の余白（下記画像、赤線部分）をもう少し取りたいと考えています。
TOPページからどこかページに移動するとどこのページも上部の余白がなくなっているので、共通のコード部分を触る必要があるのかと考えているのですが・・・
あとよろしければもう一点質問させてください。
各ページのタイトルや商品タイトルの文字のサイズを小さくしたいです。
文字サイズの変更の方法もご存知でしたらご教授いただけますと幸いです、、！
どうぞよろしくお願い致します。
以下のコードをtheme.cssファイルに追加してください
h1, h2, .h0, h1#title-0, h1.product-single__title {
margin-top: 50px;
font-size: 24px;
}
margin-top は上余白を決める値です。
font-size は、ブログタイトルと商品タイトルの文字サイズを調整する値です。
お役に立てば幸いです。
1 Like
@DavidEKim 様
教えていただいたコードで解決いたしました！！
本当にありがとうございます。
商品詳細ページ のスマホ版の見え方なのですが、
下記画像のように青線部分の余白が調整でき、
赤線部分は調整することができない状況です。
こちらも赤線部分を調整できる方法を教えていただくことは可能でしょうか。
お忙しいところ度々申し訳ございません。。
@DavidEKim 様
赤線と青線はスクリーンショット画像に私が手書きで描いたものです！
分かりづらくて申し訳ございません 
@DavidEKim 様
お世話になっております。
追加で質問させていただいた商品ページ上部の余白調整について
解決することができました！
お忙しい中、ご親切にご対応くださり本当にありがとうございました、、！
