こんにちは。

佐藤です。

 

以前“投稿の画像サイズを均一にする＜WordPress＞”という記事を書かせてもらいましたが、今回は前回とは別の方法、CSSのbackgroundプロパティを使って設定する方法を紹介します。

 

 

CSSのbackgroundプロパティを使用しますのでまず、CSSを適用させるための要素が必要になります。
そのために統一したいサイズの透明の画像を使います。

 

 

はい、もちろんそれでも大丈夫です。

ただそれだとレスポンシブ対応にした時にwidthは%指定しておけば楽なんですがheightを正しく設定するのが難しく、画面サイズによって統一される画像のサイズが変わってくる現象と戦うこととなります。

 

画像であればheight:autoと指定しておけばwidthが変わってもずっと同じ縦横比でサイズ変更してくれます。

 

なので今回は簡単にかつ柔軟に対応したいので透明画像でbackgroundプロパティを適応する方法で行います。

 

次に画像の取得ですが、backgroundプロパティで画像を表示させたいので、画像タグではなく画像のurlが欲しいです。

なのでwp_get_attachment_image_src($画像id,$size)を使用します。

 

この関数に画像idとサイズを渡すと画像のデータを配列で返してくれます。

なのでちょっと回りくどいですがアイキャッチ画像の場合だと

$image_id = get_post_thumbnail_id();

$images = wp_get_attachment_image_src($image_id,”full”);

 

こんな感じで取得できます。

画像のurlは配列の最初に入っているのでこれを

<img src=”透明画像” style=”background:url(<?php echo $images[0] ?>) no-repeat center center;background-size:cover” alt=””>

と書けば適応することができます。

カスタムフィールドを使う場合も同じで画像idを取得して適応すればいいだけです。

 

 

実は、アイキャッチ画像の方が簡単に取得できます。

<img src=”透明画像” style=”background:url(<?php the_post_thumbnail_url( ‘full’ ); ?>) no-repeat center center;background-size:cover” alt=””>

 

ですがこのthe_post_thumbnail_url(  )。ワードプレスのバージョン4.4.0からしか実装されていないので使いたい場合はワードプレスのバージョンに気を付けましょう。

 

 

ちなみにbackgroundプロパティを使った方法では前回紹介したadd_image_size（）と違い小さいサイズの画像を使ってもサイズを合わせてくれます（※小さいサイズを拡大するため画像は荒れます）

 

 

 

 

 

でもちょっとまってください。

 

 

本当にこれでバッチリでしょうか？

 

 

 

 

実はこのままだとちょっとよろしくありません。

まず一つ目が画像のサイズの問題です。

 

はい、揃ってます。ただこの合わせ方だとそのサイズとは全く別のサイズの画像を読み込んでサイズを合うように設定している形なので実際はあまり適した形ではありません。

 

 

大きすぎる画像を読む可能性が出てきます。

 

例えば実際に必要なサイズは最大でも200×200だとして、投稿に4000×2000で重さ2Mとかの画像を付けた場合、2Mのでかい画像を読み込むことになります。
アーカイブなんかでこんな画像をたくさん読み込むと表示に時間がかかる上に相手に大量の通信をさせてしまい人のお財布事情を圧迫させかねません。

 

 

 

ですのでまずサイズをきちんと設定していこうと思います。

 

 

 

察しのいいみなさんなら気付いたかもしれません。

はい、add_image_size()を使います。

 

 

ただ今回は$cropはfalseのままで大丈夫です。

 

add_image_size(“archive_new_size”,200,200)

こんな感じで最大時のサイズをfunction.phpに記入して保存します。

あとはwp_get_attachment_image_src($画像id,”archive_new_size”)みたいに取得すればOKです。

 

 

その通りです。WP管理画面にある設定のメディアからサムネイル～大サイズまで設定変更できますのでここで数値を変更してmediumなどで指定することも可能です。

ただ他のページで使っているサイズを変更してしまいますと別ページに影響が出ちゃいますし逆もまた然りな訳ですので、手間ではありますが専用のサイズを作ってやるのが無難です。
※あと実はのちのちどっちにしろadd_image_size()は使うのでまとめて書いてほうが別の人がコード見た時もわかりやすいです。

 

 

 

次にsrcsetとかつけてないのでRetinaディスプレイだと画像が荒れる可能性があるんです、、、。

 

 

そうなんです。なので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に保存します。

 

そして取得も二回行います。

$image = wp_get_attachment_image_src($画像id,”archive_new_size”);

$image2x = wp_get_attachment_image_src($画像id,”archive_new_size2x”);

 

そしてbackgroundの部分を

background:-webkit-image-set(url(<?php echo $image[0] ?>) 1x, url(<?php echo $image2x[0] ?>) 2x) no-repeat center center;

と書き直せば完成です。

 

 

 

 

ところがどっこい。このままでは非常にまずいです。

実はこのimage-set()は対応しているブラウザが少ないのでimage-set()でコードを書いているとiphoneなんかは画像がキレイに表示されるのですが、IEなんかだと何も表示されません。

詳細はここ

 

なのでこの方法でbackgroundを書く前にbackgroundでいつもの書き方もしておく必要があります。

全文書くとこんな感じ

<img src=”透明画像” style=”background:url(<?php the_post_thumbnail_url( ‘full’ ); ?>) no-repeat center center;background:-webkit-image-set(url(<?php echo $image[0] ?>) 1x, url(<?php echo $image2x[0] ?>) 2x) no-repeat center center;background-size:cover” alt=””>

長いので関数にしておくとスマートかもしれませんね。

 

実用するとこんな感じです。

<figure>
   <p class="image"><img src="透明な画像のurlだよ" style="<?php echo background_image_att($image,$image2x); ?>" alt=""></p>
   <figcaption>
     <p><?php the_title_attribute(); ?></p>
   </figcaption>
</figure>

<?php
function background_image_att($image_url,$image_url2x){
  $html = 'background:url('.$image_url.') no-repeat center center;background:-webkit-image-set(url('.$image_url.') 1x,url('.$image_url2x.') 2x) no-repeat center center;background-size:cover;';
  return($html);
}
?>

 

はいバッチリですね。

 

 

ただbackgroundプロパティを使う方法も画像サイズを追加しているのですでにアップロードしてある画像は必ず再生成させてから使ってくださいね。