子ページのヘッダーメニューの表示について

[suzukiakiyo]

１つの親ページに複数の子ページを作成しました。
子ページのタイトル部分を空白にしてしまうと、ヘッダーメニューにカーソルをあてた時にメニューとして出てこなくなるのですが、出すには何か方法はあるのでしょうか？

指定したい画像の上では文字が見えにくいので、画像はそのままで本文の書きだし部分にタイトルとして表示させたいと思っています。
添付ファイルのようなイメージです。
よろしくお願いします。

Attachments:

You must be logged in to view attached files.

[うなこ]

タイトルを消してしまうと、メニューに表示されなくなるようですね

ちょっと要望と変わってしまうのですが…
CSSだけで、簡単にできる提案になります。。

【提案】ページヘッダー画像の上に薄い半透明の白色をのせて文字を見やすくする方法
※前頁のページヘッダーに薄い半透明がかかりますので、固定ページのみやりたい場合は
.page を先頭につけてみてください

.page-header{
position: relative;
}
.page-header::after {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
opacity: 0.5;
}
.page-header .container{
position: relative;
overflow: hidden;
z-index: 1000;
}

もうひとつの案は、タイトルのテキストの色を透明にするのも思いついたのですが、、
あまりよくない方法かもしれないと思い、こちらの提案をさせていただきました。

どうでしょうか、、？

• この返信は3年、 9ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[suzukiakiyo]

なるほど、ありがとうございます。
試してみました。

理想は、画像上に文字は表示させたくないのですが、やはりそれは難しいですか？

半透明でも良さそうですが、文字のインパクトがないので・・・
悩ましいところです。

[suzukiakiyo]

先ほどのcssを入れると、画像は半透明になりますが
ヘッダーメニューにカーソルをあてると子ページの表示がふわっと消えてしまいます。
一度、ホームに戻ってからカーソルをあてると消えずに表示されています。
何度も申し訳ありません。

[うなこ]

失礼しました　z-index: 1;に変更してみてください。

.page-header{
position: relative;
}
.page-header::after {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
opacity: 0.5;
}
.page-header .container{
position: relative;
overflow: hidden;
z-index: 1;
}

[うなこ]

理想は、画像上に文字は表示させたくないのですが、やはりそれは難しいですか？

CSSで簡単に消す方法としては、テキスト色を透明にすると見た目上では消えたように見えます。
しかしながらh1のタイトルを透明にしてしまうのはSEO的にどうなのかが分からず、
他のcssでの方法をご案内しました…。

h1.page-header_pageTitle {
    color: transparent;
}

• この返信は3年、 9ヶ月前にうなこが編集しました。

[suzukiakiyo]

ありがとうございます。

h1.page-header_pageTitle {
color: transparent;
}

こちらの方法で、本文にh1タグを入れれば良さそうですね。

[投稿者]

投稿