【Cocoon】アイキャッチ画像を中央寄せするCSSカスタマイズ

こんにちは、バーチャル猫耳音楽ブロガー大学生ことさいとう（@S41T0H）です。

今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon（コクーン）」でアイキャッチ画像を中央寄せ（センタリング）するCSSカスタマイズ方法を紹介します。

公式フォーラムにも同様の質問が投稿されていましたので、お困りの方も多いと思います。

……といってもCSSちょっと書くだけなのですが……。

Cocoonでアイキャッチ画像を中央寄せするCSSカスタマイズ

というわけで早速カスタマイズしていきましょう。

下記のCSSサンプルをそのまま小テーマのstyle.cssに追記してください。

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

サーバーキャッシュ系のプラグイン（LiteSpeed Cacheなど）を使用している場合はCSSキャッシュをパージすることもお忘れなく。

ちょっと解説

marginに2つの値を設定すると、1つめは上下、2つめは左右のmarginが指定できます。この場合は2つめの値にautoを指定することでブロックレベル要素であるimgの左右に自動的にmarginを指定してくれるので画像を中央寄せできるわけです（※text-align:center;では動きません。）。

この設定だと左上のカテゴリタグが浮いてしまう（画像と一緒に動いてくれない）という問題もあったり。なんとかならないかなぁ。

Cocoon 0.5.3で動作確認していますが、今後のアップデートで使用できなくなる可能性もなくはないのでご了承ください。

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！

今後の記事執筆の励みになります！を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。