Retinaサポートその二歩目

先日公開したRetinaサポートWebへの第一歩Macお宝鑑定団Blogでも採り上げていただいたため、開設したばかりの Blog にはもったいないほどの閲覧数となった。感謝!

前回のエントリーでは<img>要素の画像を置き換える方法を説明した。投稿エントリーの画像を置き換えていくにはあの方法が適していると思うが、今回はバックグラウンド画像や Web サイトで何度も登場する固定画像を、スタイルシートを用いて変更する方法を説明する。

今日からこのブログのメニューは Retina 対応のテクスチャーを背景画像として登録している。Retina 対応でない環境で見るとただのグラデーションが表示されるが、 Retina ディスプレイで見ると細かなメッシュパターンがメニューの背景画像として現れる。しかし、こうやって並べると愕然とするね。

[retina normal=”http://blog.taiyolab.com/wp-content/uploads/2012/06/hi_bg.png” retina=”http://blog.taiyolab.com/wp-content/uploads/2012/06/hi_bg_retina.png” width=”632″ height=”126″]

Retina 時のテクスチャー用の単位画像は92×94ピクセルのpngだが、背景画像のサイズをCSSで background-size:46px 47px; と設定しているだけだ。

メディアクエリーはレスポンシブなサイト作成に欠かせないものとなってきているので、ご存知の方も多いだろう。印刷とモニタ、表示デバイスごとに異なるスタイルシートを定義できるのだが、このメディアクエリーで Retina ディスプレイを判定し、スタイルシートを定義する。当面は iPhone 4/4S、iPad(3rd) と MacBook Pro Retina だけ対応しておけばいい気もするが、念のために、-webkitのプレフィクス付きのメディアクエリーだけでなく、 min-device-pixel-ratio:1.5 としておいて、未知のデバイスにも対応しておくといいだろう。

[raw]

#navigation ul {
  width: 100%;
  background: -moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
  background: -webkit-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
  background-size: 46px 47px;
  ...
}
/* Retina 用のスタイルシート */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
  #navigation ul {
    background-image: url('/wp-content/uploads/2012/06/mesh_pattern.png');
  }
}

[/raw]

WordPress であれば、 Themeのstyle.css で背景画像を指定しているところに追記していけばいい。ナビゲーションなど、CSSの背景画像が用いられている部分は簡単に Retina 対応を果たすことができる。

次はCMSが吐き出す<img>オブジェクトをCSSで変更する方法だが、これもメディアクエリーでこんな風に書けばいい。

[raw]

/* Retina 用のスタイルシート */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
  img#logo {
    content: url([ Retina用の画像 ]);
  }
}

[/raw]

あいにくとこのブログには画像がないので「ほら」とお見せすることができない。HTML5 CANVAS を Retina 対応させるためのエントリーを後日紹介するのでそのときに具体的な例を挙げて説明したい。

This post is also available in: English

1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

%d人のブロガーが「いいね」をつけました。