はじめまして、junjun1001と申します。
現在、shopifyで「テーマ」Dawnにて店舗を運営してます。
タイトルの通り、トップページのコレクションの商品リストの文字を大きくしたいのですが、どの部分をどのように編集したらよいかご教授頂けないでしょうか。
テーマ設定にて
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
{
font-size: 18px;
}
見出しの大きさ変更はできました。
宜しくお願い致します。
Topic summary
Dawnテーマを使用しているShopifyストアで、トップページのコレクション商品リストの文字サイズを大きくする方法についての質問。
問題:
- 質問者はテーマ設定でh2やh3のフォントサイズを変更したが、表示が変わらなかった
- カスタムCSS内で「h3はこのセクションでは使われていない」というエラーが表示された
解決方法:
- 株式会社Tsunの吉谷氏が、「特集コレクション」セクションのカスタムCSSを利用する方法を提案
- 当初提案された
.card__headingやh3のセレクタではエラーが発生 - Chromeデベロッパーツールを使用して実際に使われているタグやクラスを調査することを推奨
- 最終的に質問者は
.card-information__textというクラスを特定し、文字サイズの変更に成功
結果: 解決済み。デベロッパーツールで正しいCSSセレクタを見つけることで問題が解消された。
はじめまして
株式会社Tsunの吉谷と申します。
本セクションは「特集コレクション」になりますでしょうか。
特集コレクションであれば、カスタムCSSを利用することで文字サイズを大きく出来ると考えています。
サンプルCSS（添付画像のCSS）
.card__heading {
font-size: 30px;
}
または
h3 {
font-size: 30px;
}
以上になります
ご参考になりましたら幸いです。
junjun1001様
2点、確認をお願いできますでしょうか。
・「特集コレクション」セクション内のカスタムCSSで試していますでしょうか。
・「.card__heading」の場合でもだめでしょうか。
「特集コレクション」セクション内のカスタムCSSです。
どちらも試したのですが、同じようなエラーになります。
junjun1001様
私の所有する「Dawn 5.0.0」や「Dawn 9.0.0」では同様のエラーが発生しないため、原因特定が困難な状況です。
もし、エラーの内容通りh3や.card__headingが使用されていないなら、添付画像のようにChromeのデベロッパーツールなどを利用し、文字を大きくしたい部分のタグまたはクラスを調べて、そちらをカスタムCSSに利用すると良いと思います。
[参考] デベロッパーツールの使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool
以上になります。
ご参考になさってください。
1 Like
ありがとうございます！
やってみたらできました！
.card-information__text となっていました。
ご丁寧にありがとうございました。