【Cocoon】アイキャッチ画像を中央にする方法│CSS不要

今回は、CocoonのWordpress テーマを使用している方に、アイキャッチ画像を中央寄せにしたい方に読んでもらいたい記事です。

簡単にできるので、よかったらやってみてください。

CSSでコピペするものとCocoon設定から設定するもの両方を解説していきますね。

Cocoon設定でアイキャッチ画像を中央寄せにする方法

WordPress にログインをしてからCocoon設定→画像まで飛んでください

そこから下にスクロールをしてださい。

すると、アイキャッチ画像の表示のタグが書いているので、アイキャッチ画像の中央寄せにチェックを打ち保存をしてください。

アイキャッチ画像の中央寄せの仕方はこれで終わりになります。

また、ブログのカラム幅まで伸ばしたい方はアイキャッチ画像の中央寄せの下のところにある「アイキャッチ画像をカラム幅まで伸ばす」にチェックしましょう。

アイキャッチ画像を中央寄せにしたほうがとても見栄えはいいのでぜひ今回を機にしてみましょう。

画像を大きくするカラム幅まで伸ばす場合は写真が荒いものは見栄えが悪い場合があるのできれいな画像を使うことをおすすめします。

CSSでコピペをしてアイキャッチ画像を中央寄せにする方法は、まずはカスタムCSSに飛んでください（外観→カスタムCSS）

＊プラグイン「Custom　CSS」を新規プラグインの追加から入れてない人は導入してください。

以下のコードをコピペして記入。

.eye-catch img{margin: 0 auto;}

1	.eye-catch img{margin: 0 auto;}

上記で上手くいかない場合は下記のコードでやってみてください

.eye-catch-wrap{
  text-align: center;
}

.eye-catch-wrap{

text-align: center;

}

簡単にできるのは、Cocoon設定から行う方です。まずは自分でやってみましょう。