Cocoonのヘッダー画像が切れないようにするCSS対処法!!
写真は記事とは一切関係ありません。
前回、「Cocoonにヘッダー画像を設定する方法」について説明しました。
その結果以下の表示結果となり
【パソコン】
スマホで表示させた時に、ヘッダー画像の両端が切れてしまうということが発生しました。
【スマホ(iPhone)】
この記事では、「Cocoonのヘッダー画像が切れないようにするCSS対処法!!」について説明します。
Cocoonのヘッダー画像が切れないようにするCSSの説明
「Cocoonのヘッダー画像が切れないようにする」には、 CSSのbackground-sizeのプロパティcontain（背景画像全体が見える）を指定し、ヘッダー画像が切れないようにするために以下のCSSを追加します。
.header {
background-size: contain;
}
.header div.header-in {
min-height: calc( ( 100vw - var( --scrollbar-width, 17px)) * 300 / 1240);
}
上記のCSSを説明すると以下のようになります。
.header div.header-in
⇒ ヘッダー画像を横一杯に広げた高さにする。
min-height: calc( ( 100vw - var( --scrollbar-width, 17px)) * 300 / 1240)
⇒ 1240px ✕ 300px の縦横比で計算する。
--scrollbar-width, 17px
⇒ 誤差が生じないようにスクロールバー幅の17pxを指定する。
では、実際に行ってみましょう。
Cocoonのヘッダー画像が切れないようにするCSSの追加手順
(1) ブラウザに以下のURLを入力し「WordPress管理画面」に接続します。
https://あなたのドメイン/wp-admin
(2)「ユーザー名」と「パスワード」を入力し「ログイン」ボタンをクリックします。
(3) サイドバーのメニューから「外観」→「カスタマイズ」を選択します。
(4) 「追加CSS」をクリック
(5) 「追加CSS」にて下へスクロールする。
(6) CSSを赤枠に張り付ける。
(7) CSSを貼り付けたら「公開」ボタンをクリック
(8) ボタンが「公開済み」に変わる。
以上でCSSの追加は完了です。
Cocoonのヘッダー画像が切れていないかの確認
ブラウザにてCocoonのヘッダー画像が切れていないかを確認します。
●パソコン
パソコンで確認を行った結果、ヘッダー画像は切れていません。
●スマートフォン(iPhone)
スマートフォンで確認したところヘッダー画像は切れていません。
まとめ
「Cocoonのヘッダー画像が切れないようにするCSS対処法!!」について説明いたしました。
初心者の方には、少し難易度が高いかもしょれませんが、手順に従って行えば、
簡単にできる作業です。
本手順により、パソコンでもスマートフォンでもCocoonのヘッダー画像が切れなくなります。
Cocoonインストールの際には、ぜひ、チャレンジしてみて下さい。
人気ブログランキング参加中！！
応援ポチお願いします。
コメントフォーム