※追記
画像をPC用とスマホ用で共通で対応できるケースの記事を公開しました。
関連記事賢威7でのサイトタイトルのロゴ設定(PCとスマホで画像共通)

 

最近のサイトではあまり見かけなくなりましたが、冒頭の画像のようにサイトタイトルの横にロゴ画像を配置するデザインがあります。

当サイトではSEOに強いWordPressテンプレート『賢威』(バージョン7:スタンダード版)を利用していますが、賢威7ではサイトタイトルの横にロゴ画像を配置する設定はありません。

今回は、スタイルシートを使ってサイトタイトルの左側にロゴ画像を配置する方法をご紹介します。

ロゴ画像の用意とサーバーにアップロード

冒頭の画像のように、今回の記事用に当サイトのロゴを仮で作成しました。

サイズは30×30pxです。

ただ、iPhoneやiPad、最近のMacでは、Retina(レティナ)ディスプレイという高解像度ディスプレイを採用しているため、PC用の画像の2倍の解像度が必要です。

よくスマホでサイトを見ていると、画像が荒いロゴや写真が見受けられますが、Retinaディスプレイの高解像度に耐えられないレベルの解像度によるものです。

そのため、今回PC用に用意した30×30pxのロゴ画像の他に、スマホ用の60×60pxのロゴ画像を用意しました。

用意したファイルは以下の2点です。

  • PC用:logo.gif
  • スマホ用(Retinaディスプレイ対応):logo@2x.gif

ロゴ画像をサーバーにアップロード

当サイトの場合は、ルートに「images」ディレクトリを作成し、そこにロゴ画像を格納しています。

ディレクトリの場所や名前は任意でかまいません。

スタイルシートの修正

今回の設定はスタイルシートの修正のみで完結します。

当サイトは賢威の子テーマで運用しているので、子テーマディレクトリの「base.css」と「rwd.css」を編集します。

子テーマディレクトリの「base.css」修正内容

※賢威7では「base.css」はPC用のスタイルシートです。

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

子テーマディレクトリの「rwd.css」修正内容

※賢威7では「rwd.css」はスマホ用のスタイルシートです。

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

.site-title {
	background-image: url(/images/logo@2x.gif);
	background-size:30px 30px;
	vertical-align: middle;
	margin-left:15px;
}

}

解説

ロゴ画像はサイトタイトルの背景画像としてスタイルを設定します。

背景画像を繰り返させず、位置を調整します。

また、PC用の「base.css」とスマホ用の「rwd.css」では、読み込むロゴ画像が違う点にご注意ください。

スマホ用が高解像度のロゴ画像(logo@2x.gif)になります。

なお、スマホ用の場合は、背景画像とサイトタイトルの文字列を縦に中央揃えにするのがちょっとクセがあるので、こちらの点もご注意ください。