左詰めのアイキャッチ画像をどうにかする

こんにちは、ゆんつです。

僕はブログのテーマにCocoonを使っているのですが、自分のブログのデザインを見ていて思うことがあります。

それは

アイキャッチの画像が左より過ぎる！

ということです。

現在のアイキャッチ画像は左詰めで右に余白が沢山あるので、これを真ん中あたりに置きたいのです。

今日はCocoonで左寄りのアイキャッチ画像をもっとバランスの良い配置にしようと思います。

左より見える原因

僕はブログのテーマにCocoonを使う前はSimplicity2を使っていました。

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

Cocoonのデフォルトのメインカラムの幅は800pxと、Simplicity2に比べて120pxも広くなりました。

僕がブログに利用する画像の幅はいつも640pxなのですが、Simplicity2の時はメインカラムの幅とアイキャッチ画像の幅に大きな差が無かったのでアイキャッチ画像が左に寄っていることをほとんど感じませんでした。

でもメインカラムが広がったことでアイキャッチが左に寄っている感がとても強くなりました。

これを改善する方法は3つあります。

どれもとても簡単に変更することが出来ます。

メインカラムの幅を変更する

WordPressのダッシュボードから「Cocoon設定」をクリック。

「カラム」タブをクリック

「コンテンツ幅」の数値を800pxから680pxに変更すれば、Simplicity2を使っていた時と同じカラムの幅になります。

680pxに変更し、設定を保存してブログを確認します。

Simplicity2の時と同じような見た目になりました。

これによりアイキャッチ画像が左に寄りすぎている印象は改善しましたが、僕としてはせっかく広くなったメインカラムを狭くするのは勿体ない気がします。

アイキャッチ画像のセンタリング、引き伸ばし

ダッシュボードから「Cocoon設定」をクリック。

Cocoon設定の画面で「画像」タブをクリック。

「アイキャッチの表示」の項目にある「アイキャッチの中央寄せ」にチェックを入れればアイキャッチ画像のセンタリングは完了です。

「アイキャッチをカラム幅に引き伸ばす」をチェックすると、カラムの幅いっぱいにアイキャッチ画像が引き伸ばされます。

最後に「変更をまとめて保存」ボタンをクリックし設定を保存します。

ブログを確認してみましょう。

BEFORE

AFTER（「アイキャッチの中央寄せ」にチェック）

AFTER（「アイキャッチをカラム幅に引き伸ばす」にチェック）

僕としては「アイキャッチをカラム幅に引き伸ばす」が一番違和感がない見た目だと思います。

まとめ

Cocoonで「アイキャッチ画像が左に寄りすぎている」と感じるときは、カラム幅を狭くするか、アイキャッチ画像をセンタリングするかカラム幅に引き伸ばすことで違和感が無くなります。

左詰めよりもど真ん中にドーンとアイキャッチ画像があった方が安定感があるような気がするので、しばらくこの状態で様子を見たいと思います。

この状態では見にくいなどのご指摘がありましたら遠慮なく教えていただけると幸いです。

それでは、またですー。