気になったことはなんでも調べてメモするブログ
  1. WordPress
  2. 484 view

【Simplicity / Cocoon】アイキャッチをセンタリングする

Last updated: 2019/06/05
この記事を投稿した当時、Simplicityはバージョン2.6.0.9、Cocoonは一般公開前でバージョン0.4.9でした。

WordPress仲間の皆さんこんにちは。アカネです。

わいひらさんが提供している WordPress 無料テーマ『Simplicity』と『Cocoon』では、メインカラム幅(それぞれ680px、800px)より小さい画像をアイキャッチに設定すると左寄せに表示されるように作られています。
今回はそれを中央寄せにカスタマイズしてみたいと思います。

いや、そもそもアイキャッチを作り直そうかな…とお考えですか?
アカネはブログのアイキャッチを1200×630で作成することをおすすめしています。
詳しくはこちらの記事にまとめましたのでよろしかったらご確認ください。

Cocoon設定で簡単にカスタマイズ可能

2018年6月18日に公開されたCocoonバージョン0.7.1からアイキャッチの配置に関するカスタマイズ項目が増え、センタリングや引き伸ばしが簡単に設定できるようになりました。

下記のように移動すると「アイキャッチの中央寄せ」という項目があります。

ダッシュボード > Cocoon設定 > 画像 > アイキャッチの表示

これにチェックをつけて画面下部の保存ボタンを押すと、アイキャッチをセンタリングすることができます。

テーマを編集する

Simplicityの場合

WordPress設定画面で 外観>テーマの編集 を選び、スタイルシート (style.css) を開いたら、「Simplicity子テーマ用のスタイルを書く」の下に書き込みましょう。

Cocoonの場合

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;
}

注意点

編集しても変化が見られない場合はキャッシュを消してみてください。
テーマのバージョンが異なる場合はそもそもの挙動が違ったり、上記の対応ではうまくいかないことがあります。




WordPressの最近記事

  1. 【TCD-ZERO】記事のタイトルをh1見出しにする

  2. 【TCD-ZERO】記事抜粋した末尾に「…」が表示されないようにする

  3. 【TCD-ZERO】記事一覧で (さらに…) と表示されてしまう問題を解決す…

  4. All In One WP Securityの初期設定で気を付けるポイント

  5. WordPressテーマを自作しよう(8)トップページと記事ページで別のものを表示する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP