CoCoonは、Wordpress用の無料で使える人気テーマの一つです
カスタマイズが簡単で、幅広い機能を備えていて、ヘッダー背景画像の追加は、CoCoonの機能の1つです
お好みの画像をヘッダーに設定でき、画像サイズと高さを自由に変更できます
本記事では、CoCoonでヘッダー背景画像サイズと高さを指定する手順を説明します
私が使っているテーマがCoCoonなので、CoCoonでの設定方法での説明になりますが、同じような機能があるテーマであれば、参考になると思います
作成する画像サイズ
ある程度のサイズなら、特に問題ないと思いますが一応1240x240で作成しました
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]
