ヘッダー背景画像について自分用の記事になります
テーマでヘッダー背景画像を指定できる物を使っている人には参考になる…かも？
作成する画像サイズ
ある程度のサイズなら特に問題ないと思いますが一応1240×240で作成しました
PC用のヘッダーと考えると横幅はこれぐらい有ったほうが良いかも？
勿論画面幅を特定のサイズにしている場合はそのサイズに合わせて作成すると良いと思います
例：カラム幅が800pxならそのサイズとか
ヘッダーの高さ指定
ちょうどいい高さを指定しないと画面サイズを変更した時に背景画像とナビメニューの間に帯が出ます
気にしない場合は特に必要ないですが、最低限主要な画面サイズにした時に帯が出ないようにしておくと良いかもしれません
当サイトで使用しているテーマがCocoonなのでそれで説明していきます
高さの数値を探り設定する
画面サイズを変更した時に画像のような帯が出ないサイズを探ります
使っているブラウザで変わりますがサイトを別窓で開きサイズを小さくしたり大きくします
サイズを変更しても画像のような帯が出ないサイズを設定画面で指定する感じですね
PC用や一部タブレットサイズで帯が出ない高さが分かったらCocoon設定 ヘッダー設定内にある高さで指定します
ここではPC用(標準？)部分だけ指定をしてモバイル用はCSSで指定をしています
自分が作成したヘッダー背景画像サイズでは160pxが帯のでない高さでした
モバイル用高さ指定コード
モバイル用(スマホサイズとタブレット)のコードはメディア指定を使います
/* 960px以下 */
@media screen and (min-width: 601px) and (max-width: 960px){
.header div.header-in {
min-height: 140px;
}
}
/* 600px以下 */
@media screen and (min-width: 481px) and (max-width: 600px){
.header div.header-in {
min-height: 80px;
}
}
/* 480px以下 */
@media screen and (max-width: 480px){
.header div.header-in {
min-height: 80px;
}
}当サイトではこの設定で帯が出なくなりました
サイトのカラム幅やサイト幅の均一化をしているか否かで変わるので、各自どの数値が良いか探してみましょう
おわり
今回のヘッダー背景画像については、何故かAMPページの表示が崩れており
それを直す過程で「あれ？ヘッダー部分に帯でてんなぁ…」となったのがきっかけです
当サイトで使っているテーマはCocoonですがヘッダー背景画像を指定できる物なら同じような感じだと思います
もしサイズ変更時に帯が出て気になる…という人の参考になれば＾＾
[share]
Comments