Cocoon｜アイキャッチ画像を全幅表示する（左右の余白をなくす）

WordPress 無料テーマ『Cocoon』のアイキャッチ画像の左右の余白をなくし、横幅いっぱいまで表示するカスタマイズ方法をご紹介します。

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

アイキャッチ画像を全幅表示するカスタマイズのビフォーアフター

パソコン表示

スマホ表示

アイキャッチ画像を全幅表示するカスタマイズの流れ

1. WordPress 管理画面にアクセスする
2. 【外観】⇒【テーマエディター】をクリックする
3. カスタマイズ用コードをコピーする
4. コードをスタイルシート（style.css）に貼り付ける
5. 【ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る（図解）】をクリックしてください。それぞれの手順を画像付きで解説しています。

アイキャッチ画像を全幅表示するカスタマイズ用コード

/************************************
** アイキャッチ画像を全幅表示する
************************************/

/*枠組み*/
.eye-catch-wrap {
	margin-left: -29px; /*左の余白*/
	margin-right: -29px; /*右の余白*/
}

/*横幅 834px 以下に適用される*/
@media screen and (max-width: 834px){
	/*枠組み*/
	.eye-catch-wrap {
		margin-left: -20px; /*左の余白*/
		margin-right: -20px; /*右の余白*/
	}
}