DAWNテーマを使用し、カスタマイズを行っています。
特集コレクションのタイトルはカスタムCSSで
h2｛text-align: center;｝にすることにより中央寄せにできたのですが
ブログ記事のタイトル（※画像赤枠部分）は
h2、.blog__titleなどを指定しても中央寄せになりません。
解決策をご教示いただけますでしょうか。
よろしくお願いいたします。
Topic summary
-
問題: DAWNテーマでブログ記事タイトルを中央寄せにしたい。特集コレクションでは h2 {text-align:center;} が効くが、ブログ記事タイトルには効かない。
-
原因: 親要素 .title-wrapper-with-link に display:flex が設定され、text-align が作用しないため。
-
対処: .title-wrapper-with-link を display:block に上書きすると中央寄せ可能。
-
注意点: display:flex はモバイルで「ブログ記事のタイトル」と「すべてを表示」を横並びにする目的があるため、単純な上書きはモバイル表示を崩す。
-
推奨設定: メディアクエリ（min-width: 990px）内でのみ .title-wrapper-with-link を display:block にし、デスクトップで中央寄せ、モバイルは既存の横並びを維持。
-
状況: 具体的なCSS方針が提示されたが、適用後の報告は未確認。画像は対象箇所の参考として添付。
h2｛text-align: center;｝が効かないのは、親要素の.title-wrapper-with-linkにdisplay:flexが適用されているためです。
カスタムCSSでdisplayを上書きすると、中央寄せできるようになります。
.title-wrapper-with-link {
display: block;
}
ただし、このままですとモバイルでの表示が崩れます。
display:flexは、モバイル表示で「ブログ記事のタイトル」と「すべてを表示する」を横並びにするために設定されています。
気になる場合は、以下のようにmin-widthを設定すると良いかと思います。
@media screen and (min-width: 990px) {
.title-wrapper-with-link {
display: block;
}
}