VWSとは フォーラム Lightning 子ページのヘッダーメニューの表示について

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

  • このトピックには6件の返信、2人の参加者があり、最後にsuzukiakiyoにより1ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #43842

    suzukiakiyo
    参加者

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

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

    Attachments:
    You must be logged in to view attached files.
    #43850

    うなこ
    モデレーター

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

    ちょっと要望と変わってしまうのですが…
    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;
    }

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

    どうでしょうか、、?

    • この返信は1ヶ月前にうなこが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #43866

    suzukiakiyo
    参加者

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

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

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

    #43868

    suzukiakiyo
    参加者

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

    #43883

    うなこ
    モデレーター

    失礼しました 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;
    }
    #43884

    うなこ
    モデレーター

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

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

    h1.page-header_pageTitle {
        color: transparent;
    }
    • この返信は1ヶ月前にうなこが編集しました。
    #43896

    suzukiakiyo
    参加者

    ありがとうございます。

    h1.page-header_pageTitle {
    color: transparent;
    }

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。