Debutのブログでh2タグのサイズを修正したい

[yunonon]

Debutを使用しています。

ブログのCSSもサイト全体と同様にtheme.scss.liquidが読み込まれているのですが、ブログで見出しにh2タグを使用すると、h3よりもサイズが小さくなってしまいます。

theme.scss.liquidのh2タグを変更するとサイト全体がおかしくなるため、ブログのみh2タグのサイズを変更したり、hタグにそれぞれ下線を設定する等したいのですが、読み込むCSSをブログのみ変更するにはどうすれば良いでしょうか？

コード編集より色々とファイルを追加変更してみたのですが、ブログ記事のテンプレート読込箇所(画像参照)も「デフォルトのブログ記事」以外が表示されません。

よろしくお願いします。

[Yuya_M · Accepted solution]

とりあえずの解決として

templates/ article.liquid か section/  article-template.liquid のファイルに下記のコードを入れてみるのはいかがでしょうか？ (一番上らへんに)

Debut の初期のCSSだとh3とかより、なぜかh2が小さいのが謎ですよね。

ぼくの環境でChrome ブラウザだと1.7remくらいがちょうど良さそうでした。

{% style %}

h2 {

font-size: 1.7rem;

}

{% endstyle %}

[yunonon]

回答頂きありがとうございます。

そちらの方法でも出来るのですね。

日本のコミュニティだと人が少ないのかな？と思い、英語の方でも聞いたところ、下記の回答も頂きました。

https://community.shopify.com/c/Shopify-Design/Debut-changing-the-font-size-of-h2-tag-only-on-the-bl...

pxよりも教えていただいた1.7remで調整してみます。ありがとうございました！

[Yuya_M]

まだまだ勉強中の身ですが、お役に立ててよかったです。

>日本のコミュニティだと、、

Shopifyはカナダ発で英語ユーザーのほうが多いので、コミュニティも英語ユーザーのほうが多いらしいです。

最近コミュニティに参加したので詳しく状況はわかりませんが。

英語のコミュニティの方の回答も見ました。

body.template-article h2 {
    font-size: 22px !important;
}

ブログ記事のコンテンツがDebutのテーマだと template-article のクラスで囲まれているようなので、そちらの指定でうまくサイズ変わると思います。またDebutの初期CSSに書き込みして良いのであれば、そちらに記載する方法が良いと思います。

1rem = 16px (ブラウザの設定などによる)で  remの単位だと相対で指定できますが、DebutのCSSの書き方に合わせてピクセル指定で良いかもしれません。