- このトピックには8件の返信、2人の参加者があり、最後に
により8年、 10ヶ月前に更新されました。
-
投稿
-
-
お世話になっております。
ヘッダー画像は重たくなるので、ヘッダーはなしで背景画像だけでデザインをしたいのですが
背景画像を挿入するとヘッダーに反映されないのですが
ヘッダーに反映させる方法はあるのでしょうか。
-
-
pagespeed/insightsで
表示可能コンテンツの優先順位を決定する
スクロールせずに見えるコンテンツをレンダリングするには、追加でネットワークのラウンド トリップが必要です。最適なパフォーマンスを得るには、スクロールせずに見えるコンテンツをレンダリングするのに必要な HTML の量を減らしてください。
というメッセージが出てきました。というエラーが出て直らないので
ヘッダーの画像をやめて、背景画像のみに変更したらエラーが出なくなりましたので、
上記の設定ができないかお聞きしました。
-
それでは逆に
ヘッダー画像に背景で使用した画像を使用すると、ご覧のように間延びします。
これを背景同様に繰り返しにして一本化する記述はありますでしょうか。
-
子テーマのスタイルシートに下記の CSS を指定します。
#header { background: transparent; }また、現在設定されているヘッダー画像は削除します。
さらに何かが原因で背景画像が読み込まれなかった時のことを考え、背景色を変更されることをおすすめします。
現在は背景色が #f4f4f4 になっていますが、この色では背景画像がないと白字のサイトタイトルがはっきりと見えません。
-
ヘッダー画像は重たくなるので、ヘッダーはなしで背景画像だけでデザインをしたいのですが
画像をアップロードする前にきれいなままで圧縮するようなことをされてますか？
例えば以下サイトで圧縮してキレイなままサイズを小さくするなどです。https://sikakunowa.com/wp-content/uploads/2017/10/woods.jpg
上記リンクは画像をアップロードしたサイズです。かなり小さいものなので、PCビューでみるとその倍以上のサイズで表示されるので画像が粗くなるかとおもいます。
わいひらんの寝ログで小さな画像を大きくしても画像が粗くならない方法。的なページを紹介されてました。詳しくはわすれてしまいましたが、その方法で画像を処理したものをアップロードして対応してみる。など試すと変わる可能性が高そうだと思われます。
-
ありがとうございました。解決いたしました。
画像はありとあらゆる方法で圧縮しましたが（上記からプラグインまで）
粗くなり難しいのが現状です。
そこまでヘッダー画像にこだわっていないので、少しずれていますが、これでいきます。
ありがとうございました。
-
https://sikakunowa.com/wp-content/uploads/2017/10/woods.jpg
画像はありとあらゆる方法で圧縮しましたが（上記からプラグインまで）
粗くなり難しいのが現状です。
元々の画像のサイズが小さいからではないですか？？
-
寝ログで小さな画像を大きくしても画像が粗くならない方法。的なページを紹介されてました。
今探し、発見したのでリンクを置いておきますね。
-
- このトピックに返信するにはログインが必要です。