SWELL｜投稿ページのアイキャッチをサイズ変更するCSS

SWELLの投稿ページのアイキャッチをサイズ変更するCSSです。

「ファーストビューが大切だ」と言われる昨今のSEOでは、アイキャッチもコンパクトにするのが良いかもしれません。
※ファーストビュー：Webページにアクセスした際に最初に表示される画面

全てのデバイスで一括変更する

PCもモバイルもまとめてサイズを変えたい場合はこちらのCSS。

「外観 > テーマ編集 > 子テーマのsytle.css」にコピペで貼り付けて使用してください。

/*** 記事のアイキャッチを小さくする ***/
	.p-articleThumb{
		width: 70%;
		margin: 1.5em auto 1em;
	}

また、以下の値を変更すればお好みで調整可能です。
画像を小さくすると余白も大きくなるので、あわせて調整してください。

・画像の大きさを変えたい
　→3行目 "width" の％を変更

・周囲の余白を調整したい
　→4行目 "margin" の値を変更（現在は上1.5em、下1em、左右はautoです）

デバイス別に変更する

デバイス毎に大きさを変更したい、という人はこちらのCSSを利用してください。

アイキャッチの比率を16:9にしているなら、モバイルは小さくし過ぎない方がいいと思います。

/* スマホ*/
@media (max-width:599px){
	.p-articleThumb{
		width : 85%;
		margin: 1.5em auto 0em;
	}
}
/* PC・タブレット */
@media (min-width:600px){
	.p-articleThumb{
    width: 70%;
		margin: 1.5em auto 1em;
	}
}

メディアクエリでブレイクポイントを作っているだけで、それ以外は全く同じです。

微調整は各自"width"や"margin"の値を書き換えてください。