利用しているテーマ『cocoon』では、cocoon設定から簡単にヘッダーの背景画像やロゴを設定することが出来るのですが、
トップページを開いたときに、画面いっぱいに背景画像をバーンと載せて、真ん中にロゴを持ってきて、、
と言いつつブログのロゴが入ったメニューバーも設置したい。
いくつか方法はありますが、今回はアピールエリアを使ってトップページを作成してみました。
- 画面いっぱいにヘッダー画像
- 且つフロントページにだけ設置したい
- ヘッダーとメニューバーでロゴを差し替えたい
- なるべく簡単な方法で
こんな人におすすめです。
できあがりズ
完成予定はこんな感じ。
- 画面いっぱいにヘッダーの画像（アピールエリア）
- メニューバーを設置（トップメニュー）
- ロゴの設置
ヘッダーで設定したロゴは、メニューバーの横に表示されます。
これだけで良い場合はこのままで。
ロゴをもう一つ真ん中にも設置したい場合は、アピール用のimageを用意します。
ヘッダーロゴと同じでも良いと思いますが、2重で表示すると少しクドくなるので、今回はヘッダーロゴとは別に作成しました。
Cocoon設定ですること
ヘッダーレイアウト
メニューバー的な感じで設定したかったので
ヘッダーのレイアウトは「トップメニュー」。
”右寄せ”や”小”などの種類がありますが、この辺はお好みで。
ヘッダーロゴを設定する
ここで設定したヘッダーロゴは、トップメニューの他、フッターなどにも設置されるので、ブログのロゴ的な存在になります。
ヘッダーロゴを設置するよ
アピールエリアの設定
アピールエリアにて、
フロントページにバーンと載せる背景画像を設定します。
- アピールエリアを表示する箇所
『表示しない』から『フロントページのみで表示』に変更。 - 高さはCSSで調整するので空欄でOK
- バーンと表示するエリア画像の設定
- テキストメッセージを表示するにチェックを入れる。
- テキストメッセージにロゴのURLを記入
- その他はお好みで。
『アピールエリア背景画像の固定』にチェックを入れると、背景画像が固定されます。
このブログではチェックを入れていますがこれもお好みで。
テキストメッセージにロゴURLを入力する
ヘッダーで設定したロゴとは違う画像をアピールエリアにて設置したいので、HTMLで画像URLを指定して表示させたいと思います。
『テキストメッセージエリアを表示する』にチェックを入れないと表示されないので忘れずにチェックしましょう。（デフォルトではチェックされてなかったと思います。あやふや～）
使いたいロゴ画像をアップロードしてURLをコピペ。
以下のCSSに画像URLをはめ込んで『テキストメッセージエリア』に記入します。
（下のURL(https://ほにゃらら～.png)は削除していただき、ご自身の画像URLをご使用ください）
<img class="appeal-logo" src="(https://ほにゃらら～.png)" alt="appeal-logo">
プレビューでも確認してみてください。
もし、ロゴ画像がでっかく表示されていても大丈夫。ここからはCSSで調整していきます。
CSSでアピールエリアを調整する
スタイルシートにCSSコードを記載。
画面いっぱいに広がる画像にしたいので、アピールエリアのサイズを98vhにしてみました。ディスプレイの大きさが変わってもへっちゃら。
.apple{
height:98vh;
background-position:center;
}
.appeal-in{
width:100%;
height:98vh!important;
background-color:rgba(255,255,255,.5);/*画像をちょっと白っぽくしている*/
}
.appeal-content {
background-color:transparent;/*ロゴ部分の背景色を透明にしている*/
}
.appeal-logo{
width:200px;/*ロゴの大きさ*/
}
最低限のコードですが、こんなもんで8割方いけるのではないでしょうか。
モバイル用も一応
Cocoonのアピールエリアは、モバイルでは反映されないことになっています。
（要素はあるんだけどコンテンツと被っている状態だった気が…。）
CSSコードでアピールエリアの大きさを指定したことで、モバイル用にも反映されたかと思いますが、されてないよ～！って場合の為に
@media screen and (max-width: 1029px){
.apple{
height:98vh;
background-position:bottom;
}
}
モバイル版では背景画像が固定されない云々があるかもしれません。
とくにios様だと、『background-attachment: fixed』が使えないかも…。
このあたり、おいおい対策を用意したいと思います。
ヘッダーと被る問題。
アピールエリアはヘッダーの下に挿入されるので、画面いっぱいに画像を表示させたいときはヘッダーがどうしても邪魔になっちゃいます。
.header-container position: fixed; z-index: 9999; top: 0; background-color: rgba(255,255,255,0); }
これだともしかしたらロゴの背景だけ透明になって、ナビの背景色は残ったままになってしまうかも…。
そんなときはナビにもコードを追加してみてください。
#header-container .navi, #navi .navi-in>.menu-header .sub-menu, .header-container {
position:fixed!important;
background-color: rgba(255,255,255,0);
}
.mobile-menu-buttons {
background-color: rgba(255,255,255,0);
box-shadow: none;
}
背景は透明になったけど上部に余白ができている！
というときはこれで対策できるかな？。
ヘッダー分の余白をなくすので、それだけエリアが上に行きます。
.mblt-header-mobile-buttons {
margin-top: 0;
}
さいごに
細かいコードは割愛したので、なんか抜けてるのあったらご連絡ください。
ヘッダーをposition: fixed;で固定していますが、cocoon設定にも
『ヘッダーを固定する』
の項目があるので、これも割愛することが出来ます。
cocoon設定の『ヘッダーを固定する』で固定すると、ある程度スクロールするとヌルっとヘッダーが出てきますが、出てくるときに何行か下に飛んでしまっていたので、このブログでは設定のチェックは付けずに、コードで指定しています。
この場合、最初からヘッダーが固定されています。
少し違うのでご了承ください。
