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

Last updated: 2019/06/05

この記事を投稿した当時、Simplicityはバージョン2.6.0.9、Cocoonは一般公開前でバージョン0.4.9でした。

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

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

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

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

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

下記のように移動すると「アイキャッチの中央寄せ」という項目があります。

ダッシュボード＞ Cocoon設定＞画像＞アイキャッチの表示

これにチェックをつけて画面下部の保存ボタンを押すと、アイキャッチをセンタリングすることができます。

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;
}

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