ウェブデザイン

WordPressテーマ Simplicity iPhoneで見ると変!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WordPressテーマ「Simplicity」はすばらしいテーマです。

SEOやSNSに必要なプラグインと同等の機能が盛り込まれていますし、
レスポンシブデザインはもちろんのこと、子テーマやデザインスキンなどもありインストールしてそのままでも使えるテーマです。

PCやタブレットでは表示に問題ないのですが、
iPhone5sでは、ヘッダー画像の下に余計な空きが出来て
見栄えもよくないし、画像も小さすぎる。

レスポンシブで画面いっぱいに画像を表示する場合のCSS

#header{
  background-image:url('url');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 100% auto;
}
background-size: 100% auto;

モバイル表示では↑これが画像を小さくします。

Simplicity1.5.0の responsive.css に下記のCSSを記述すると

#header{
  background-size:contain;
}

レスポンシブで表示領域が変更されても画像が小さくならないので
画像の視認性とデザイン性を確保できます。

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*

8 + 5 =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください