本記事は「賢威7でサイトタイトルの左にロゴ画像を設定する方法」の続編になります。

上記の記事では、PC用とスマホ用でロゴ画像を分けていました。

分けていた理由は、仮で作っていたロゴがドット絵的なロゴだったため、解像度の高いスマホ用(Retina:レティナディスプレイ)として用意していたPC用の2倍の解像度のロゴ画像をPC用に流用するとPCで表示した時につぶれて表示されるからです。

今回は、ドット絵ではない一般的なロゴ画像の場合に、PC用とスマホ用で画像を共通で設定する方法をご紹介します。

CSSの修正

当サイトの場合は賢威の子テーマで運用しているため、子テーマディレクトリにある「base.css」と「rwd.css」を修正します。

base.css

.site-title {
	font-size: 1.5em;
	background-image: url(/images/logo.gif);
	background-repeat: no-repeat;
	background-position: left center;
	background-size:30px 30px;
	padding-left: 36px;
	height: 30px;
	line-height: 0;
	padding-top: 30px;
	display: block;
}

rwd.css

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

.site-title {
	vertical-align: middle;
	margin-left:15px;
	height: 70px;
	padding-top:70px;
}

}

上記の場合は、PCでの表示の際に30×30pxとしているので、iPhoneやiPad、Mac等のRetina(レティナ)ディスプレイ対策として、画像自体は60×60pxで作成しておくと、Retinaディスプレイで見た時にもきれいに表示されます。