Debutを使用しています。
ブログのCSSもサイト全体と同様にtheme.scss.liquidが読み込まれているのですが、ブログで見出しにh2タグを使用すると、h3よりもサイズが小さくなってしまいます。
theme.scss.liquidのh2タグを変更するとサイト全体がおかしくなるため、ブログのみh2タグのサイズを変更したり、hタグにそれぞれ下線を設定する等したいのですが、読み込むCSSをブログのみ変更するにはどうすれば良いでしょうか？
コード編集より色々とファイルを追加変更してみたのですが、ブログ記事のテンプレート読込箇所(画像参照)も「デフォルトのブログ記事」以外が表示されません。
よろしくお願いします。
とりあえずの解決として
templates/ article.liquid か section/ article-template.liquid のファイルに下記のコードを入れてみるのはいかがでしょうか？ (一番上らへんに)
Debut の初期のCSSだとh3とかより、なぜかh2が小さいのが謎ですよね。
ぼくの環境でChrome ブラウザだと1.7remくらいがちょうど良さそうでした。
{% style %}
h2 {
font-size: 1.7rem;
}
{% endstyle %}
回答頂きありがとうございます。
そちらの方法でも出来るのですね。
日本のコミュニティだと人が少ないのかな？と思い、英語の方でも聞いたところ、下記の回答も頂きました。
pxよりも教えていただいた1.7remで調整してみます。ありがとうございました！
まだまだ勉強中の身ですが、お役に立ててよかったです。
日本のコミュニティだと、、
Shopifyはカナダ発で英語ユーザーのほうが多いので、コミュニティも英語ユーザーのほうが多いらしいです。
最近コミュニティに参加したので詳しく状況はわかりませんが。
英語のコミュニティの方の回答も見ました。
body.template-article h2 {
font-size: 22px !important;
}
ブログ記事のコンテンツがDebutのテーマだと template-article のクラスで囲まれているようなので、そちらの指定でうまくサイズ変わると思います。またDebutの初期CSSに書き込みして良いのであれば、そちらに記載する方法が良いと思います。
1rem = 16px (ブラウザの設定などによる)で remの単位だと相対で指定できますが、DebutのCSSの書き方に合わせてピクセル指定で良いかもしれません。