賢威7のヘッダー画像サイズとスマホ用コードの位置について

この度、賢威7で新しくサイトを解説したところヘッダー画像でさっそく躓きました（汗）。

僕はstingerシリーズ、賢威6.2、賢威7とやってきましたが
ヘッダーサイズ及びスマホヘッダーサイズと位置を整えるのに今回は少し手こずりました。

その内容について解説していきます。

賢威7のヘッダー画像サイズ

賢威7になってヘッダー挿入がとても簡単に細かい設定が出来るようになりました。

6.2でも出来たと思うのですが、視覚的により簡単になったという印象です。

まず、ダッシュボード画面の『賢威の設定』を選びます▼

次にロゴ画像の『画像を設定する』をクリック▼

『ファイルを選択』を選び指定のヘッダー画像を選びます▼

ヘッダー画像は1600×427画像を使ってみます。こちらを指定します▼

するとこんな感じで選択されてるので、▼

『投稿に挿入』を選択します▼

プレビューするとこうなります▼

丁度いい感じになります。

では、スマホ表示はどうなるのか？

チェックしてみるとこうなります▼

ん～別に問題ないんですが、縦幅が狭く感じます。

スマホ用サイズのヘッダー画像の設定

賢威７に関してヘッダーのレスポンシブがどうも上手く対応していない雰囲気なので、
スマホ用ヘッダー画像を用意してPCと切り替える設定を行うことにします。

まずはスマホ用サイズの画像ですが、600×200を用意しました▼

この画像URLをbase.cssの下記コード場所に書き込みます▼

@media only screen and (max-width: 736px) {

.site-title img {
	visibility: hidden;
}
.site-title {
	padding: 0;
	background-image: url(ここにスマホ用ヘッダー画像のURLを入力);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 30px;
	left: 0;
	bottom: 0;
	right: 0;
}
.site-header-conts:before {
	content: "";
	display: block;
	padding-top: 33%;
}