【Simplicity / Cocoon】アイキャッチをセンタリングする

WordPress仲間の皆さんこんにちは。アカネです。

わいひらさんが提供している WordPress 無料テーマ『Simplicity』と『Cocoon』では、メインカラム幅（それぞれ680px、800px）より小さい画像をアイキャッチに設定すると左寄せに表示されるように作られています。
今回はそれを中央寄せにカスタマイズしてみたいと思います。

いや、そもそもアイキャッチを作り直そうかな…とお考えですか？
アカネはブログのアイキャッチを1200×630で作成することをおすすめしています。
詳しくはこちらの記事にまとめましたのでよろしかったらご確認ください。

ブログのアイキャッチの最適サイズは？〜1200x630がおすすめな理由〜

アイキャッチのサイズで悩んだことありませんか？ アカネが1200x630でアイキャッチを作成する理由をまとめました。

tech.akanequest.jp

2018.06.19

Cocoon設定で簡単にカスタマイズ可能

2018年6月18日に公開されたCocoonバージョン0.7.1からアイキャッチの配置に関するカスタマイズ項目が増え、センタリングや引き伸ばしが簡単に設定できるようになりました。

Cocoon 0.7.1公開。アイキャッチ配置機能と細かな修正。

Cocoon 0.7.1のアップデート情報。

wp-cocoon.com

上記のように移動すると「アイキャッチの中央寄せ」という項目があります。これにチェックをつけて画面下部の保存ボタンを押すと、アイキャッチをセンタリングすることができます。

テーマを編集する

Simplicityの場合

WordPress設定画面で 外観＞テーマの編集 を選び、スタイルシート (style.css) を開いたら、「Simplicity子テーマ用のスタイルを書く」の下に書き込みましょう。

Cocoonの場合

WordPress設定画面で 外観＞テーマの編集 を選び、スタイルシート (style.css) を開いたら、「必要ならばここにコードを書く」の下に書き込みましょう。

追加するコード

下記のコードを書き込むことでアイキャッチが左寄せから中央寄せになります。

img.wp-post-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ちなみに右寄せにしたい場合はこんなかんじです（需要はなさそうですが…）

img.wp-post-image{
  display: block;
  margin-left: auto;
  margin-right: 0;
}

注意点

編集しても変化が見られない場合はキャッシュを消してみてください。
テーマのバージョンが異なる場合はそもそもの挙動が違ったり、上記の対応ではうまくいかないことがあります。