Simplicity2でアイキャッチ画像を中央に表示する設定方法

ブログ記事先頭に表示させる画像「アイキャッチ画像」をせっせと手動で追加するという事をしておりました。

ところが私が利用しているWordplessテーマのSimplicity2では簡単に表示させる方法があったことをいまさらながら知りました。

今回はSimplicity2でアイキャッチ画像を簡単に挿入する設定方法を説明します。

Simplicity2のアイキャッチ画像設定

投稿の編集画面でアイキャッチ画像の設定はしていたんですよ。画面右に「アイキャッチ画像」としっかり書いてありましたので。

ただ、公開しても記事内には特に表示されないので、記事一覧とかのアイコン用の画像設定なんだろうと思っていました。

それで毎回、投稿の編集画面で先頭に画像を追加していたのですが。

あと1つ設定するだけだったんだね

そして「公開」を押せば設定完了です。とっても簡単！

それでは実際に表示されている様子を確認しましょう。

ズレてる！

画像を中央表示したい派には気になって仕方がない！

何とかならないかと探してみました

アイキャッチ画像を中央表示にする方法

アイキャッチ画像がズレて表示される原因は画像のサイズにありました。

Simplicity2ではデフォルトでのメインカラムの幅は680pix。

すだれもちがこのブログで使用している画像は、写真ACで拝借した最も小さい画像（Sサイズ）の幅は640pixです。

使用する画像の幅が640pixだと当然幅いっぱいには表示されないので、左に寄ってしまうのですね。

このアイキャッチ画像を中心に表示したい時には

「テーマの編集」でSimplicity2の子テーマのスタイルシート（style.css）に次のコードを追加で書き込みます。

/*アイキャッチ画像の中央表示
==============================*/
.eye-catch img {
  display: block;
  margin: 0 auto;
}

これで中央表示されるようになりました。

これでスッキリしましたね。あとは投稿本文から画像を消して終わりです。

これで気分よく記事投稿がはかどる…といいな

まとめ

見に来た人が気になるかどうかはわかりませんが、書いてる自分が気になってしまうのはどうにも気持ち悪いものです。

その点、調べるといろいろカスタマイズの方法が出てくるSimplicity2はありがたいですね。

関連記事

・「WordPressサイトで使うと便利なプラグイン紹介」