fotodeo

fotodeo

写真好き、DIY好き、趣味から繋がる大好き

/nao120i

営業時間 : 10:00 ~ 19:00
MAIL : info@fotodeo.com

写真好き、DIY好き、趣味から繋がる大好き

/nao120i

営業時間 : 10:00 ~ 19:00
MAIL : info@fotodeo.com

TOP背景 仕事場

/nao120i

営業時間 : 10:00 ~ 19:00
MAIL : info@fotodeo.com

写真好き、DIY好き、趣味から繋がる大好き

レスポンシブにならない

categorys:BLOG | WP

   Tag: |

投稿ページに挿入で画像を入れると、幅はレスポンシブになっているようだけど、高さが元のサイズから変わらない。どうゆう事か分からなかったのでいろいろやってみた。

試しにギャラリーを差し込んでみると問題なく表示されている。

あと写真投稿用のページは問題がない。ここに問題が出ていないのは挿入画像ではなく、サムネイルを大きい画像で出しているからのようだ。

そして画像を左寄せなどにすると勝手に右側に文字が巻き込むようになる・・・( ˘•ω•˘ )

今はこの問題よりも画像なのでまたそのうち何とかするようにしようと思う。
さらに、今どうしたら下に文字を書けるようにするか分からないので何かしら書いて尺を稼ごうとしているw

このまま巻き込み投稿になればスマホから見ると文字が非常に見えにくいはずだから本題の方に戻る為にこの巻き込みから逃れようとひたすら書いていたのでした・・・

もう大丈夫かな?

そして本題、記事ごとにサイズ指定してみてはどうか?
ということで投稿ページの下の方にあるカスタムCSSの部分に下記のコードを入れてみた。

img{
  max-width:100%;
  height:auto;
}

問題はあっさり解決(๑•̀ㅂ•́)و✧

色々調べてみたらWord Pressが最近Verアップして挿入画像に対してwidthとheightを書き込んでしまってそれが悪さをしていた原因のようだった。
なのでheightをコード表記にして消してやれば解決するのだけれど、ブロックが狂っているとエラーを出すので問題は無いけど編集する時面倒なので上記コードを入れた方が早いのかなぁ・・・

 

嫌それも面倒でしょ!って事なので、自動でwidth/heightを入らなくしてやります!
※弊害も出ます!loading=”lazy”も無くなるという事です。

WP5.0になり、画像遅延ロードさせる事が出来るようになったこのコードはwidth/heightと一緒に着きます。そしてwidth/heightが無いと使用できません。仕様では後でロードするために幅と高さのエリアを確保しておかないといけない為だそうですΣ( ̄口 ̄|||

でもそんなの気にしないって人は下記コードをfunction.phpに書き込めば解決です。

/**
*imgに勝手にwidth/height入れなくする
*/
add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );

無事普通に動くようになりました。巻き込みの方は何ともなりませんでしたが・・・ 

また次回o( ̄へ ̄o)


back no


足跡残してください♪