Satohこんにちは。以前“投稿の画像サイズを均一にする<WordPress>”という記事を書かせてもらいましたが、今回は前回とは別の方法、CSSのbackgroundプロパティを使って設定する方法を紹介します。CSSのbackgroundプロパティを使用しますのでまず、CSSを適用させるための要素が必要になります。そのために統一したいサイズの透明の画像を使います。そんなもの用意しなくても適当なタグにwidthとheightを設定すればいいんじゃない?はい、もちろんそれでも大丈夫です。それだとレスポンシブ対応にした時にwidthは%指定しておけば楽なんですがheightを正しく設定するのが難しく、画面サイズによって統一される画像のサイズが変わってくる現象と戦うこととなります。画像であればheight:autoと指定しておけばwidthが変わってもずっと同じ縦横比でサイズ変更してくれます。今回は簡単にかつ柔軟に対応したいので透明画像でbackgroundプロパティを適応する方法で行います。次に画像の取得ですが、backgroundプロパティで画像を表示させたいので、画像タグではなく画像のurlが欲しいです。wp_get_attachment_image_src($画像id,$size)を使用します。この関数に画像idとサイズを渡すと画像のデータを配列で返してくれます。wp_get_attachment_image_src($image_id,”full”);こんな感じで取得できます。alt=””>と書けば適応することができます。カスタムフィールドを使う場合も同じで画像idを取得して適応すればいいだけです。カスタムフィールドなら簡単だけど、アイキャッチ画像だと画像url取得するのがちょっと手間ですね。簡単に取得する方法はないの?実は、アイキャッチ画像の方が簡単に取得できます。ワードプレスのバージョン4.4.0からしか実装されていないので使いたい場合はワードプレスのバージョンに気を付けましょう。ちなみにbackgroundプロパティを使った方法では前回紹介したadd_image_size()と違い小さいサイズの画像を使ってもサイズを合わせてくれます(※小さいサイズを拡大するため画像は荒れます)これでバッチリですね!!でもちょっとまってください。本当にこれでバッチリでしょうか?実はこのままだとちょっとよろしくありません。一つ目が画像のサイズの問題です。画像サイズばっちり全部そろってるよ?はい、揃ってます。この合わせ方だとそのサイズとは全く別のサイズの画像を読み込んでサイズを合うように設定している形なので実際はあまり適した形ではありません。いうこと?大きすぎる画像を読む可能性が出てきます。実際に必要なサイズは最大でも200×200だとして、投稿に4000×2000で重さ2Mとかの画像を付けた場合、2Mのでかい画像を読み込むことになります。アーカイブなんかでこんな画像をたくさん読み込むと表示に時間がかかる上に相手に大量の通信をさせてしまい人のお財布事情を圧迫させかねません。サイズをきちんと設定していこうと思います。察しのいいみなさんなら気付いたかもしれません。はい、add_image_size()を使います。結局backgroundプロパティでもそれ使うのか笑ただ今回は$cropはfalseのままで大丈夫です。add_image_size(“archive_new_size”,200,200)こんな感じで最大時のサイズをfunction.phpに記入して保存します。あとはwp_get_attachment_image_src($画像id,”archive_new_size”)みたいに取得すればOKです。これfullにしてるからダメなんだよね?じゃあ新しくサイズ作らなくてもサイズのところをmediumとかにすればいいんじゃないですか?その通りです。WP管理画面にある設定のメディアからサムネイル~大サイズまで設定変更できますのでここで数値を変更してmediumなどで指定することも可能です。他のページで使っているサイズを変更してしまいますと別ページに影響が出ちゃいますし逆もまた然りな訳ですので、手間ではありますが専用のサイズを作ってやるのが無難です。※あと実はのちのちどっちにしろadd_image_size()は使うのでまとめて書いてほうが別の人がコード見た時もわかりやすいです。次にsrcsetとかつけてないのでRetinaディスプレイだと画像が荒れる可能性があるんです、、、。いや、でもこれ画像自体はただの透明画像だからsrcset付けたって意味ないし、、、そうなんです。backgroundにimage-set()を使っていきます。そのための下準備としてまたまたadd_image_size()を使います。add_image_size(‘archive_new_size’,200,200);add_image_size(‘archive_new_size2x‘,400,400);こんな感じで2倍のサイズを用意しfunction.phpに保存します。center;と書き直せば完成です。これでバッチリですね!!ところがどっこい。このままでは非常にまずいです。実はこのimage-set()は対応しているブラウザが少ないのでimage-set()でコードを書いているとiphoneなんかは画像がキレイに表示されるのですが、IEなんかだと何も表示されません。詳細はここなのでこの方法でbackgroundを書く前にbackgroundでいつもの書き方もしておく必要があります。alt=””>長いので関数にしておくとスマートかもしれませんね。実用するとこんな感じです。return($html);}?>これでバッチリですね!!はいバッチリですね。backgroundプロパティを使う方法も画像サイズを追加しているのですでにアップロードしてある画像は必ず再生成させてから使ってくださいね。フロントエンドエンジニア。この人が書いた他の記事を読むこちらの記事もおすすめです早いぞ早いぞスニペット!!<Dreamweaver>コピペで簡単!wordpressでアーカイブページのページャーの数字の数を固定する。