FROM CACHE - jp_header
解決済

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

yunonon
Shopify Partner
8 1 10

Debutを使用しています。

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

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

 

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

よろしくお願いします。

スクリーンショット 2021-07-03 2.26.54.png

  • CSS
1 件の受理された解決策

Yuya_M
Shopify Partner
15 4 7

成功

とりあえずの解決として

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

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

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

{% style %}
h2 {
font-size: 1.7rem;
}
{% endstyle %}
 
Screen Shot 2021-07-04 at 23.49.36.jpg

元の投稿で解決策を見る

3件の返信3

Yuya_M
Shopify Partner
15 4 7

成功

とりあえずの解決として

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

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

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

{% style %}
h2 {
font-size: 1.7rem;
}
{% endstyle %}
 
Screen Shot 2021-07-04 at 23.49.36.jpg
yunonon
Shopify Partner
8 1 10

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

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

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

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 Partner
15 4 7

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

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

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

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

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

 

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

 

 

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

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