サポート » 使い方全般 » ヘッダー画像の幅をスマホの幅に合わせたい・・・

  • タイトル文とヘッダー画像を重ねて表示させたくてhttp://wpcos.com/?p=7224を参考に作成したのですが、ヘッダー画像のせいでスマホを縦画面で見ると画像が横に広がり過ぎてしまい、またスマホを横画面にするとヘッダー画像の右側が表示されなくなります。
    ヘッダー画像の幅をスマホの画面の幅に合わせたいのですが、どうやったらできるのですか?

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • CG

    (@du-bist-der-lenz)

    テーマがヘッダー画像で推奨しているサイズより大きい画像を用意すると、まずは良いところでしょう。
    ただし、iPad、iPhoneでは一部だけが拡大されてしまうこともあります。

    スレッド開始 damian5129

    (@damian5129)

    どうすればヘッダー画像をスマホの幅に合わせられますか?

    CG

    (@du-bist-der-lenz)

    参考にされているページ先の説明では、カスタムヘッダーを背景画像としているからだと思います。
    サイトタイトルとヘッダー画像を重ねて表示させる課題については、relativeで出来ました。

    スレッド開始 damian5129

    (@damian5129)

    コードではどうやって書くのですか?

    CG

    (@du-bist-der-lenz)

    コードではなく、スタイルシートで出来ました。

    スレッド開始 damian5129

    (@damian5129)

    スタイルシートではどうやって書くのですか?

    CG

    (@du-bist-der-lenz)

    わたしは『ヘッダー画像』、『サイトタイトルと説明』、『ナビゲーション』の順番に入れ替えているのでポジションrelativeで、パッディング値で調整しました。

    スレッド開始 damian5129

    (@damian5129)

    そのrelativeは何処に入れればいいのですか?

    CG

    (@du-bist-der-lenz)

    「タイトル文とヘッダー画像を重ねて表示させたくて」という点で、タイトルのID,classに入れています。

    position: relative;
     top: (任意);
     left: (任意);
     margin: (任意);
     padding: (任意);
    

    ただし、「ヘッダー画像の幅をスマホの幅に合わせたい」のトピックからは離れるんじゃないですか。「ヘッダー画像のせいでスマホを縦画面で見ると画像が横に広がり過ぎてしまい、またスマホを横画面にするとヘッダー画像の右側が表示されなくなります。」ということで、ヘッダー画像自体を見直すのが良いでしょう。

    スレッド開始 damian5129

    (@damian5129)

    ヘッダー画像を小さくするのですか?
    縮尺変更でヘッダー画像のサイズを変更しています。また、今のヘッダー画像でもナビゲーションメニューの幅より若干短いのですが・・・

    CG

    (@du-bist-der-lenz)

    堂々巡りですが、タイトル文とヘッダー画像を重ねて表示させたくて http://wpcos.com/?p=7224 を参考に作成されたのですから、しかし通常PCサイトで使用する「background-attachment:fix」は、そもそもmobile safariが対応していない。そこで「background-size:cover」は、ウインドウサイズに合わせて背景画像を伸縮してくれます。しかも、これ自体はmobile safariも対応しているのですが、「background-attachment:fix」と「background-size:cover」は、併用できません。その理由としては、ios7まではviewportの設定にminimal-uiがありました。しかし、ios8以降、minimal-uiがサポートされなくなりました。iphone6は画面が大きいから、ツールバー等を隠す必要がないという判断かもしれません。ざっくりそういうところはご存知でしょう。

    ヘッダー画像で推奨している画像サイズで用意すれば一番ベストです。「ナビゲーションメニューの幅より若干短い」ことになるのは作成されたテーマの仕様ではないですか。
    スマホ対応に縮尺変更した画像を、アドレスを間違ってませんか。メディアに画像を登録すると、たいてい4種類以上の画像ファイルが生成されると思います。それに、現在のテーマにする以前に使ったテーマで画像を登録している場合は、その時のサイズの画像が残っていて現在のテーマに合わないものです。

    繰り返しますが、わたしはテーマのヘッダー画像で登録しただけ。ヘッダー画像の下にサイトタイトル、ナビゲーションが並ぶ配置にしただけなので、position: relative;を追加したスタイルシートで出来ました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「ヘッダー画像の幅をスマホの幅に合わせたい・・・」には新たに返信することはできません。