FROM CACHE - jp_header

Dawn スライドショーの上に表示するボタン(コンテンツ)の位置のカスタマイズとボタンサイズ変更方法

FABEA
観光客
13 0 1

Dawnのスライドショーでリンク付きボタンを画像の上に表示しているのですが、

下記2点のコード編集方法を教えていただけますでしょうか。

<前提設定条件>

デスクトップのコンテンツ位置:左下

デスクトップのコンテンツ配置:左

モバイルのコンテンツ配置:左

 

1. デスクトップでのコンテンツ表示位置を左下に設定しているが、さらに下に表示させたい

 

デスクトップのスライドショー表示イメージデスクトップのスライドショー表示イメージ

 

2. モバイルでのボタンサイズが大きすぎるので小さくし、もっと下に表示したい

モバイルでのスライドショー表示イメージモバイルでのスライドショー表示イメージ

 

Shopifyコード編集は初心者です。よろしくお願い致します。

2件の返信2

株式会社フルバランス
Shopify Partner
1504 539 673

FABEA様

 

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

 

Dawnのスライドショーですが、以下cssを追加することで調整できるかと思います。

 

<style>
.slideshow__text {
  position:relative;
}
.slideshow__text .banner__buttons { /* ボタンの位置 */
  position:absolute;
  top:50%;/* 任意の数字 */
}

.slideshow__text .banner__buttons .button { /* ボタンサイズ調整 */
  min-height: 0;
  min-width: 0;
  padding: 10px 5px;/* 任意の数字 */
}
</style>

 

 

もっと自由にレイアウト調整されたい場合は、liquidコードにてカスタマイズをする必要があるかと存じます。

 

ご参考までに。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
FABEA
観光客
13 0 1

フルバランスの園畑様

 

早速のご返信ありがとうございます。

仰せの通り、styleのcssをcomponent-slider.cssに追記し、ボタンの位置を変更することはできました。

ただ、ボタンサイズの変更が反映されません。ボタンサイズはどこか別の場所で設定されているのでしょうか。

また、コンテンツの親要素の場所を下を起点に位置設定を行う場合はどこを修正したらいいでしょうか。

見出し・小見出しを入力しないとボタンが上にずれてしまうためです。

 

ご教示いただければ幸いです。

宜しくお願い致します。