質問: スティンガー5を使ってホームページを作成しています。 h2とh3のデザインを変更しようと思って、スタイルシートから既存の h2 { position: relative; background: #ee82ee; color:#0000ff; font-size: 20px; line-height: 30px; margin-bottom: 20px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } h2:after { content: ''; position: absolute; border-top: 10px solid #f3f3f3; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -10px; left: 50px; } h2:before { content: ''; position: absolute; border-top: 10px solid #f3f3f3; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -10px; left: 50px; } を消して h2 { font-size: 24px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 45px; border-left-width: 5px; border-left-style: solid; border-left-color: #2f4f4f; line-height: 30px; padding: 15px; width: 100%; margin-top: 20px; margin-right: 0px; margin-bottom: 40px; margin-left: -45px; background: #3cb371; color: #ffffff; } をコピペするだけではダメなのでしょうか? まったく変更ができません。 SCCの中にはh2の部分が2か所あるようですがどちらも書き換えればいいのでしょうか? 素人なのでこのような質問ですみません。
回答: こんにちは。 Stinger5 の h2 をカスタマイズする場合は、style.css を修正します。 修正する箇所は、 1)「/* 中見出し */」の h2 関連の記述 2)「/*media Queries PCサイズ —*/」の h2 関連の記述 です。 このうち、「h2:after」と「h2:before」は吹き出しのような装飾をしている記述ですので必要がなければ削除してください。 なお、今後の将来的に初期設定にもどす可能性がある場合には、下記のようにコメントアウトしておくのが無難です。 ``` /* 吹き出しの装飾(ここから) h2:after { content: ''; position: absolute; border-top: 10px solid #f3f3f3; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -10px; left: 30px; border-radius: 2px; } h2:before { content: ''; position: absolute; border-top: 10px solid #f3f3f3; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -10px; left: 30px; } 吹き出し装飾(ここまで) */ ``` いずれにしても、2カ所の記述を修正しなければスタイルの変更はできませんのでご注意ください。 以上、ご参考いただければ幸いです。