FROM CACHE - jp_header

スライドショーをヘッダーの部分に表示させたい

arimachan
訪問者
2 0 0

ヘッダーの背景を透過し、スライドショーの上にメニューを表示したい

画像参照

 

スクリーンショット 2023-07-31 22.38.18.png

 下記のように

スクリーンショット 2023-07-31 22.39.12.png

  • CSS
5件の返信5

Qcoltd
Shopify Partner
1051 431 418

@arimachan 

 

ご質問いただいている、スライドショーをヘッダーの部分に表示させたい件ですが、ご使用のテーマが不明なため考え方を記載させていただきます。

簡単に設定するには、ヘッダーより下にコンテンツエリアがある場合は、コンテンツエリアに対しCSSでヘッダー分マイナスマージンを入れると良いのではと思います。

 

DawnテーマでのCSS例

main {
  margin-top:-50px;
}

-50px部分は実際のヘッダーの高さに合わせてください。

 

実際にご使用のテーマをご共有いただけましたら、もう少し詳しく回答ができるかもしれません。
有料のテーマですと、対応できない場合もありますのでご了承ください。

 

ご参考まで。
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
r_kyu
観光客
4 0 0

お世話になります。

 

dawnを使用しておりまして質問者と同じことを実現したいのですが、

上記の方法でうまくいかず...

カスタムCSSの部分の入れる形であってましたでしょうか??

 

Qcoltd
Shopify Partner
1051 431 418

@r_kyu

 

カスタムCSSは、テーマ設定のカスタムCSSに入れていただければと思います。

また、コンテンツが上部にずれていたとしても、ヘッダーの背景色が設定されている場合は、ヘッダーに隠れ見えませんので、ヘッダーの背景色も合わせて削除いただければと思います。

 

ご参考まで。

キュー小坂

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
r_kyu
観光客
4 0 0

早急なご返信いただきありがとうございます!

カスタムCSSの部分に入れ、配色もすべて無しにしているのですが反映できず...。

何か考えられる原因はありますでしょうか??

当方html,cssともに知識は疎く(様々なQAを拝見させていただき、丸コピペでなんとかやっておりましたが...)、可能でしたらどの部分を見れば解決策がわかるなどありましたら教えていただけましたら幸いです。

 

 

Qcoltd
Shopify Partner
1051 431 418

@r_kyu

 

現状の状態が把握できませんので、

コンテンツ部分が上部にずれているが、ヘッダーの背景色が消えていない?など、想像でのお話になってしまいますので、

プライベートメッセージにて、現状のサイトURLなどの情報をいただけましたら、

もう少しお手伝いできるかもしれません。

 

キュー小坂

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/