賢威6.1のヘッダー画像をスマホ表示最適化する方法

どうもスイクンです。賢威6.1でレスポンシブWebデザインを有効化していると、スマホから見た際にヘッダーが小さく表示されてしまいます。

これだけヘッダーが小さく表示されてしまうと、PCから閲覧してくれる人に対してであれば、ヘッダーでアピール出来るわけですが、スマホから閲覧してくれる人に対しては効果的にアピールできません。そこで、今回お伝えするヘッダー画像をスマホ最適化する方法を使えば、次の画像のようにスマホから見ても適切なヘッダー表示が可能になります。

1 賢威6.1のレスポンシブウェブデザイン有効化
2 スマホ用画像の作成
3 ヘッダー(header.php)の編集
- 3.1 確認
- 3.2 賢威6.1のカスタマイズ資料作成しました。

賢威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表示でのヘッダー画像が変わります。