TOPページ以外 または特定のカテゴリーページを ヘッダー画像なしで

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも TOPページ以外 または特定のカテゴリーページを ヘッダー画像なしで

  • このトピックには7件の返信、1人の参加者があり、最後にHidekichiにより9年、 10ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #46956
      慎太郎
      ゲスト

      お世話になります

      現在
      ヘッダーの高さを300に設定し画像とメニューを表示しています

      TOPページ以外
      または特定のカテゴリーページを
      ヘッダー画像なしでメニューだけにしたいと思います

      アドバイスいただけないでしょうか
      よろしくお願いいたします

    • #46957
      Hidekichi
      ゲスト
      #header {
        display: none;
      }
      
      .home #header {
        display: block;
      }
      
      .categoryid-(任意のカテゴリid) #header {
        display: block;
      }

      でどうでしょう?
      全部のページで#headerを非表示にしておいて、.homeの時だけ、あるいは必要なカテゴリの時だけ表示するという具合です。

    • #46959
      慎太郎
      ゲスト

      ありがとうございます

      ほー
      CSSだけでヘッダーが消えるんですね

      ヘッダーを消さずに
      高さを変えて
      画像なしのタイトルだけにも
      変更できますか?

    • #46960
      Hidekichi
      ゲスト

      できますよ。原理は同じです。
      どういう時に、どのようにするかが決まっていればできます。

      ヘッダーの画像の幅が、画面幅か記事幅かで、#h-topか#headerのいずれかに背景画像が入りますが、これを初期化すれば画像は消えますし、高さもその条件の時にいくつにするかで変更できます。

    • #46962
      慎太郎
      ゲスト

      是非、ご教示下さい

      <HOME>
      ヘッダーの画像は画面幅で高さ300PX
      <その他>
      画像なしで高さは100px

      よろしくお願いします
      m(_ _)m

    • #46963
      Hidekichi
      ゲスト
      #header {
        height: 100px;
        background: initial;
      }
      
      .home #header {
        background-image: url("IMAGE-PATH");
        height: 300px;
        background-repeat: repeat-x; /*C*/
        background-position: 0 0; /*A*/
        background-size: 100% auto; /*B*/
      }

      基本はこういう感じでしょうか。
      Cに関しては、画像が大きい場合で、リピートする必要がなければno-repeat。
      Aは、背景画像をどこ基準に表示させるかということで、ど真ん中なら 50% 50%。
      Bは、この場合、横100%で表示して縦は元の画像の縦横の比率のまま横100%へということですが、background-size: cover;を設定することで縦が足りないなら縦のサイズに拡大して横はみ出し。横が足りないなら横が合うようにして縦をはみ出し。ただしbackground-size: cover;はsafariでブラウザ側の問題で何かしら問題がが出る可能性もあります。一応どのブラウザもサポートはしてると思います。

      サンプルで高さを固定して横方向に伸びるように設定した時に、background-position: 0 0の場合、画像右側と下側が切れる可能性があります。
      background-position: 50% 50%の場合、画像センター基準で四方が少しずつ切れる可能性があります。背景画像のアスペクト比を保ったまま拡大縮小するためにはheightでサイズを固定してはダメなのです。

      でまぁ横サイズに対する縦サイズの可変の方法はまた別にして、どのような画像で、どの位置を基準に表示させるかは僕らはわかりませんので、そのあたりもよく考慮しながら画像の作成と位置の設定を微調整してください。

    • #46977
      慎太郎
      ゲスト

      ありがとうございます!!

      いろんなパターンで
      ヘッダーをアレンジしてみます

      url("IMAGE-PATH")
      そのままコピペでなく
      「IMAGE-PATH」に画像のアドレスを記入ですね

      カスタマイザーで設定した画像も削除

    • #47002
      Hidekichi
      ゲスト

      > 「IMAGE-PATH」に画像のアドレスを記入ですね

      そうですね。
      ただ試してないのでわかりませんが、カスタマイザーで画像を設定したとして、カスタマイザーの設定が子テーマで上書きされない場合はbackground-imageは書かなくてもよいかも知れません。#headerでbackground: initialとして初期化しているので書いておいた方が良いかとは思いますが。
      また、

      #header {
        height: 100px;
        background-image: none;
      }

      で背景画像の非表示がイケるなら、

      .home #header {
        background-image: url("IMAGE-PATH");
        height: 300px;
      }

      これだけでよいかも知れません。
      カスタマイザーの設定に頼らずとも、子テーマstyle.cssに直接追記するほうが柔軟に対応できると思います。
      カスタマイザーで画像を設定しない場合、記事幅のヘッダ背景設定にはbackground-repeatなどが書いてあったと思いますが、#headerには何も書いてなかったと思うので、

      #header {
        height: 100px;
      }
      .home #header {
        background-image: url("IMAGE-PATH");
        height: 300px;
        background-repeat: repeat-x;
        background-position: 0 0;
        background-size: 100% auto;
      }

      これで良いのかも知れませんね。

      カスタマイザーの設定が入ることでいくつかのプロパティが追記されることもあり、場合によってはそれらを打ち消すプロパティを書く必要が出てくる場合もありますので、そこらはデベロッパーツール等で確認しながら作業してください。

7件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)