こんにちは、ノアです。

つい数ヶ月前にリリースされた賢威の新バージョン賢威７ですが、その使い勝手の良さに惚れ込んでしまいました。

このサイトも賢威７だけで構築しているのですが、元デザインがシンプルなだけあってカスタマイズがしやすい！

最近ではTCDのテンプレートも人気ですが、SEO的にも使い勝手的にも、ワードプレスの有料テンプレートではやはり賢威が一番だと思います。

ただ1つネックを挙げるとするなら、リリース直後ということもありカスタマイズ情報が少ないという点。

賢威７に変えたいのは山々だけど、まだカスタマイズ情報が少ないから賢威６のままでサイトを運用している、という人も少なくないのではないでしょうか？

特に、ヘッダー画像はサイトの印象を大きく左右するポイントですが、デフォルトのまま設定してしまうとスマホ閲覧じに上手く表示してくれない・・・。

そこで、今回は賢威７にスマホ用のヘッダー画像を設定する方法を解説してみました。

CSSをコピペするだけで簡単にできてしまうので是非一度お試しください！

賢威７にヘッダー画像を設定

賢威７のヘッダーに表示されるロゴ画像は簡単に設定できます。

【ダッシュボード→賢威の設定→ロゴ画像→画像を設定】にて、PCからヘッダーにしたい画像をアップロードするだけです。

アップした後のサイトを確認してみると・・・keni2

非常にスマート！丁度良い大きさです！

では引き続きスマホの表示を確認してみます。すると・・・

keni3

えぇ、全然スマートじゃない・・・。

まあでも、ヘッダーを100×1200pxのPC用サイズで設定しているので仕方ないですね。

ここで何とか上手くできないものかと考えたのが、PC用とスマホ用で別々のヘッダー画像を設定する、という方法。

という訳で、「早速ヘッダーファイルをいじってみよう！賢威６でも１度他のサイトを参考にしながらカスタマイズしたことがあるし、同じ要領で行けるだろう！」そう息巻いてheader.phpを開いてみると・・・

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-25-15-13-21

なんか賢威６よりも全然ややこしくなってるし・・・、こんなの弄れるわけないじゃん・・・。

とまあこんな感じで戦意喪失していたのですが、ここである閃きが生まれました。

PHPを弄れないなら、CSSで無理やり表示してみよう！！

思い立ったらすぐ行動！ということで、CSSにてPCとスマホで別々のヘッダー画像を表示させることになりました。

少し前置きが長くなってしまいましたが、とにかくCSSだけで賢威７のスマホ用ヘッダーを設定してしまうという内容ですので、肝心の設定方法を順を追って説明していきます。

記事の最後に全てまとめてコピペできるものを貼っておくので、行程なんてどうでもいいよ！という方はすっ飛ばして最後をご覧ください。

スマホ用のヘッダー画像を設定

今回僕が考えたのは、スマホ閲覧時に一度ヘッダー画像を非表示にしてしまい、その背景にスマホ用のヘッダーを表示するという方法。

こうすれば、PCからサイトを閲覧した時は元の美しいヘッダーが表示され、スマホからサイトを閲覧した時は元のヘッダーは消えて背景に設定したスマホ用のヘッダーが表示されるという仕組みです。

では順を追って説明していきます。

サイトヘッダーの構造

h1タグの見出しにヘッダー画像が設定されており、それがdivタグ2つとheaderタグに属しているという構造ですね。

スマホ表示専用のCSS

また、賢威７ではウィンドウの横幅が736px以下になればスマホ用の表示になるようデフォルトでCSSが設定されています。

今回はスマホ用のCSSを設定することで、スマホ用ヘッダー画像を設定するため、

というように、全て【@media only screen〜】で囲ってあげましょう。

ヘッダー画像を削除

では、まずはスマホ閲覧時のヘッダー画像を削除します。

これはdisplay:none;でも構いません。

すると、このようにスマホで閲覧した時にヘッダー画像が非表示になりました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-25-16-05-37

スマホ用に背景画像を設定

不要な余白はpadding:0;で消し、background-imageからスマホ用のヘッダーを指定、サイズは100%、背景の繰り返しは無し、position:absolute;で位置を固定し、残りで位置を決める、という感じです。

（topの40pxはグローバルメニューの分です。）

背景画像の領域を広げる

しかし、背景を設定したは良いものの、このままではスマホで閲覧した時に背景が表示されません。なぜなら、site-titleにて背景をフルサイズ指定しても、親要素であるsite-header-contsの範囲が元のヘッダー画像の大きさになっているからです。

そこで、beforeを使ってsite-header-contsの範囲をスマホ用ヘッダー画像の大きさに合わせます。

ブロック要素を指定して背景画像のサイズに合わせた余白を取る、という方法ですね。

僕のスマホ用ヘッダー画像は600px×200pxだったので、100%のwidthに対して33%の余白をheightの代わりに取っていますが、これはヘッダー画像の縦横比に応じて変更して下さい。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-25-16-22-53

するとこのように表示されました。これでほとんど完成です！

背景画像にリンクを付ける

あとは、不要な余白の削除に加え、ヘッダーを背景で表示しているせいでヘッダーにリンクが付いていないという問題をCSSで解決してしまいます。

まずは賢威７のデフォルトでpaddingが上50px、下10pxと設定されていたため、余分な余白を削除。

続いて、リンク切れとなってしまっていたヘッダーを何とかするため、site-headerの親要素であるsite-header-contsの範囲全体にリンクの範囲を広げます。

すると、背景に設定したスマホ用ヘッダーのサイズと同じ大きさのリンクがヘッダーに設定されました！

賢威７のスマホ用ヘッダー画像の設定はこれにて終了です。

最後に注意書きですが、これらはスマホ表示用のCSSなので、必ず@media only screen~で囲んで下さいね。そうしないとPC閲覧時でもスマホ用ヘッダーが表示されてしまいます・・・。

コピペ用CSSコードはこちら

少しややこしくなりましたが、以下のコードをコピペすれば賢威７でスマホ用の画像を設定できます！

注意点は、background-imageに自分の画像を設定すること、site-header-conts:beforeのpadding-topを自分のスマホ用ヘッダーのサイズに合わせて設定することの2点です。

僕の場合はスマホ用ヘッダーが600×200pxなので、widthに対してheightが33%ということで33%と設定していますが、ここはそれぞれのヘッダーの大きさによって変わるので注意して下さい！

このページをご覧になった方の中には、ネットビジネスを実践していらっしゃる方が多くいらっしゃると思います。

僕もその中の一人であり、１０代にして月収100万円を突破したという実績があります。

しかし、はっきり言って、現状でネットビジネスをしている人は100%馬鹿です。

もしもあなたが今の現状を変えたいと望むのであれば、下の画像リンクから僕の無料メール講座の詳細を確認して下さい。