【cocoon】ヘッダー背景画像をbody幅に合わせて固定する方法

フランス お小遣いブロガーQA

 テーマ(cocoon)で、ヘッダー背景画像の横幅をbody幅に合わせ、そして、固定させて表示させたい・・。そこで今回は、このカスタマイズ方法についてまとめておきます。

 

 

cocoonのヘッダー背景画像の悩みと備忘録

ドア

 cocoonで、ヘッダー背景画像の画像設定はできたけど、ウィンドウの横幅を左右に伸び縮みさせると、広がってしまう。これをbody幅に合わせて固定させたい。

 

■イメージ1

イメージ1
(赤線はbody幅)

 

■イメージ2

イメージ2

(このようにしたい)

 

 cocoonのカスタマイズで、僕はこれが気になりました。なので、このカスタマイズ方法について、備忘録的にまとめておきます。読者の参考になればと思います。

では、さっそく説明します。

 

 

 -PR-

 

 

ヘッダー背景画像の設定

 WordPressを開き、「Cocoon設定」→「ヘッダー」タブ→「ヘッダー背景画像」で、ヘッダー背景画像を設定する。そうすれば、背景画像は設定されます。

 

イメージ3

 

 

 

ヘッダー背景画像をbody幅に固定

 WordPressを開き、「Cocoon設定」→「全体」タブ→「サイト幅の均一化」のチェックボックスに、

チェックを入れるとヘッダー背景画像の横幅がbody幅と同じになり固定されて表示されます。

 

(「全体タブ」をスクロールさせると中段あたりに、「サイト幅の均一化」項目があります)

 

イメージ4

 

要は、「サイト幅の均一化」にチェックを入れればokということです

 

これでヘッダー画像がボディー幅に固定されます

 

これがミソ

 背景画像の設定は、「ヘッダー」タブでするのに、body幅に合わせるのは「全体」タブでするのがミソかな。

(ちょっと、ややこしい)

 

 

僕は気になる

3人男v1

 ウィンドウを横に伸び縮みさせると、それに合わせてヘッダー背景画像が、無造作に横に伸び縮みするのは、僕は気になりました。

 でも、ネットでcocoonを使っている人を見てみると、気にならない人も多いようです。個人的なセンスかな・・。

 

 

まとめ

 テーマ(cocoon)で、ヘッダー背景画像をbody幅に合わせて固定させる方法でした。参考になればと思います。

 

 

●最後まで読んでいただきありがとうございました。

 

おしまい

 

タイトルとURLをコピーしました