「Cocoon設定」→「画像」タブ→「アイキャッチの表示」から「アイキャッチの中央寄せ」にチェックマークを入れてください。
こんにちは、バーチャル猫耳音楽ブロガー大学生ことさいとう(@S41T0H)です。
今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon(コクーン)」でアイキャッチ画像を中央寄せ(センタリング)するCSSカスタマイズ方法を紹介します。
公式フォーラムにも同様の質問が投稿されていましたので、お困りの方も多いと思います。
……といってもCSSちょっと書くだけなのですが……。
Cocoonでアイキャッチ画像を中央寄せするCSSカスタマイズ
というわけで早速カスタマイズしていきましょう。
下記のCSSサンプルをそのまま小テーマのstyle.cssに追記してください。
.eye-catch img{ margin: 0 auto; }
[Ctrl]+[F5]
でページキャッシュを削除してくださいね。サーバーキャッシュ系のプラグイン(LiteSpeed Cacheなど)を使用している場合はCSSキャッシュをパージすることもお忘れなく。
ちょっと解説
marginに2つの値を設定すると、1つめは上下、2つめは左右のmarginが指定できます。この場合は2つめの値にautoを指定することでブロックレベル要素であるimgの左右に自動的にmarginを指定してくれるので画像を中央寄せできるわけです(※text-align:center;
では動きません。)。
この設定だと左上のカテゴリタグが浮いてしまう(画像と一緒に動いてくれない)という問題もあったり。なんとかならないかなぁ。
Cocoon 0.5.3で動作確認していますが、今後のアップデートで使用できなくなる可能性もなくはないのでご了承ください。
【支援お待ちしております!】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)
継続的な更新・サポートのためにご支援お願いいたします……!
▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

その他のカスタマイズは下記ボタンから。
コメント
[…] 【WordPress】Cocoonでアイキャッチ画像を中央寄せするCSSカスタマイズこんにちは、バーチャル猫耳音楽ブロガー大学生ことさいとう(@S41T0H)です。今回はわいひらさん作成の最高な無料Wor […]