左詰めのアイキャッチ画像をどうにかするブログ関連TwitterFacebookはてブPocket2018.11.20こんにちは、ゆんつです。僕はブログのテーマにCocoonを使っているのですが、自分のブログのデザインを見ていて思うことがあります。それはアイキャッチの画像が左より過ぎる!ということです。現在のアイキャッチ画像は左詰めで右に余白が沢山あるので、これを真ん中あたりに置きたいのです。今日はCocoonで左寄りのアイキャッチ画像をもっとバランスの良い配置にしようと思います。僕はブログのテーマにCocoonを使う前はSimplicity2を使っていました。Simplicity2のデフォルトのメインカラムの幅は680px。Cocoonのデフォルトのメインカラムの幅は800pxと、Simplicity2に比べて120pxも広くなりました。僕がブログに利用する画像の幅はいつも640pxなのですが、Simplicity2の時はメインカラムの幅とアイキャッチ画像の幅に大きな差が無かったのでアイキャッチ画像が左に寄っていることをほとんど感じませんでした。メインカラムが広がったことでアイキャッチが左に寄っている感がとても強くなりました。これを改善する方法は3つあります。1つはメインカラムの幅をSimplicity2と同じ680pxに変更する方法。1つはアイキャッチの画像をセンタリング(中央寄せ)にする方法。1つはアイキャッチ画像をカラム幅いっぱいに引き伸ばす方法です。どれもとても簡単に変更することが出来ます。メインカラムの幅を変更するWordPressのダッシュボードから「Cocoon設定」をクリック。「カラム」タブをクリック「コンテンツ幅」の数値を800pxから680pxに変更すれば、Simplicity2を使っていた時と同じカラムの幅になります。680pxに変更し、設定を保存してブログを確認します。Simplicity2の時と同じような見た目になりました。これによりアイキャッチ画像が左に寄りすぎている印象は改善しましたが、僕としてはせっかく広くなったメインカラムを狭くするのは勿体ない気がします。アイキャッチ画像のセンタリング、引き伸ばしダッシュボードから「Cocoon設定」をクリック。Cocoon設定の画面で「画像」タブをクリック。「アイキャッチの表示」の項目にある「アイキャッチの中央寄せ」にチェックを入れればアイキャッチ画像のセンタリングは完了です。「アイキャッチをカラム幅に引き伸ばす」をチェックすると、カラムの幅いっぱいにアイキャッチ画像が引き伸ばされます。最後に「変更をまとめて保存」ボタンをクリックし設定を保存します。ブログを確認してみましょう。BEFOREAFTER(「アイキャッチの中央寄せ」にチェック)AFTER(「アイキャッチをカラム幅に引き伸ばす」にチェック)僕としては「アイキャッチをカラム幅に引き伸ばす」が一番違和感がない見た目だと思います。まとめCocoonで「アイキャッチ画像が左に寄りすぎている」と感じるときは、カラム幅を狭くするか、アイキャッチ画像をセンタリングするかカラム幅に引き伸ばすことで違和感が無くなります。左詰めよりもど真ん中にドーンとアイキャッチ画像があった方が安定感があるような気がするので、しばらくこの状態で様子を見たいと思います。この状態では見にくいなどのご指摘がありましたら遠慮なく教えていただけると幸いです。それでは、またですー。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。