# ブログのみ見出しの変更 **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css\ **Created:** [December 25, 2024, 1:43am UTC](https://community.shopify.com/t/topic/382712 "2024-12-25T01:43:21Z")\ **Posts on this page:** 7\ **Page:** 1 ## AI-generated summary Spotlightテーマを使用中のユーザーが、ブログ記事の見出しスタイルをカスタマイズする際に直面した2つの課題について質問しました。 **課題1: ブログ記事のみ見出しを変更する方法** - section-blog-post.cssに見出しのCSSを追加したところ、フッターにも影響が出てしまった - 解決策として、`.article-template__content h1`のようにクラスセレクタを使用してスコープを限定する方法が提案された - h2-h6は問題なく反映されたが、h1のみ最初は反映されなかった - `!important`を追加することで、他のCSSとの干渉を回避し、最終的に解決 **課題2: ブログ抜粋に「続きを読む」を追加** - snippets/article-card.liquidの93行目付近の`

`内に、`

続きを読む

`を追加する方法が提案された - こちらは問題なく実現できた 両方の課題とも解決し、スレッドは完了しました。
**Author:** ![watanabe1](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@watanabe1](https://community.shopify.com/u/watanabe1)\ **Post date:** [December 25, 2024, 1:43am UTC](https://community.shopify.com/t/topic/382712/1 "2024-12-25T01:43:21Z")
無料のspotlightテーマを使用しています。 1.商品ページなどとは別にブログ記事の文章で見出し（h1など）を変えたいと思っています。 section-blog-post.cssにブログポスト用のh1からh6のcssコードを書くことで変更できたのですが、フッターにもその見出しのcssが影響してしまい、ブログ記事のみ見出しを変えるにはどのようにすれば良いでしょうか？ 2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？ ---
**Author:** ![ROUTE06\_baba](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/route06_baba/32/106703_2.png) [@ROUTE06\_baba](https://community.shopify.com/u/ROUTE06_baba)\ **Post date:** [December 25, 2024, 2:00am UTC](https://community.shopify.com/t/topic/382712/2 "2024-12-25T02:00:21Z")
こんにちは。 > 1.商品ページなどとは別にブログ記事の文章で見出し（h1など）を変えたいと思っています。 > section-blog-post.cssにブログポスト用のh1からh6のcssコードを書くことで変更できたのですが、フッターにもその見出しのcssが影響してしまい、ブログ記事のみ見出しを変えるにはどのようにすれば良いでしょうか？ section-blog-post.cssに、例えば以下のような記述をするのはいかがでしょうか？font-sizeなどは適当ですので、適宜ご調整いただけますと幸いです。 ```markup .article-template__content h1 { font-size: 2.5rem } .article-template__content h2 { font-size: 2rem } .article-template__content h3 { font-size: 1.5rem } ... ``` もしうまくいかない場合、記述されたコードをご提示いただければ、詳細サポートできるかもしれません?? ---
**Author:** ![ROUTE06\_baba](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/route06_baba/32/106703_2.png) [@ROUTE06\_baba](https://community.shopify.com/u/ROUTE06_baba)\ **Post date:** [December 25, 2024, 2:12am UTC](https://community.shopify.com/t/topic/382712/3 "2024-12-25T02:12:06Z")
五月雨に失礼します。 > 2,ブログ記事の抜粋の箇所によくある続きを読むを追加したいです。spotlightでは抜粋の後に続きを読む、がデフォルトでないようなので、こちらの実現もどのようにすれば良いでしょうか？ こんなイメージでしょうか？ ![スクリーンショット 2024-12-25 11.07.46.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/e/ce7a3e72ab0a7f9cfd17fb10b80f1b9404fa4bed.png) snippets/article-card.liquidの93行目あたりに … という箇所があると思いますので、その中に例えば 続きを読む のように記述いただけると上のような表示となります。ご参考まで。 ![スクリーンショット 2024-12-25 11.11.06.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/9/99ed9701574cf41c539a82fcc5af42cad68a18ff.png) ---
**Author:** ![watanabe1](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@watanabe1](https://community.shopify.com/u/watanabe1)\ **Post date:** [December 25, 2024, 4:33am UTC](https://community.shopify.com/t/topic/382712/4 "2024-12-25T04:33:11Z")
ご返信ありがとうございました。 h2-h6までは記載の通りにしたところ問題なく反映されました、ありがとうございます！ ただなぜかh1のみ反応しませんでした。 .article-template\_\_content h1 { background: linear-gradient(transparent 70%, #BD8139 70%); } .article-template\_\_content h2 { …以下 h6まで ---
**Author:** ![watanabe1](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@watanabe1](https://community.shopify.com/u/watanabe1)\ **Post date:** [December 25, 2024, 4:33am UTC](https://community.shopify.com/t/topic/382712/5 "2024-12-25T04:33:51Z")
こちらもご返信ありがとうございました。 こちらは実現できました、ありがとうございます！ ---
**Author:** ![ROUTE06\_baba](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/route06_baba/32/106703_2.png) [@ROUTE06\_baba](https://community.shopify.com/u/ROUTE06_baba)\ **Post date:** [December 25, 2024, 7:04am UTC](https://community.shopify.com/t/topic/382712/6 "2024-12-25T07:04:50Z")
コメントありがとうございます！試してみました。 section-blog-post.cssに追記したコード ![スクリーンショット 2024-12-25 16.00.43.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/f/3f44131f5eb560c445d6a4d4a4f17d070e6a9c7b.png) 結果 ![スクリーンショット 2024-12-25 16.01.02.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/b/fb5e637d279af3de83d12d1e9ea161bd6c62be7f.png) こちらで試した限りだと、ご提示いただいた内容で反映されるようでした。 ほかのCSSが干渉していないかなど、ご確認いただくとよさそうです。 確認いただくにあたっては、一時的に background: linear-gradient(transparent 70%, #BD8139 70%) !important; のように、末尾に!importantを付与するなどしてみていただけるとよいかと思います。 ---
**Author:** ![watanabe1](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@watanabe1](https://community.shopify.com/u/watanabe1)\ **Post date:** [December 25, 2024, 11:44pm UTC](https://community.shopify.com/t/topic/382712/7 "2024-12-25T23:44:21Z")
再度、ご返信ありがとうございました、問題なく実現できました！ありがとうございました。