賢威6.1のヘッダー画像をスマホ表示最適化する方法
どうもスイクンです。
賢威6.1でレスポンシブWebデザインを有効化していると、スマホから見た際にヘッダーが小さく表示されてしまいます。
これだけヘッダーが小さく表示されてしまうと、PCから閲覧してくれる人に対してであれば、ヘッダーでアピール出来るわけですが、スマホから閲覧してくれる人に対しては効果的にアピールできません。
そこで、今回お伝えするヘッダー画像をスマホ最適化する方法を使えば、次の画像のようにスマホから見ても適切なヘッダー表示が可能になります。
賢威6.1のレスポンシブウェブデザイン有効化
賢威6.1のレスポンシブウェブデザインの有効化は、賢威の設定からできます。
スマホ用画像の作成
スマホ用画像は、横320px、縦240pxくらいで作成することをおすすめします。
今回は次のような画像を作って用意しておきました。とりあえず、作ったものなので完成度が低いことはご了承ください笑
ヘッダー(header.php)の編集
画像の準備ができましたら、外観→テーマ編集→header.phpの編集をしていきます。
編集箇所は次の赤文字部分です。
<!–▼ヘッダー–>
<div id=”header”>
<div id=”header-in”><div id=”header-title”>
<p class=”header-logo”><a href=”<?php bloginfo(‘url’); ?>”><img src=”画像URL” alt=”” /></a></p>
<h1><?php h1_keni(); ?></h1>
</div>
</div>
</div>
<!–▲ヘッダー–>
次のように編集していきます。
<!–▼ヘッダー–>
<div id=”header”>
<div id=”header-in”><div id=”header-title”>
<p class=”header-logo”><a href=”<?php bloginfo(‘url’); ?>”>
<?php if (wp_is_mobile()) :?><img src=”スマホ用のヘッダー画像URL” alt=””><?php else : ?><img src=”PC用のヘッダー画像URL” alt=””><?php endif; ?></a></p>
<h1><?php h1_keni(); ?></h1>
</div>
</div>
</div>
<!–▲ヘッダー–>
以上のように変更をして保存をすると、以下のようにスマホ表示とPC表示でのヘッダー画像が変わります。
確認
PCから見た際には、横長の950px×200pxのヘッダー画像、スマホから見た場合は、320px×240pxのヘッダー画像と表示を切り替えることができます。
以上のカスタマイズで、スマホからサイトに訪問してくださった方へうまくアプローチ出来るようにサイトを最適化していきましょう。当サイトは、完全にPCからのアクセスのみに対応して作っていますが、通常はスマホにも最適化したほうが良いことは言うまでもありません。
賢威6.1のカスタマイズ資料作成しました。
賢威6.1をもっと有効活用したいのであれば、以下の資料をご覧ください。
 |
 |
|
 |
|
 |
