背景画像をヘッダーに反映させたい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 背景画像をヘッダーに反映させたい

このトピックには8件の返信が含まれ、2人の参加者がいます。1 ヶ月前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #56501 返信

    raopist

    お世話になっております。

    ヘッダー画像は重たくなるので、ヘッダーはなしで背景画像だけでデザインをしたいのですが

    背景画像を挿入するとヘッダーに反映されないのですが

    ヘッダーに反映させる方法はあるのでしょうか。

    https://sikakunowa.com/

  • #56510 返信
    わいひら
    わいひら
    キーマスター

    背景画像を挿入するとヘッダーに反映されないのですが

    背景画像は背景画像なので、ヘッダーには反映されません。
    背景画像にしろ、ヘッダー画像にしろ、画像を読み込むには、変わりはないので重さは変わらないと思います。
    どうして、ヘッダー画像だと重くなるのでしょうか?

  • #56511 返信

    raopist

    pagespeed/insightsで

    表示可能コンテンツの優先順位を決定する
    スクロールせずに見えるコンテンツをレンダリングするには、追加でネットワークのラウンド トリップが必要です。最適なパフォーマンスを得るには、スクロールせずに見えるコンテンツをレンダリングするのに必要な HTML の量を減らしてください。
    というメッセージが出てきました。

    というエラーが出て直らないので

    ヘッダーの画像をやめて、背景画像のみに変更したらエラーが出なくなりましたので、

    上記の設定ができないかお聞きしました。

  • #56513 返信

    raopist

    それでは逆に

    ヘッダー画像に背景で使用した画像を使用すると、ご覧のように間延びします。

    これを背景同様に繰り返しにして一本化する記述はありますでしょうか。

  • #56514 返信

    Akira

    子テーマのスタイルシートに下記の CSS を指定します。

    #header {
      background: transparent;
    }

    また、現在設定されているヘッダー画像は削除します。

    さらに何かが原因で背景画像が読み込まれなかった時のことを考え、背景色を変更されることをおすすめします。

    現在は背景色が #f4f4f4 になっていますが、この色では背景画像がないと白字のサイトタイトルがはっきりと見えません。

  • #56517 返信

    かうたっく

    ヘッダー画像は重たくなるので、ヘッダーはなしで背景画像だけでデザインをしたいのですが

    画像をアップロードする前にきれいなままで圧縮するようなことをされてますか?
    例えば以下サイトで圧縮してキレイなままサイズを小さくするなどです。

    https://tinypng.com

    https://sikakunowa.com/wp-content/uploads/2017/10/woods.jpg

    上記リンクは画像をアップロードしたサイズです。かなり小さいものなので、PCビューでみるとその倍以上のサイズで表示されるので画像が粗くなるかとおもいます。

    わいひらんの寝ログで小さな画像を大きくしても画像が粗くならない方法。的なページを紹介されてました。詳しくはわすれてしまいましたが、その方法で画像を処理したものをアップロードして対応してみる。など試すと変わる可能性が高そうだと思われます。

  • #56522 返信

    raopist

    ありがとうございました。解決いたしました。

    画像はありとあらゆる方法で圧縮しましたが(上記からプラグインまで)

    粗くなり難しいのが現状です。

    そこまでヘッダー画像にこだわっていないので、少しずれていますが、これでいきます。

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

  • #56526 返信

    かうたっく

    https://sikakunowa.com/wp-content/uploads/2017/10/woods.jpg

    画像はありとあらゆる方法で圧縮しましたが(上記からプラグインまで)

    粗くなり難しいのが現状です。

    元々の画像のサイズが小さいからではないですか??

  • #56527 返信

    かうたっく

    寝ログで小さな画像を大きくしても画像が粗くならない方法。的なページを紹介されてました。

    今探し、発見したのでリンクを置いておきますね。

    二次元画像を綺麗に拡大できる「waifu2x-caffe」の使い方とブログなどでの利用例|寝ログ

返信先: 背景画像をヘッダーに反映させたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)