FROM CACHE - jp_header

画像とテキストを横並び、かつレスポンシブ対応にしたい

解決済

画像とテキストを横並び、かつレスポンシブ対応にしたい

ryubo
観光客
4 0 1

初投稿のため、質問方法に不備があるかもしれません。ご容赦ください。

 

コレクションページの説明欄の中で、「画像とテキストを横並びにして、かつPC⇔SPのレスポンシブ対応」がしたいです。

下記のようにcssとHTMLを使おうと思ったのですが、コード編集のどこにcssを差し込めばいいのか分からずにいます。

 

▼css

<style>

.flex{

 display: flex;

 justify-content: space-between;

}

 .flex>p{

 width: 49%;

} </style>

 

▼HTML

<div class="flex"> <p><img src="画像URL"></p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

 

▼最終的に下記のようになればOKと考えています

PC版

ryubo_0-1698308886688.png

SP版

ryubo_1-1698309042283.png

 

●試したこと

管理画面>オンラインストア>カスタマイズ>デフォルトのコレクション で、

「セクションを追加」をしたのですが、すべてのコレクションページに情報が適用されてしまいました。

 

コレクションが複数存在し、コレクションごとに使用する画像もテキストも異なるため、

コレクションの編集ページで対応したいと考えています。

ryubo_2-1698309276163.png

 

①コレクションページの説明欄で画像とテキストを横並び、かつレスポンシブ対応する方法があるのか?

②もしcssとHTMLで対応できる場合、cssはコード編集のどこに設置するのか?

をご教授いただけますと幸いです。

 

よろしくお願いいたします。

  • CSS
1 件の受理された解決策
福水正太
Shopify Expert
63 24 23

成功

解決できてよかったです!

もしよかったら、「ベストソリューション」に選んでいただけると、今後の励みになるので、よろしくお願いします!!

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

3件の返信3

福水正太
Shopify Expert
63 24 23

初めまして。

株式会社ファイブビットの福水と申します。

 

②に関して、特定のコレクションにのみCSSを当てたい場合は、下記動画のように、コレクション詳細ページの「説明」から、<style>~~~</style>タグの中に記述してあげると反映されると思います。

 

https://gyazo.com/dc2040c0e3ef9cf02481dbbda8f4e85f

 

ぜひお試しください。

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
ryubo
観光客
4 0 1

福水様

 

はじめまして。

本件、すぐにご教授いただきありがとうございます。

 

教えていただいた通り、説明欄で<style>~~~</style>タグの中に記述したところ、画像とテキストを横並びで表示させることができました。

 

ご教授いただきありがとうございます!

とても助かりました。

 

福水正太
Shopify Expert
63 24 23

成功

解決できてよかったです!

もしよかったら、「ベストソリューション」に選んでいただけると、今後の励みになるので、よろしくお願いします!!

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/