【Cocoon】MetaSliderをブラウザ上部のヘッダー領域から横幅100％のフルワイドで表示

2025年2月8日2025年2月18日

WordPressテーマ「SWELL」だと比較的簡単に設定できるトップページのメインスライド調整を「Cocoon」でもプラグイン「MetaSlider」を使用して出来るだけ簡単に。

DEMO SITE

プラグイン「MetaSlider」をインストール

プラグイン＞新規プラグインを追加＞プラグインの検索「MetaSlider」＞今すぐインストール＞有効化

新しいスライドショーを作成

MetaSlider＞Add New＞新しいスライドショーを作成

スライドを追加＞Main Options＞100％ Width

【 PR 】

当サイトの使用写真は主に加工や商用利用もOKで無料でダウンロードできる写真ACサイトの写真素材を利用しています。高解像度の写真素材なら【写真AC】無料会員登録はこちら

作成したスライドショーのショートコード確認

ショートコードのID番号を確認

CSSを “style.css” に追加

MetaSliderのショートコード追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加
「ショートコードID番号」にMetaSliderで確認した「番号」を追加

#metaslider-id-ショートコードID番号 {
	width: 100vw !important;
	margin: 0 calc(50% - 50vw);
	background-color: #000000; /*ヘッダー背景色*/
	margin-top: -1px;
}
#metaslider_container_ショートコードID番号 img {
	object-fit: cover;
	margin-top: -80px ; /*スライド領域の位置*/
	height: 800px ; /*スライドの高さ*/
}

@media screen and (max-width: 960px){
#metaslider-id-ショートコードID番号 {
	background-color: transparent;
}
#metaslider_container_ショートコードID番号 img {
	 object-fit: cover ;
	 margin-top: -80px ; /*スライド領域の位置*/
	 height: 800px ; /*スライドの高さ*/
}
}
@media screen and (max-width: 600px){
#metaslider_container_ショートコードID番号 img {
	 object-fit: cover ;
	 margin-top: -80px ; /*スライド領域の位置*/
	 height: 400px ; /*スライドの高さ*/
}
}

Note

2行目の “100vw” の “!important” は外さないで下さい。
4行目の “background-color” ヘッダーの背景色と合わせて下さい。
9行目のスライド領域の位置については適宜数値を調整して下さい。
画面サイズに合わせて “height” の数値を調整して下さい。

コンテンツ上部の余白を削除

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

.content,
.content-in,
.main,
.entry-content {
	  margin-top: 0px;
	  padding-top: 0px;
}

要素の重なり順を “z-index” で調整