Spotlightテーマを使用中のユーザーが、ブログ記事の見出しスタイルをカスタマイズする際に直面した2つの課題について質問しました。
課題1: ブログ記事のみ見出しを変更する方法
.article-template__content h1のようにクラスセレクタを使用してスコープを限定する方法が提案された!importantを追加することで、他のCSSとの干渉を回避し、最終的に解決課題2: ブログ抜粋に「続きを読む」を追加
<p class="article-card__excerpt rte-width">内に、<p style="text-decoration: underline;">続きを読む</p>を追加する方法が提案された両方の課題とも解決し、スレッドは完了しました。
無料のspotlightテーマを使用しています。
1.商品ページなどとは別にブログ記事の文章で見出し（h1など）を変えたいと思っています。
section-blog-post.cssにブログポスト用のh1からh6のcssコードを書くことで変更できたのですが、フッターにもその見出しのcssが影響してしまい、ブログ記事のみ見出しを変えるにはどのようにすれば良いでしょうか？
2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？
こんにちは。
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 }
...
もしうまくいかない場合、記述されたコードをご提示いただければ、詳細サポートできるかもしれません??
五月雨に失礼します。
2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？
こんなイメージでしょうか？
snippets/article-card.liquidの93行目あたりに
…
という箇所があると思いますので、その中に例えば続きを読む
のように記述いただけると上のような表示となります。ご参考まで。ご返信ありがとうございました。
h2-h6までは記載の通りにしたところ問題なく反映されました、ありがとうございます！
ただなぜかh1のみ反応しませんでした。
.article-template__content h1 {
background: linear-gradient(transparent 70%, #BD8139 70%);
}
.article-template__content h2 {
…以下 h6まで
こちらもご返信ありがとうございました。
こちらは実現できました、ありがとうございます！
コメントありがとうございます！試してみました。
section-blog-post.cssに追記したコード
結果
こちらで試した限りだと、ご提示いただいた内容で反映されるようでした。
ほかのCSSが干渉していないかなど、ご確認いただくとよさそうです。
確認いただくにあたっては、一時的に background: linear-gradient(transparent 70%, #BD8139 70%) !important; のように、末尾に!importantを付与するなどしてみていただけるとよいかと思います。
再度、ご返信ありがとうございました、問題なく実現できました！ありがとうございました。
