SWELLのアイキャッチ画像にYoutubeを設定したときのカスタマイズ（スマホだけフルワイド）

2023年12月11日2023年12月23日

URLをコピーしました！

WordPressテーマ「SWELL」にはアイキャッチ画像にYoutube動画を設定する機能があります。

SWELLの記事のアイキャッチ画像にYoutube動画を設定する方法

SWELL

記事のアイキャッチ画像の代わりにYouTube動画を表示する方法 | WordPressテーマ SWELL SWELLでは記事上部にアイキャッチ画像を表示させることができますが、この時表示される画像の代わりに、YouTube動画を埋め込むことができるようになりました。（ ver. 1.2….

このようにすれば記事のアイキャッチ画像にYoutube動画を設定できます。

YouTube動画が埋め込まれるのは記事ページのみです。
投稿一覧画像に表示するサムネイルは、通常通り「アイキャッチ画像」が使用されます。

css

このサイトではアイキャッチのYoutubeに枠線をつけて角を丸くしています。

/*Youtubeの角を丸くして枠線をつける*/
.p-articleThumb__youtube iframe{
	border:solid 1px #000;
	border-radius:8px;
}

Youtubeをアイキャッチに設定した場合と通常のアイキャッチ画像の見た目が揃うようにしたいので、アイキャッチ画像も同様に枠線をつけて角を丸くしています。

/*アイキャッチ画像の角を丸くして枠線をつける*/
.p-articleThumb__img{
	border:solid 1px #000;
	border-radius:8px;
}

スマホだけ左右の余白をゼロにして画面いっぱいにする

上述のYoutubeとアイキャッチ画像をスマホ表示のときだけ左右の余白をゼロにして画面いっぱいにします。

@media (max-width: 460px){
/*アイキャッチ画像 スマホだけフルワイド*/
	.p-articleThumb__img{
	min-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
　　/*左右のborderと角丸打消し*/
	border-left:none;
	border-right:none;
	border-radius:0px;
}
/*Youtubeアイキャッチ スマホだけフルワイド*/
	.p-articleThumb__youtube iframe{
	min-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
　　/*左右のborderと角丸打消し*/
	border-left:none;
	border-right:none;
	border-radius:0px;
}
}