【SWELL】投稿ページのアイキャッチをサイズ変更するCSS|ファーストビューを大切に

SWELLのアイキャッチは大きすぎる!

ファーストビューが大切だ」と言われる昨今のSEOでは、冒頭にでかでかとアイキャッチが表示されるのはあまりよろしくありません。※ファーストビュー:Webページにアクセスした際に最初に表示される画面

しかし、SWELLのカスタマイザーにあるのは、アイキャッチを非表示にするか、コンテンツ内に表示するか、コンテンツ上のタイトルの背景にするか、の三つの選択肢しかのみ。そこで今回は「投稿ページのアイキャッチ画像をサイズ変更するCSS」を紹介したいと思います。

CSSを適用すると以下のようになります。

目次

事前準備:投稿ページにアイキャッチを表示する

はじめに、紹介するCSSはSWELL側でアイキャッチを表示している前提になります。現在アイキャッチが表示されていないという場合は、カスタマイズから設定をONにしてください。

設定場所:外観 > カスタマイズ > 投稿・固定ページ > アイキャッチ画像 > 「本文の始めにアイキャッチ画像を表示」

swellのアイキャッチ画像設定

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

それでは、アイキャッチ画像の大きさを変更するCSSがこちらです。

PC・モバイルの両方を変更する

/*** 記事のアイキャッチを小さくする ***/
.p-articleThumb__img {
    width: 65%; /*画像サイズ*/
	margin:0 auto;
}
.p-articleThumb{
	margin:1em 0 -1.5em 0; /*周りの余白調整*/
}

外観 > テーマ編集 > 子テーマのsytle.css にそのままコピペで貼り付ければ適用されます。以下の値を変更すれば、サイズ感をお好みで調整可能です。

画像の大きさを変えたい
3行目 “width” の%を変更

周囲の余白を調整したい
7行目 “margin” の値を変更(現在は上1em、下-1.5em、左右0です)
画像を小さくすると余白が大きくなるので、一緒に調整してください。

CSSの適用後は、スマホでもサイズ感を確認しておきましょう。

SWELLのアイキャッチサイズ変更後のモバイル表示

PCだけ変更する

アイキャッチの比率を16:9にしていれば、モバイルでの表示はそれほど大きくなりません。

そのため、PCだけ表示を変えたいという人はこちらのCSSを利用してください。

@media only screen and (min-width:480px){
	.p-articleThumb__img {
		display: block;
		width: 65%;
		margin:0 auto;
	}
	.p-articleThumb{ /*周りの余白調整*/
		margin:1em 0 -1.5em 0;
	}
}

mediaクエリでモバイルを除外しているだけなので、使用方法は同じです。

まとめ

せっかく頑張って作ったアイキャッチは見てもらいたいですよね。しかし、大きすぎるアイキャッチはユーザーにとって邪魔なものです。

アイキャッチをオシャレにそれとなく見せつけるため、サイズ調整をして綺麗に表示しましょう!

その他SWELLの関連記事

目次
目次
閉じる