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

当ページのリンクには広告が含まれています。
【Cocoon】アイキャッチ画像を中央寄せ
  • URLをコピーしました!
「アイキャッチ画像の中央寄せ」機能はCocoon 0.7.1で正式に実装されました。
「Cocoon設定」→「画像」タブ→「アイキャッチの表示」から「アイキャッチの中央寄せ」にチェックマークを入れてください。

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

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

 

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

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

スポンサーリンク
目次

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

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

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

.eye-catch img{
  margin: 0 auto;
}
CSSをカスタマイズするには「外観」→「テーマの編集」から必ず「小テーマ(Cocoon Child)」の「スタイルシート(style.css)」に追記しましょう。 CSSの変更が反映されない場合は[Ctrl]+[F5]ページキャッシュを削除してくださいね。

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

ちょっと解説

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

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

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

目次