縦画像と横画像の大きさを揃えたい僕は趣味の写真のブログをWordPressを使って別に作ってるんですけど、ずっとモヤモヤしている事がありまして。それは、縦画像が大きく表示されすぎるという問題。下の画像を観てください。下の画像は、その写真ブログなんですけど、横向きの画像に対して、縦向きの画像が大きく表示されすぎている。横向きと縦向きを同じサイズで表示するようにしたい。ブログを書くときに、画像を追加するたびに横画像と縦画像で違うサイズを設定していけばいいんでしょうけど、そんなの超面倒。縦か横かは自動で判別して、表示サイズを設定できるようにします。レスポンシブに対応させちゃいます。ネットで調べてもやり方がなかなか見つからなかったので、ちょっとまとめておこうかなと思います。写真ブログやってる人ならみんな困ってるんじゃないのかなぁ、もし困っている人がいるなら必見ですよ。5分で出来ますから、超簡単。WordPressで縦画像と横画像で表示設定を変えるには?やらないといけないことはたったの2つです。imgタグ内のwidth、height表記を消す。imgタグ内のsizes表記の内容を、縦長画像と横長画像で変える。それぞれ、テーマの中のfunctions.phpの中に追加で記載することになります。WordPressのメニューの「外観」→「テーマエディター」で行けるんですが、書き換える前に必ずバックアップを取っておいてくださいね。imgタグ内のwidth、height表記を消すどれだけ表示の設定をしても、imgタグの中にwidth、heightが記載されているとそれが優先されてしまいます。width、heightは画像を追加すると自動で書き込まれてしまうので、まずそれを書かないようにしましょう。WordPressのバージョンによって対策が違うので、注意が必要です。);バージョン5.5はこちら。);はい、これで書かれなくなりました。imgタグ内のsizes表記の内容を、縦長画像と横長画像で変える続いて、縦画像と横画像で好みの表示設定を記載していきます。画像の高さと幅を取得して、どっちが長いの?というので縦長画像か横長画像かを判定しています。コードが間違っていたので書き直しました、大変申し訳ありません・・・。以降は、画像を載せてブログを描けば勝手に縦画像を横画像の大きさを揃えてくれます。写真ブログなら必須の機能ほんとは、アスペクト比(3:2、4:3、16:9、1:1)に応じて表示設定を変えるとかできた方が良いんですけど、とりあえずここまで。写真ブログを運営されている皆さん、これからはブログにかっこよく縦撮りの写真を載せられますよ!スマホとカメラの画像が混ざっても全然問題なし、めっちゃ便利です。2018年は、桜の開花が早く、関東では4月の前に満開になりました。下の写真は9/23に行った時のもので、この時期だと少し肌寒かったですね。川越はやっぱり建物が美しくて、メインストリートは電線を埋め込んで電柱をなく...X-T20西武ドームで楽天戦。遅くなりましたが、1月13日、今年最初のフォトサイクルです。黄色い花と言えば、菜の花、ひまわりが有名ですよね。コメントをキャンセルメールアドレスが公開されることはありません。*サイトΔホームWordpressスポンサーリンクサイト内検索このブログの作者ジョイ富士フイルムのカメラで撮れる写真が好きで、今はX100VとX-T20を愛用しています。お気に入りのカメラで出かけた写真を載せています。あと、趣味で画像処理関係のWEBアプリを作って公開しています。Reserved.タイトルとURLをコピーしました。