WordPress仲間の皆さんこんにちは。アカネです。
わいひらさんが提供している WordPress 無料テーマ『Simplicity』と『Cocoon』では、メインカラム幅(それぞれ680px、800px)より小さい画像をアイキャッチに設定すると左寄せに表示されるように作られています。
今回はそれを中央寄せにカスタマイズしてみたいと思います。
いや、そもそもアイキャッチを作り直そうかな…とお考えですか?
アカネはブログのアイキャッチを1200×630で作成することをおすすめしています。
詳しくはこちらの記事にまとめましたのでよろしかったらご確認ください。
Cocoon設定で簡単にカスタマイズ可能
2018年6月18日に公開されたCocoonバージョン0.7.1からアイキャッチの配置に関するカスタマイズ項目が増え、センタリングや引き伸ばしが簡単に設定できるようになりました。
下記のように移動すると「アイキャッチの中央寄せ」という項目があります。
ダッシュボード > Cocoon設定 > 画像 > アイキャッチの表示
これにチェックをつけて画面下部の保存ボタンを押すと、アイキャッチをセンタリングすることができます。
テーマを編集する
Simplicityの場合
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;
}
注意点
編集しても変化が見られない場合はキャッシュを消してみてください。
テーマのバージョンが異なる場合はそもそもの挙動が違ったり、上記の対応ではうまくいかないことがあります。
この記事へのコメントはありません。