タイトルを書いてるのにプレビューでは空白で表示される

Question

ワードプレス でHPをつくってます。投稿一覧にはタイトルが表示されてるのですが、いざ記事を開くとタイトルが表示されません、、空白になってしまいます。カスタムcss をいじったのでその時に間違えて重要なものを消してしまったのかもしれません。タイトルを表示させるようにするにはどうすればいいでしょうか？教えてくださると助かります。よろしくお願いします。
1月3日追加修正

aikon_marimo様CHERRY様
ご回答ありがとうございます。
自分のミスなのですが、誤って消してしまったコードがどんなものかわからない状況で途方に暮れています。。。
HPのURLは、
http://narutokujyoshidaisei.com/
です。記事を開いたあとにタイトルを表示させるCSSコード詳細がわかれば追加できるのかな？と試しておりますが、なかなかうまくいきません。今のCSSコードは、外観→追加CSSのところは、#main-contents h2 a{
text-decoration: none;
}、外観→simple custom CSSのところは、h1 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
title{
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}となってます。どこのCSSがどこに対応してるのかわからないので、２つとも載せさせていただきました。ご指摘頂けると幸いです。よろしくお願いします。

Comments

[aikon_marimo]

＞カスタムcss をいじったのでその時に間違えて重要なものを消してしまったのかもしれません。
⇒ 戻して試してみたらどうでしょう。

また、ソースコードも載せてください。

[CHERRY]

問題が発生した際にWebブラウザで表示されている html や CSS を質問に追記してください。

URLを公開しても差し障りがないようであれば、問題が確認できる URL でもOK です。

[yukitaro1]

aikon_marimo様CHERRY様
ご回答ありがとうございます。
自分のミスなのですが、誤って消してしまったコードがどんなものかわからない状況で途方に暮れています。。。
HPのURLは、
http://narutokujyoshidaisei.com/
です。記事を開いたあとにタイトルを表示させるCSSコード詳細がわかれば追加できるのかな？と試しておりますが、なかなかうまくいきません。今のCSSコードは、外観→追加CSSのところは、#main-contents h2 a{
text-decoration: none;
}、外観→simple custom CSSのところは、h1 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
title{
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}となってます。どこのCSSがどこに対応してるのかわからないので、２つとも載せさせていただきました。ご指摘頂けると幸いです。よろしくお願いします。

Answer 1

返信遅くなって申し訳ないです。
ソースコードの追記ありがとうございます。

タイトルが表示されない原因ですが、CSSで、タイトルを表示しているh1タグに、z-indexが負の値(-1)で設定されているためかと思います。

h1 {
・・・(略)・・・
z-index: -1;
}

z-indexは、HTMLの要素を重ねて表示した際に、z-indexの値が大きい要素ほど、上に表示する、といった設定になります。そのため、負の値(-1)を設定することで、他のタグより後ろに表示されており、結果として画面上、見えない状態になっています。

すべてのCSSを確認した訳ではないので、h1のz-indexの必要性まで見れてないですが、
とりあえずタイトルを表示するだけであれば、

①h1タグの「z-index: -1;」の記載を削除する
②もしくは、-1ではなく0以上の値を設定する

で表示は可能かと思います。

Comments

[yukitaro1]

できました！！！！本当にありがとうございます！ご丁寧に仕組みまで書いていただき感謝の気持ちでいっぱいです^ - ^

[aikon_marimo]

よかったです。HP作成がんばってください。

Answer 2

自分なりにネットで調べましたが、同じ事例はなく解決の仕方がわからず困っております。