ブログのみ見出しの変更

[watanabe1]

無料のspotlightテーマを使用しています。

1.商品ページなどとは別にブログ記事の文章で見出し（h1など）を変えたいと思っています。

section-blog-post.cssにブログポスト用のh1からh6のcssコードを書くことで変更できたのですが、フッターにもその見出しのcssが影響してしまい、ブログ記事のみ見出しを変えるにはどのようにすれば良いでしょうか？

2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？

[ROUTE06_baba]

こんにちは。

> 1.商品ページなどとは別にブログ記事の文章で見出し（h1など）を変えたいと思っています。

> section-blog-post.cssにブログポスト用のh1からh6のcssコードを書くことで変更できたのですが、フッターにもその見出しのcssが影響してしまい、ブログ記事のみ見出しを変えるにはどのようにすれば良いでしょうか？

section-blog-post.cssに、例えば以下のような記述をするのはいかがでしょうか？font-sizeなどは適当ですので、適宜ご調整いただけますと幸いです。

.article-template__content h1 { font-size: 2.5rem }
.article-template__content h2 { font-size: 2rem }
.article-template__content h3 { font-size: 1.5rem }
...

 もしうまくいかない場合、記述されたコードをご提示いただければ、詳細サポートできるかもしれません🙇🏻

[ROUTE06_baba]

五月雨に失礼します。

> 2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？

こんなイメージでしょうか？

snippets/article-card.liquidの93行目あたりに<p class="article-card__excerpt rte-width">...</p>という箇所があると思いますので、その中に例えば<p style="text-decoration: underline;">続きを読む</p>のように記述いただけると上のような表示となります。ご参考まで。

[watanabe1 · Accepted solution]

こちらもご返信ありがとうございました。

こちらは実現できました、ありがとうございます！

[watanabe1]

ご返信ありがとうございました。

h2-h6までは記載の通りにしたところ問題なく反映されました、ありがとうございます！

ただなぜかh1のみ反応しませんでした。

.article-template__content h1 {
background: linear-gradient(transparent 70%, #BD8139 70%);
}

.article-template__content h2 {

......以下 h6まで

[ROUTE06_baba]

コメントありがとうございます！試してみました。

section-blog-post.cssに追記したコード

結果

こちらで試した限りだと、ご提示いただいた内容で反映されるようでした。

ほかのCSSが干渉していないかなど、ご確認いただくとよさそうです。

確認いただくにあたっては、一時的に background: linear-gradient(transparent 70%, #BD8139 70%) !important; のように、末尾に!importantを付与するなどしてみていただけるとよいかと思います。

[watanabe1]

再度、ご返信ありがとうございました、問題なく実現できました！ありがとうございました。