ヘッダ画像に重ねてロゴを表示したい

By
  • このトピックには6件の返信、1人の参加者があり、最後にシェフにより3年、 2ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #15456
      このみ
      ゲスト

      こんばんは!いつもお世話になっております。

      以前から気になっていたのですが、ロゴ画像とヘッダ画像の療法を設定した場合、ヘッダ画像が表示され、ロゴ画像が表示されない仕様…なのですよね?

      ヘッダ画像はヘッダ画像で変更しやすくするためロゴは入れず、ロゴ画像を透過pngでヘッダ画像に重ねて表示出来たらなぁと思うのですが、そのような表示にするにはどのようにすれば良いのでしょうか…?

      CSSで画像のポジションを設定するのはわかるのですが、ヘッダ画像とロゴ画像が同時に表示されないため、CSSで設定するだけではだめなのだろうと思いまして…。

      現在は苦肉の策で、ウィジェットの「ヘッダ」に画像を設定し、本来のヘッダ画像は指定せずロゴ画像だけを表示しているのですが、そうするとヘッダ部のスペースが大きくなってしまって、あまりよろしくはないなと思っているのです。

      なにか良い設定方法がありましたら、ご教授いただけますと幸いです。

      よろしくお願いいたします。

    • #15461
      シェフ
      キーマスター

      おはようございます!
      実はこれ、ちょっと前に実装しようか迷ってたんですよね(笑)
      結局どうするのがベストかわからずに放置していたんですが…汗
      せっかくなのでお聞きしたいんですが、どうすれば使いやすいですか?
      ヘッダーにbackground-imageを指定して(ヘッダー背景画像)、ロゴ(サイトタイトル)をセンターに表示、ロゴ(サイトタイトル)に余白を持たせる…というのがよくある構成なので一番良いのかなとは思っています。
      追記:普通にヘッダーに背景画像を表示させる機能を実装するのがベストな気がするのでその方向で進めてみます。次回アップデートと同じくらいのタイミングで関連記事も書きますね

    • #15520
      シェフ
      キーマスター

      先程、ヘッダー背景画像を表示できる最新バージョンを公開しました。
      すべてテーマカスタマイザーで設定できるはずなので、ロゴ画像もしくはヘッダー画像と組み合わせて使ってみてください。
      関連記事→ヘッダー画像・ロゴ画像・ヘッダー背景画像の表示方法

    • #15523
      このみ
      ゲスト

      こんばんは!

      わぁ、早速の実装、ありがとうございます!

      今、ヘッダ背景とロゴの設定を調整をみたところですが、普通にロゴ画像と背景画像をセットするだけだと、背景画像の高さがあまりなくて、細長いヘッダになるので、写真やイラストをヘッダ(背景)画像にしたい人には、ちょっと寂しいかなと思いました。
      元々そういう仕様なのか、それとも私がロゴ画像をcssでデフォルト値より大きめに表示されるように設定しているせいなのかはわからないのですが…。
      で、cssで無理やり(笑)ヘッダのheightを広くしてみたら、良い感じになりました!
      ロゴ画像の表示位置ですが、左寄りにしてくださったのが嬉しいです。

      いつもながら、迅速なご対応ありがとうございます!

      • #15524
        シェフ
        キーマスター

        こんにちは!
        高さは中の要素の分(画像の高さ、サイトタイトル)になるので、背景画像が大きい場合は、ロゴ画像ではなく「ヘッダー画像」を使うのがベストです。
        そういった使い方を想定しており、ヘッダー画像を透過(png)にして余白をコントロールすれば綺麗に表示できるかと思います。
        例えば、「公園で遊んでいる子ども」のイラストを表示したい場合は、png形式の子どものイラストをヘッダー画像に、公園のイラストを背景画像に表示すると…いった感じです。
        次点で、CSSで高さや余白をヘッダーもしくは中の要素に指定する方法です。
        ただ、隣にアイコン(検索、スライドメニュー)を表示したかったり、PCの時にナビゲーションメニューと横並びに表示したかったり、ロゴ画像を使いたいケースがあれば、今後のアップデートで高さを入力する項目を用意してみようかと思っていますが、あったら便利でしょうか?
        ちなみに、ロゴ画像の左寄せに関しては、サイトタイトルと同じテーマカスタマイザーでの設定値が適用されているからです:)

    • #15529
      このみ
      ゲスト

      こんばんは!

      ロゴ画像は透過Pngなのですが、大きいと言ってもヘッダ画像にするほどは大きくなく、ヘッダ画像に重ねて表示したいと思う程度の大きさなので、なかなか難しいですね。
      サイズ的にメニューと並べて表示して丁度良い感じです。
      ロゴ画像は4536のでデフォルト値だとちょっと私のところでは小さいので、CSSで調整してるという感じですね…。
      ヘッダ背景の設定ができるようにしていただけたおかげで、表示させたかった状態を実現できるようになりましたので、本当に感謝感謝です!

      ロゴの余白値の設定ができるようになるもいいですね!
      でも個人的にはヘッダ部分の高さ要素を指定できるようになるといいなと思います。
      ただ、そのような使い方をしたい方がどれほどいらっしゃるのか…というのが気になるところではありますねー。

      あ、ロゴの表示位置の件は、書き込みしてから気が付きました(笑)ロゴとメニューを表示しているので、その関係で左寄せになったんですね!

      • #15532
        シェフ
        キーマスター

        こんばんは!
        なるほど、参考になりました!
        こちらでも色々試してみたんですが、高さがあってもいいかなと思ったので次回アップデートで実装してみます!
        こちらのトピックに関しては解決済みになるかと思うので一旦クローズしますが、また何かあればご相談ください:)

4件の返信スレッドを表示中
  • トピック「ヘッダ画像に重ねてロゴを表示したい」には新しい返信をつけることはできません。