ヘッダー画像とタイトルを重ねない方法

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など ヘッダー画像とタイトルを重ねない方法

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

      いつもお世話になっています。

      初歩的な質問かもしれませんが、もしご教授頂ければ幸いです。

      ヘッダー画像を設定すると、タイトルと重なる仕様になっていますが、これを重ならないようにするにはどうすれば良いでしょうか?
      タイトルがあって、その下にヘッダー画像がくるという形です。
      ネットでいろいろ調べたのですが、タイトルと画像を重ねる記述法はいろいろと紹介されていながらも、タイトルと画像を重ねない例は見つけられず・・。もともと重なっていないテンプレートの記述を参考にすれば良いかなと思いながらも、結局どの部分がその記述かがわからず・・・。

      初歩的な質問ですみません。もし教えて頂ければ幸いです!

    • #33066
      Hidekichi
      ゲスト

      従来のSimplicityでは#headの背景として画像が読み込まれているため、タイトルはおのずとその前面に重なります。これを回避するためには、色々方法がありますが、最も簡単なのは#header-inの閉じタグ手前に新たなブロックを用意してそこに画像を入れることです。

      まず構造を書きます。

      [#header]
        [#header-in]
          [#h-top]
           [#mobile-menu]
           [.alignleft]
            [#site-title][/#site-title]
            [#site-discription][/#site-discription]
           [/.alignleft]
           [.alignright]
            [SNS関係][/SNS関係]
           [/.alignright]
          [/#h-top]
        [/#header-in]
      [/#header]

      はいもうわけわかんない(笑)
      上記は文字化け(コード化)するのとIDやclassを書くのがdivなんちゃらと面倒くさかったので、いきなりセレクタで書いてますが、こんな感じです。スペルミスがあるかも知れませんが気にしないように。
      おそらく僕の記憶では、#headerに画像が入るはずです。なので、その中にある要素はすべて画像の手前に表示されるわけです。

      解決方法としては、トップに画像を使わないようにして、文字やらSNSの下部になる所に新たにブロック(divなりのタグ)を挿入し、そこに対して画像を入れるべきです。

      実際にやると、#header.phpやらに直接書いても良いのですが、例えばjQueryで

      (function($){
        $(function(){
          $("#header").append("<div class='topImage' />);
        });
      })(jQuery);

      こうして、#headerの最後尾に.topImageと言うブロックを挿入します。
      次に、cssで

      .topImage {
        background-image: url("画像のパス");
        height: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 0 0 56.25%;
        display: block;
        width: 100%;
      }

      こうしておくと、親(#header)の幅に対して16:9の画像が表示されます。センタリングされているので、元の画像が16:9でなくても引き伸ばして、上下をカットしたりして16:9になります。
      16:9はpaddingの部分でやってます。56.25%が横100%に対しての比率になります。縦のサイズはこの部分で自動計算(100 : padding-bottom% = 16:9で算出)になるのでもっと狭くしたいと言う場合は、56.25%を小さくしていけば良いことになります。20%とか。

      これらのことから、どんなブラウザでも横幅に対する縦の%で16:9にできますから、レスポンシブに拡大縮小ができるようになります。
      もし仮に画像で表示したい部分が上の方にあったり、下の方にあった場合は、
      background-position: center center;をイジることになります。top centerでも良いですし、%で、0 50%とか、10% 30%とかと色々と調整することで目的の画像内の表示したい部分を中央付近に持って行くことができます。

      もし、スマホなどでやっぱり画像はいらないなぁと思ったら、メディアクエリなどを用いて.topImage {display:none;}にして非表示にすればよいですし色々といじくることができます。

      前にどこかのトピックでも書きましたが、画面の幅によって画像下部から次第に画像上部が表示されるようにすれば、ちょっと面白いギミックを施すことも可能です。
      また、#header .topImageに transition: .3s ease;などを入れることによって、画面幅の変化に合わせてアニメーションするようにもなります。入れなくてもスムーズに変化するはずですが、何かしらの手を加える時などにお手軽に変化途中のアニメーションを入れられるので便利です。

    • #33067
      Hidekichi
      ゲスト
    • #33068
      Hidekichi
      ゲスト

      連投に次ぐ連投

      サンプル: 縦の比率を20%にしたもの | jsFiddle

    • #33071
      John
      ゲスト

      Hidekichiさん、大変詳しいレスをありがとうございます!

      早速試みてみたのですが、私のような初心者には、思っていたより難易度の高いカスタマイズでした。。特に、jQueryの使い方がまだよく分かっていないので・・。

      これは、もう少しそのあたりを勉強してから取り組まないといけないなと思いました。
      ということで、今すぐ反映できたわけではありませんが、教えて頂いた内容を実現できるよう、時間をかけていじっていこうと思います!

      ありがとうございました!

    • #33077
      アバター画像わいひら
      キーマスター

      CSSだけで無理やり見た目をそのようにするなら以下のような方法もあります。(数字は適当)

      #h-top {
          margin-top: 100px;
          overflow: visible;
      }
      
      #header .alignleft {
          margin-top: -90px;
      }

      もしかしたらモバイル用に、mobile.cssで、再びCSSを再調整する必要はあるかもしれません。

    • #33084
      Hidekichi
      ゲスト

      サンプルにある(function($){から}(jQuery);までまるっぽ、子テーマjavascript.jsに入れます。
      Simplicity公式の#headerまるごとと、style.css読み込んでいるので、これまでに特にサイトに手を入れていないなら、丸ごとコピペでいけるはずです。

      cssはscssで書いてますが、

      #header .topImage{
        //中身は同じ
      }

      こういうことです。子テーマstyle.cssに追記します。.topImageはそもそもオリジナルにはない要素なのでどこともかぶらないため.topImageだけ追加しても良いですが、#header .topImageとして追記するのが良いだろうと思います。

      まぁbsckground-image: url();をまるまるコピペすると、サンプルと同じ画像が表示されますけどね(笑)
      urlの中身は、普通にクォートで囲んだ画像へのパスです。
      後は、どこにアップロードされているかを、メディアメニューとか該当の画像をクリックするとパスやら色々と出てくると思うので、そこから調べてそのアドレスをbackground-imageのurl()の中に入れるだけです。

      表示させる画像は、できるだけ横長の画像が好ましいです。16:9(デフォルト設定)で標示されるとは言え、横が短いと拡大されることになりますから、予め横長にしておくとベストです。特に決まったサイズはありませんが、横780pxぐらいのものがよいですかね。
      縦は横より短ければ何でも良いです(笑)
      大きすぎるとスマホで表示するのに時間がかかりますし、スマホに合わせて小さくするとPCで画像が荒くなります。

    • #33086
      Hidekichi
      ゲスト

      ☓ bsckground-image
      ◯ background-image

      △ 16:9(デフォルト設定)で標示されるとは言え
      ◯ 16:9(デフォルト設定)で自動で標示されるとは言え

      △ メディアメニューとか該当の画像
      ◯ メディアメニューとか該当の画像

      pngならtinypng、jpegならtinyjpgあたりで、optimizeしたり、プラグインでoptimizeしてなるべく画像容量を小さく最適化しておくのが良いでしょう。

    • #33090
      John
      ゲスト

      Hidekichiさん、わいひらさん、詳細なサポートありがとうございます!!

      事の発端は全て私のド素人ぶりからです。。

      しかし、とにかく教えてくださったことを全てやってみました。

      まず、わいひらさんが教えてくださったやり方ですが、数値もいろいろいじりながらやってみたものの、たしかにヘッダー画像の上に余白が生まれるようにはなったのですが、依然としてタイトルはヘッダー画像の上、つまりタイトルとヘッダー画像が一緒に動いてしまう結果となりました。自分のやり方が間違っていたのかもしれませんが、教えてくださった記述を子テーマのCSSにそのままコピーしましたので、他に何を間違ってしまったのか自分にはこれ以上わかりませんでした。
      そこで、次にHidekichiさんの方法を試してみました。

      教えてくださったおかげでjQueryの使い方がわかったので、いけるかな!と思ったのですが、なぜか全く変化が起こらず。。。しかしいくつか工程をふむ作業なので、自分がどこかで間違っていたのだと思います・・。
      ちなみに以下のようにやりました。
      FTPソフトから、直接子テーマのjavascript.jsに、
      (function($){
      $(function(){
      $(“#header”).append(“<div class=’topImage’ />”);
      });
      })(jQuery);
      をコピー。(WordPress上の子テーマ編集画面では、javascript.jsがなかったため直接FTPソフトから行いました。)
      次に、WordPress上の子テーマ編集画面のCSSに、
      #header {
      .topImage {
      background-image: url(“任意の画像URLをコピペしました”);
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      height: 0;
      padding: 0 0 56.25%;
      display: block;

      }
      }
      を入力しました。

      このやり方で合っていますか?
      もしやり方は合っていたとしたら、何らかの別の原因ということですよね。そうだとすると、特定するのはかなり時間を要しそうなので、このカスタマイズはひとまずあきらめようかと思います。
      最後の手段として、ヘッダー画像に意図的にアルファチャンネルで透明部分を作って、そこにうまくサイトタイトルが表示されるようにしようかな、なんてことも企んでいますが、レスポンシブ表示の際にずれたりするかもしれないので、ひとまずやめておきます^^

      (ちなみに、WordPressではjQueryはそのまま記述してもうまく反映されないという記事を読みました。このことは関係していますか?)

      いずれにしてもHidekichiさんわいひらさん、本当に親身なご対応ありがとうございます!!

    • #33091
      Hidekichi
      ゲスト

      cssの部分が違います。

      僕がサンプルで書いていたのはscssと言うやつで、凄いcssなのですが、これはcssに変換(コンパイル)しないと動作しません。#33084の解説のとおりです。

      答え的には、

      #header .topImage {
        background-image: url(“任意の画像URLをコピペしました”);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 0;
        padding: 0 0 56.25%;
        display: block;
      }

      こういう感じです。

      >(ちなみに、WordPressではjQueryはそのまま記述しても
      >うまく反映されないという記事を読みました。
      >このことは関係していますか?)

      wordpressでjQueryが正しく動かないのは、jQueryでも$を使い、javascriptのプロトタイプと言うものでも$を使うため、コンフリクト(競合)が起こるのが原因です。しかし、僕の書き方の場合は、

      (function($){
        //jQuery本来の処理
      })(jQuery);

      とjQueryで$を使う範囲を制限しているため競合は起こりません。

      元々cssでheightを0にしているため、表示自体は無いのです。しかしpaddingで高さを確保しているため表示されるという矛盾にも似た方法なので、cssの表記が間違っているだけで読み込めないだけかと思います。

    • #33094
      John
      ゲスト

      Hidekichiさん
      本当にとことん教えてくださってありがとうございます。
      やはり、私のやり方が間違っていましたね。すみません気づけませんでした・・・。

      それで、教えてくださった記述をコピペしたところ、たしかに画像分の余白がタイトルの下に生まれました!しかし、そこに画像が表示されず、なにもないままスペースが生まれるだけ、という状態になっております。
      画像のパスは、メディアライブラリから画像URLをコピペしたので(Hidekichiさんがサンプルで入力しておられた画像URLと同じ構造)、間違いはないと思うのですが、なにが原因でしょうか。
      もし、この原因を探るのが大変な作業になるのであれば、お手間をおかけするわけにはいきませんので、あきらめることにします。

      ありがとうございます!

      (jQueryの件よくわかりました。今回ついでにjQueryのことも勉強させてもらえて大変ありがたいです!)

    • #33097
      Hidekichi
      ゲスト

      うーむ、スペースが表示できて画像がないということは、画像の指定の仕方が問題なんだろうと思うんですけれども、

      background-image: url(“…IMG_PATH…”);

      の…IMG_PATH…の部分は、メディアライブラリからコピペされたと言うことで間違いないとすれば、それを囲んでいるクォート(ダブルでもシングルでもとにかく同じクォートで)が全角とかそういうことはないですか?あるいはクォートを入れてないとか。
      Shift+2あるいはshift+7のクォートいずれかの同じもので囲みます。

      それとおそらく今回は間違っておられないと思うんですが、#headerと.topImageの間は半角スペースです。
      #headerの中にある.topImageと言うクラスを指定しています。案外最初の.(ピリオド)がなかったり、半角スペースが全角にとかはあったりします。

      一応機能として正しく動作しているかは、サンプルのfiddle右上のcssで.topImageの中身を丸々コピペしてみるのも方法かと思います。キーボードから入力している場合は何かしらが間違っていても気が付かなかったりしますので。コピペした上で、画像のアドレスだけ変更とかですかね。

      まぁサイトのアドレスを公開してもらえれば、見てすぐわかる部分かと思うんですけれども…。

    • #33101
      アバター画像わいひら
      キーマスター

      バージョン、ヘッダーの設定により書き方も変わってくるかもしれないので、これでもうまくいかない場合は、実際のページのURLを提示していただいて良いですか?

      #h-top {
          margin-top: 100px;
          overflow: visible;
      }
      
      #header .alignleft {
          margin-top: -90px;
          position: absolute;
      }
    • #33104
      John
      ゲスト

      Hidekichiさん

      できました!!!
      原因は、ご指摘の通り、クォートが全角になっていたことでした。お手数おかけしてすみませんでした。
      なにはともあれ、カスタマイズが実現してとても感動しております!

      ちなみに、最後にですが、画像を画面幅いっぱいではなくて、Simplicityのデフォルト設定と同じように、グロバルメニューの横幅にぴったり合うようにしようかと思いました。これを実現するにはどういった記述をすれば良いでしょうか?
      かなり、いろいろといじってみたのですが、どうしてもグローバルメニュー以下とぴったり合う幅にすることができませんでした。

      1から100まで聞いてすみません!

    • #33107
      John
      ゲスト

      わいひらさん
      新たに教えてくださった記述を入力したところ、できました!!
      これで、Hidekichiさんとわいひらさんの方法が両方ともうまくいきました。
      わいひらさんは、jQueryの使い方がわからない私に、無理やりCSSだけでやる方法を教えてくださったことと思いますが、こうなると、最終的にどちらの方法でやらせて頂くのがいろんな意味でベターなのでしょうか?

      それにしてもお2人とも、本当に最後まで細かく対応してくださってありがとうございます!!!

    • #33109
      アバター画像わいひら
      キーマスター

      どちらの方法でも良いと思いますよ。
      お好きな方をご利用ください。

    • #33110
      Hidekichi
      ゲスト

      >グロバルメニューの横幅にぴったり合うようにしようかと思いました

      今回のレスポンシブな画像の配置は、基本、入れたもの(.topImage)の親要素(#header)の横幅いっぱいに広がるようになっています。
      なので、直す所は2点

      jqueryは
      $(“#header”)の部分を → $(“#header-in”)

      cssは
      #headerの部分を → #header-in

      これだけです。
      スマホ、タブレットの時、#header-inがどうなってたっけ?とちょっと危惧してますが、おそらく100%だったと思うので、これでイケるんじゃなかろうかと思います。

      最悪、親要素を作れば良いので、
      $(“#header .topImage”).wrap(“<div class=’tiWrapper’ />);
      とjQueryのappendの書いてある行の後に1行追記すれば、.topImageを囲むブロックを作れます。構造的には、

      [#header]
        //諸々とあって
        [.tiWrapper]
          [.topImage][/.topImage]
        [/.tiWrapper]
      [/#header]

      こうなります。

      親要素(.tiWrapper)を作った場合、.topImageはその親要素の中身(子要素)となるので、

      #header .tiWrapper {
        width: 1070px; //←数値はグローバルメニューの幅に合わせる。あるいは任意のサイズ。
        margin: 0 auto; //画面横中央に.tiWrapperを寄せる。0は上下マージン
      }
      #header .tiWrapper .topImage{
        //中身は.topImageと同じ
      }

      こうすれば、.topImageの親になる.tiWrapperの幅に合います。
      まぁ別に.topImageが1つだけなら、#header .topImageでいいんですけどね。いくつも画像を配置したい場合は、.topImageは使いまわせるので細かく指定しておく方が別途プロパティを指定できるという意味合いでベターかと。

      注意すべきは、画面の幅が変わっても.tiWrapper(作った親要素)は同じサイズをキープしてしまう所です。なので、メディアクエリでそれぞれの画面幅に対する.tiWrapperのサイズを指定しないといけません。
      おそらくタブレットとスマホの時に100%になってればよいかと思うので、

      @media screen (max-width: 1069px){
        .tiWrapper {
          width: 100%;
        }
      }

      こう追記しておけば、1070px以上の時は1070pxに固定・センタリングもして、それ以下のサイズの時は画面サイズいっぱいに広がるかと思います。

      僕が想像するに(←実際に試してないのであくまで想像ですが)、おそらくは、jquery・css共に#headerの部分を#header-inに変更するだけでイケると思いますが、念の為wrapを使って親要素を作る方法も書いておきました。

    • #33111
      Hidekichi
      ゲスト

      色々と別のことをしながらだったので改めて思うと、あと2つ追加したほうが良いかも知れないと思いましたので書いておきます。

      .topImage {
        background-image: url(“任意の画像URLをコピペしました”);
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 0;
        padding: 0 0 56.25%;
        display: block;
        overflow: hidden;  /*追加*/
        position: relative; /*追加*/
      }

      おそらく他の要素の加減で変化する部分なので、現状では問題がない場合もあるかと思うんですが、例えばこれらの方法を利用して、トップページのサムネイルリスト(デフォルトの記事リスト)の中のサムネイルなどに16:9の画像を入れたいと思った場合、他の要素がfloatしていたりabsoluteである事もあるかと思うので、overflowとposition:relativeを入れておく方が良いかなぁと思った次第です。

      リストアイテム等のサムネイルを16:9にするには、若干jQueryが複雑になりますが、Simplicityを少し改造してみた 番外編 part13 画像のアスペクト比を16:9にする & その他を参考までに。

    • #33113
      John
      ゲスト

      Hidekichiさん
      なるほど・・。わかりました!ありがとうございます!
      とりあえず、header-inで様子を見ようと思います。
      本当に、ど素人に親身になってご対応くださり、ありがとうございました!!
      お陰様で、CSSやjQueryの勉強に繋がります。

      これからもSimplicityを使わせて頂きますので、よろしくお願い致します。

      わいひらさん、ありがとうございました!

18件の返信スレッドを表示中
  • トピック「ヘッダー画像とタイトルを重ねない方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)