サポート » 使い方全般 » ヘッダーの背景イメージをカラムの幅に連動させたい

  • 解決済 yazzu

    (@yazzu)


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

    以前、PCの画面の幅が4:3のPCにて、ヘッダーの背景画像をスタイルシートでいじったのですが、現在、より画面の幅が広いPCにてサイトを見てみたら、ヘッダー画像が中央カラムの幅よりかなり短い状態にあります。現在のスタイルシートは、
    /* Now to get background and stuff working */
    #header {
    /*background:url(images/header.jpg) no-repeat bottom center;*/
    }

    #page {
    background:url(images/bgl.jpg) repeat-y left top;
    background-color:#000033;
    border:none;
    margin:auto;
    padding:0;
    text-align:left;
    width:90%;
    min-width:770px;
    z-index:-1;

    となっておりますが、PCの画面の幅が変わっても、カラムの幅に連動していればこのような問題が解消されるのでは?と思いました。

    どのように書き換えればカラムの幅とヘッダー背景イメージを連動できるのでしょうか?

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • width:90%;
    min-width:770px;

    となっていることから、可変長なのですよね?

    ということは、ヘッダ画像 images/bgl.jpg より幅が広くなることもありえるわけですね。

    どういうデザインなのかわかりませんので、想像でしかものを言えませんが、たとえば、左側が背景色にとけ込むようなグラデーションにでもなっていないかぎり不可能です。
    img タグのようにwidthで幅を変えてやるわけにはいきませんので、背景画像より大きなサイズになることが許可されているデザインでしたら連動しません。
    x側にリピートさせられるなら別ですが。

    WordPress は関係ないです。htmlやcssの問題ですね。

    トピック投稿者 yazzu

    (@yazzu)

    お返事ありがとうございます。

    テーマはKhaki Traveler というテーマを使っておりますが、不可能なのですか。。。

    残念です

    ページと画像の間が開いて格好が悪いというなら、ページ幅を固定にすればいいですね。
    #pageのwidthを可変ではなくheaderの画像と同じサイズで固定してしまえば間が開いてしまうことはないでしょう。
    画像を可変は通常難しいです。それはkvexさんのおっしゃるとおりですね。

    <div id="page">
      <div id="header">
        <div id="header_inner">

    pageのbackgroundにbgl.jpg
    headerのbackgroundにheader.jpgの長い版
    header_innerのbackgroundにheader.jpg
    とかにすればって思ったけど、
    header.imgがCSSで背景・・・なんで長い画像をそもそも作っておかないの・・・

    あれ?コメントアウトしてるってことは、画像はCSS背景ではなくて直接張ってるのかな?
    もう現物見ないとなんとも判断できませんね。

    で、繰り返しますがいくらWordPressテーマを利用していても、もはやhtmlやCSSの問題です。
    そちらで検索すべき問題かと思います。解決策もいっぱい出てくるでしょう。

    トピック投稿者 yazzu

    (@yazzu)

    すみません。Htmlやcssの問題というのは、ここで質問すべきことではないのですか?

    その他の質問なのでしょうか?

    その他の質問とかそういう問題なのではなくて、数学のフォーラムで英語の質問をしているようなものです。数学の問題の中に英語の単語が出てきても数学のフォーラムで質問しないですよね?

    htmlやcssというのはwordpressを構成している1要素でしかなく、それはwordpressの開発者が開発したものではなく世界的に(web的に?)共通なものなので、wordpressのフォーラムで聞くものではなく自分で勉強するものですよ、ということですね。

    絶対聞いてはいけないというものではありませんが、今回の質問の場合、明らかにwordpress特有の問題なのではなく、web上でホームページを作るときに起こりうる初歩的な問題なのでこのような回答がついてしまっています。

    htmlやcssに関しては数多くの説明されたページが存在しますし、それに答えてくれる場所もあるでしょう。一度検索して勉強してみることをお勧めします。その上でwordpress特有の問題が発生した場合はあらためて聞いてみてはいかがでしょう?

    勝手にこれまでの回答の内容をまとめます。

    CSS2 の仕様では可変長の背景画像というのは仕様上実現不可能です。策定中の CSS3 では、背景画像のサイズを指定出来るようになるはずですが、今のところ一部のブラウザの先行実装で挙動の確認が出来るに留まっており、当たり前に使えるようになるには数年、下手をすると 10 年待たなければならないかもしれません。一方、背景画像ではなく、通常の画像を img 要素でヘッダ部分に挿入している場合や、 object 要素で Flash などを挿入している場合には、その width 属性を % 値で指定することで一応対応できます。ただし可変長というより単純な拡大縮小になるので、見た目に美しいとは言えない可能性が高いです。それが許せない場合、幅固定のデザインにすることも視野に入れる必要があります。

    という感じで、 HTML や CSS で単純に画像を可変長 (画像の単純な拡大縮小ではない) に、というのは 各画像の形式、 HTML, CSS いずれの仕様上でも基本的に不可能といえるのですが、画像によっては、いくつかのパーツに分割することで対応できたり、ヘッダの最小幅で見た場合を基準に、それ以上の幅になった場合にもそれなりに見えるような大きめの背景画像を用意することで対応できたり、 Flash を使ってみたり、いくつかの要素の組み合わせで対応できたりすることがあります。ただ使用される予定の画像のデザイン(?) にもよりますので、実際の画像を見てみないことには適切なアドバイスは (無理だ、と明言することも含めて) 難しいです。しかも画像の提示はこちらから強制することではないので、現物を見ないと何とも、、、という位の回答になってしまいます。

    そして以上のとおり、今回の場合は WordPress の仕様上可能かどうかではなく、 HTML および CSS の仕様上可能かどうかという質問にあたるので、 WordPress のフォーラムには、それについての良質な回答をは期待しない方がいいです。実際の画像を不特定多数に見せるのはためらわれる、あるいは契約上不可能な場合には尚更です。この点はあらかじめご了解ください。そこで、むしろ、それらの分野のエキスパートたちが集まる場所がきっとありますので、そういう場所を探して質問してみたほうが、解決する可能性は高いですよ、というのが、実際にこの場で出来る最善のアドバイスになります。

    トピック投稿者 yazzu

    (@yazzu)

    あ、どうもすみません。ヘッダー背景を背景色で設定していたと思っていたのですが、そのわりには、ページの幅が変わってもヘッダー背景が連動しないので、確かめてみると、ヘッダー背景には自分がつくった「画像」が使われていました。混乱させてしまいすみませんでした。

    HTML CSSについては、確かに自分でもっと勉強すべきですね。ありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ヘッダーの背景イメージをカラムの幅に連動させたい」には新たに返信することはできません。