読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

レスポンシブ・ウェブデザイン(RWD)で陥りがちな写真使用での失敗

RWD WebDev

 次のサイトのトップページの大きな画像に注目して下さい*1。これはサイトの写真左側に写っている人の、個人のウェブサイトです。デザイン的にはとても優れたサイトです。
f:id:sthmdnss:20141227005812p:plain
Shaun Groves - musician & speaker inspiring generous living
 このサイトはレスポンシブデザインで作られているのですが、iPhoneなどのモバイル環境で見たときに、本人が写っている部分が途切れてしまっています。自分のパブリシティを高めるためのサイトでこのミスは致命的です。
f:id:sthmdnss:20141227005836p:plain
 これは、元の写真が横に長いという原因がそもそもあります(画像のサイズは、2000×800)。しかし、これはCSSで対処できる問題です。メディアクエリで上書きすればいいところを怠っているために起きてしまっています。問題の部分のCSSを見てみます。

.entry-thumbnail-wrapper .entry-thumbnail-inner {
  position: absolute;  
  top: -50px;
  left: 0;
  width: 100%;
  background-color: #948c8a; 
  background-position: 50% 50%;
  background-size: cover;
}

 この中でどれをいじるかということについては、いくつかの選択肢がありますが、今回は、background-positionの値を変えてみることにします。

.entry-thumbnail-wrapper .entry-thumbnail-inner {
  position: absolute;  
  top: -50px;
  left: 0;
  width: 100%;
  background-color: #948c8a; 
  background-position: 27% 11px; /* ここを変更。値はあくまで例*/
  background-size: cover;
}

f:id:sthmdnss:20141227011237p:plain
 あとは、このままだとデスクトップ環境などでの元のレイアウトが崩れてしまうので、メディアクエリで囲います。同時に、この部分のクラスは、サイトの他の横いっぱいに広がる画像にも適用されているため、topというような名前のクラス属性を新たに付与します。

@media screen and (max-width: 480px) {
.entry-thumbnail-wrapper .entry-thumbnail-inner.top {
  background-position: 27% 11px; /* ここを変更。値はあくまで例*/
}
}

 以上で、やや応急処置的な処理にはなりますが、レスポンシブ・ウェブデザイン(RWD)で陥りがちな写真使用での失敗(のひとつ)を回避することができます。

*1:他人の実際に運営されているサイトを例に出して述べるのは、たいへん申し訳ない気持ちがありつつも、これをきっかけに気づいてくれればいいのではないかという思いもあり(本来ならば英語で書くべきだが)、記事にする(本当はダミーを作るのが望ましい)。