【Cocoon】背景動画をブラウザ上部のヘッダー領域から横幅100％のフルワイドで表示
当サイトでも使用しているWordPressテーマ「SWELL」
だと比較的簡単に設定できるトップページのメインビジュアル動画の位置調整を「Cocoon」でもカバーブロックを使用して出来るだけ簡単に。
目次
カバーブロックに背景動画を設置
カバーブロックを追加
カバーブロック＞メディアを追加＞動画を選択
【 PR 】
カバーブロックに任意のCSSクラス名を追加
カバーブロックの高度な設定＞追加CSSクラスに任意のCSS名（今回は ”main-visual”）を追加
Note
追加CSSクラスには「 .main-visual 」の最初の「 . 」を付けずに「main-visual」のみを追加
CSSを “style.css” に追加
任意のCSSクラス名を追加
外観＞テーマファイルエディタ＞style.cssに下記の任意のCSSクラス名（今回は “main-visual” ）を追加
.main-visual {
width: 100vw !important;
margin: 0 calc(50% - 50vw);
margin-top: -80px;
min-height: 800px;
}
@media screen and (max-width: 960px){
.main-visual {
margin-top: -80px;
min-height: 800px;
}
}
@media screen and (max-width: 600px){
.main-visual {
margin-top: -80px;
min-height: 400px;
}
} Note
2行目の “100vw” の “!important” は外さないで下さい。
4行目のスライド領域の位置については適宜数値を調整して下さい。
画面サイズに合わせて “min-height” の数値を調整して下さい。
コンテンツ上部の余白を削除
外観＞テーマファイルエディタ＞style.cssに下記の内容を追加
.content,
.content-in,
.main,
.entry-content {
margin-top: 0px;
padding-top: 0px;
}要素の重なり順を “z-index” で調整
外観＞テーマファイルエディタ＞style.cssに下記の内容を追加
.logo {
z-index:1;
}
.menu-item {
z-index:2;
}
.menu-button {
z-index:3;
}以上でCocoonの背景動画を画面一杯に表示する方法となります。
