【WordPress/Cocoon】ウィンドウサイズを変えるとヘッダー画像の位置がずれて見切れてしまう時の対処法

こんにちは。

本日はWordPress/Cocoonの設定についてです。
最近ブログのヘッダーの画像を変更したのですが、ウィンドウサイズを変更するとヘッダー画像の位置がずれてしまい、せっかく格好いい横浜の景色が見切れてしまうという問題が発生しました。

そこで、どんなウィンドウサイズでもヘッダー画像の位置を固定して、横浜の景色を全て表示できるように試行錯誤をしました。

ようやく解決しましたので、解決方法をお話ししていきます！
本日はWordPress/Cocoonにて、ヘッダー画像が見切れてしまい困っている方必見の内容になっています。

【WordPress/Cocoon】ウィンドウサイズを変えるとヘッダー画像の位置がずれて見切れてしまう時の対処法

何もいじらずに単純にヘッダー画像を設定すると、このようになります。
こちらはPCの画面サイズです。横浜の景色が隠れてしまい、ランドマークタワーのてっぺんのみが見えています。

次に、タブレットの画面サイズに縮小してみます。
横浜の景色は見えるようになったのですが、全ては表示されていません。

マリンタワー以降は見切れてしまっています。

このように、ヘッダー画像の位置がずれ、見切れてしまう場合は、style.cssにおまじないを書き込む必要があります。

WordPressの管理画面から、外観→テーマエディターを開きます。
Cocoon Child: スタイルシート (style.css)に、以下のおまじないをコピペします。

/* ヘッダー画像の横幅を固定 */
.header {
background-size: contain;
}
.header div.header-in {
min-height: calc( ( 100vw - var( --scrollbar-width, 17px ) ) * 700 / 2388 );
}

これだけです！
たったこれだけで、ヘッダー画像が全て表示されるようになります。

後は、700 / 2388と書かれている箇所の分子をいじって調整します。

私の場合、例えば900/2388ですと以下のように、ヘッダー画像は全て表示されるのですが、グローバルメニューとの間に隙間ができてしまっています。

分子を減らして700/2388とするとこの隙間が無くなり、良い感じに配置されるようになりました。
横浜の景色も、見切れることがなく全て表示されます。

この分子の値は、ヘッダー画像の大きさによってちょうど良い値が異なるので、色々変更して試してみてくださいね！

コードを設定した後は、タブレットサイズでもヘッダー画像が全て表示されています。

スマホサイズでも問題なく表示されます。

ヘッダー画像の設定方法

一応、ヘッダー画像の設定方法もお話しします。
Cocoon設定→ヘッダーから、ヘッダー背景画像の箇所に、背景画像に設定したい画像を選択すれば、設定できます。

ウィンドウサイズを変えるとヘッダー画像の位置がずれて見切れてしまう時は、style.cssにコードを追加する

いかがでしたでしょうか？

これで、ヘッダー背景画像が全て、見切れることなく、表示されるようになったと思います。

WordPress/Cocoonの設定は、時折複雑な場合がありますよね。
本記事の内容が役に立ったら、是非以下のバナーをクリックして、ブログを応援していただけますと嬉しいです。
バナーをクリックしていただけると、本ブログのブログランキングが上がる仕組みになっています！