【賢威6.2】サイトタイトルをロゴ画像に変更【レスポンシブ対応】

サイトタイトルをロゴ画像に変更したい

たびたびいただくご質問で、「サイトのタイトルをオリジナルの画像にしたい」という声があります。 残念ながら賢威6.2の管理画面には、サイトタイトルを画像に変更する機能は付いていません。 ※賢威7では設定可能です。 そこで今回の記事では、サイトタイトル部分をロゴ画像に変更して、さらにスマホ表示の際に適切なサイズに調整し真ん中に表示させるカスタマイズをしてみたいと思います。

いざという時のためのWebサイトデータのバックアップ

最初に変更するコードを見てみます

「header.php」のサイトタイトルを出力している箇所を、画像タグに変えるだけなので、実際には以下のような記述の変更になります。

●変更前

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>

<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

●変更後

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/[画像のファイル名]" alt="<?php bloginfo('name'); ?>" /></a></p>

<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

書き換えたコードだけを見てみると以下のようになっています。

<img src="<?php bloginfo('template_url'); ?>/images/[画像のファイル名]" alt="<?php bloginfo('name'); ?>" />

いわゆるイメージタグが入っていて、ポイントは<?php bloginfo(‘template_url’); ?>というWordPressタグを使って、適用されているテーマのURLを取得しているところです。

そのうえでコードを順番にみていくと、賢威テンプレートの中の「images」ディレクトリの中の任意「画像ファイル」となっています。 ということで、この場所にロゴ画像をアップしてあげればいいということになりますね。 ※賢威では画像ディレクトリが「images」となっているので揃えましたが、任意の画像ディレクトリを作成しても問題ありません。

ロゴ画像以外でもアップした画像を表示させたい

今回は<?php bloginfo(‘template_url’); ?>というタグを紹介していますが、直接画像URLを書いても問題ありません。 しかし、テーマの中の「images」ディレクトリと覚えておくと楽なので、画像をいつもここにアップして、表示のさせ方も<?php bloginfo(‘template_url’); ?>を利用すると分かりやすくなるかもしれません。

<img src="<?php bloginfo('template_url'); ?>/images/[画像のファイル名]" alt="画像の説明" />

<?php bloginfo('template_url'); ?>/images/[画像のファイル名]
//展開すると
サイトURL/wordpress/wp-content/themes/keni62_wp_corp_150408/images/[画像のファイル名]
//直接画像のURLを書いても、もちろん大丈夫です

上記の書き方で[画像のファイル名]を任意に変更することで、どこにでも表示させることは可能になります。 WordPress用の書き方にはなりますが、画像表示の際に利用してみてください。

ロゴ画像を用意しよう

変更するコードをみていきました。 ここまででカスタマイズできた方も多いかもしれませんが、続いてはロゴを用意して、アップしていく流れに進んでいきます。

「logo.png」という実際にいさろぐで使用しているロゴ画像を例にしてみました。 上記のようなロゴ画像（画像のファイル名は任意の名前で構いません）をサイトタイトルと入れ替えていきます。 ロゴ画像の作成には「無料のバナー作成ソフト」の記事も参考にしていただければと思います。

初心者でも簡単！おすすめの無料バナー作成ソフト5選

設置するロゴ画像を準備したところで、FTPソフトを利用してサーバにアップしてきます。 アップする場所は先ほど解説をした、賢威テンプレートの中の「images」ディレクトリの中です。

FTPソフトを使ってロゴ画像をアップロード

ご自身のサーバのWordPressがインストールされている場所をFTPソフトでみてみます。 「/wordpress/wp-content/themes/keni62_wp_corp_150911/images」 上記のようなディレクトリにアクセスし、画像をアップロードしていきましょう。

アップロードができたら、はじめに紹介をしたコードの変更をおこないます。 コピー＆ペースト貼り付ける際には、[画像のファイル名]を「logo.png」と変更することをお忘れなく。

そのままコードを入れ替えると、このようにタイトル部分が画像に変わったかと思います。 ※賢威6.2のコーポレート版で作業しています スマホ表示を意識して大き目の画像を用意していたので、そのままのサイズで表示されています。 ちょっと大きくなりすぎているので、見栄え的にもう少し小さくしたいですよね。

「design.css」を調整してロゴ画像のサイズを変更しよう

ここではPCで表示した際に、画像のサイズを300px程度に調整するCSSを追記してみます。

●「.header-logo img」でサイズ指定（design.css）

#header .header-logo img {
	width:300px;
}

「design.css」に上記のCSSを追加すると以下のように画像が小さくなります。

これである程度完成なのですが、スマートフォンで見た際のロゴ画像のサイズも少し調整してみたいと思います。

「mobile.css」でスマホ表示の調整をしよう

カスタマイズをおこないサイトタイトルをロゴ画像に変更しました。 この状態をスマホで見ると、以下のようになっています。

ロゴ画像をスマホ用ではもう少し小さくして、中央に寄せるような調整をしてみたいと思います。

●サイズと位置を指定（mobile.css）

#header .header-logo{
	text-align:center;
}
#header .header-logo img {
	width:150px;
}

上記の記述を「mobile.css」に追加することで、スマホ表示の際に画像を150pxに、表示位置を中央にすることができました。

賢威7でも同じようにカスタマイズ可能です

賢威7ではデフォルトの機能として、サイトタイトルを画像にすることが可能ですが、サイズなどの微調整をおこなうことはできません。 そのためサイズや位置の調整が必要な場合は、今回の記事のようなCSSの調整で対応してみてください。

PC表示の調整は「base.css」スマホ表示の調整は「rwd.css」にてカスタマイズでおこないます。 賢威7で同様のカスタマイズを考えている方はぜひ参考にしてみてください！

まとめ

いかがでしたか？ 今回は賢威でよくある質問のひとつ、「ロゴ画像に変更したい」について取り上げてみました。 画像に変更すること自体は意外とカンタンだったと思いますが、CSSの微調整をあわせておこなうことで、より綺麗に表示させることができます。

また、最近ではスマホからのアクセスの方が多いというサイトやブログは少なくありません。 スマホ表示を意識してCSSの調整などをおこなうこともポイントのひとつです。 これからもカスタマイズの記事では、レスポンシブウェブデザインを考えた記述をお伝えできればと思います。

すでに賢威をご利用の方には基本的なカスタムだったかもしれません。 次回のヘッダーエリアのカスタマイズ記事は、ヘッダー全体を大きな画像にするカスタマイズや、ヘッダーにアドセンスやアフィリエイトバナーを設置するカスタムなどを紹介できればと思います！