FROM CACHE - jp_header
解決済

Dawnテーマでのテキストつき画像で画像を左右に配置したい

carma_takuma
観光客
4 0 0

現在、Dawnを利用しています。モバイル表示の際に画像をテキストの左、またはテキストの右に配置したい場合どのように設定すればできますか?

1 件の受理された解決策
株式会社フルバランス
Shopify Partner
1463 519 651

成功

イメージ画像ありがとうございます!

画像が正方形の場合ですと、以下コードでdawnのデフォルトは、以下コードで対応できました(イメージ画像添付)

文字サイズに関しては適宜調整していただければと思います。

またモバイル版のcssになりますので少し追加もございます。

.image-with-text__media--placeholder > svg {
  height: auto;
}
.grid--1-col .grid__item {
  max-width: 50%;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 749px) {
  .image-with-text__content {
    padding: 5px;
  }
  .image-with-text__heading {
    font-size: 12px;
  }
  .image-with-text__text {
    font-size: 10px;
  }
}

 スクリーンショット 2024-02-28 10.19.28.png

 

コピペで利用できるかなと思いますのでご参考までにお願いします。

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

元の投稿で解決策を見る

5件の返信5

株式会社フルバランス
Shopify Partner
1463 519 651

質問拝見しました。

 

DAWNのデフォルトで備わっている画像付きテキストセクションをご利用の場合は以下コードが有効です。

 

写真とテキストを横に並べたい場合は、

セクションのカスタムCSSに以下コードを入れてみてください

 

.grid--1-col .grid__item {
  max-width: 50%;
}

 

 

この場合画像が縦長になってしまう場合あるのでいちおうそちらを修正できる以下コードもご参考までにしてください。

 

.image-with-text__media--placeholder>svg{
  height:auto;
}

 

 

こちらコードでモバイル版でも横並びになります。

 

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

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

早速、テキストつき画像のカスタムCSSに以下を入れてみたところ、やはり以下のような縦長になってしまいました。

.grid--1-col .grid__item { max-width: 70%; }

.image-with-text__media--placeholder>svg{ height:auto; }

文字はそれぞれ小をえらんでおり、画像は正方形の535*535というサイズにしています。
期待値としては以下のようにしたいのですが、良い方法あったらご教示いただけますと幸いです。

(テキスト付き画像を何段か重ねて配置し、画像を左においたり、右においたりも可能なら指定したいです)
質問ばかりですみません。よろしくお願いいたします

carma_takuma
観光客
4 0 0

画像が添付できてなかったので添付します

 

以下のCSSを設定したときの挙動

.grid--1-col .grid__item { max-width: 70%; }
.image-with-text__media--placeholder>svg{ height:auto; }

IMG_1219.jpg

期待する画面

IMG_1218.jpg

株式会社フルバランス
Shopify Partner
1463 519 651

成功

イメージ画像ありがとうございます!

画像が正方形の場合ですと、以下コードでdawnのデフォルトは、以下コードで対応できました(イメージ画像添付)

文字サイズに関しては適宜調整していただければと思います。

またモバイル版のcssになりますので少し追加もございます。

.image-with-text__media--placeholder > svg {
  height: auto;
}
.grid--1-col .grid__item {
  max-width: 50%;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 749px) {
  .image-with-text__content {
    padding: 5px;
  }
  .image-with-text__heading {
    font-size: 12px;
  }
  .image-with-text__text {
    font-size: 10px;
  }
}

 スクリーンショット 2024-02-28 10.19.28.png

 

コピペで利用できるかなと思いますのでご参考までにお願いします。

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

解決しました!ありがとうございました