Cocoon

Cocoonのヘッダー画像が切れないようにするCSS対処法!!

目安時間 5分
  • コピーしました

写真は記事とは一切関係ありません。

 

前回、「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インストールの際には、ぜひ、チャレンジしてみて下さい。

 

人気ブログランキング参加中!!

応援ポチお願いします。

 

 

 

  • コピーしました

   Cocoon   0

この記事に関連する記事一覧

この記事を書いた人

根本裕樹
根本裕樹

初めまして、根本と言います。サラリーマンの傍ら豊かな老後を手に入れる為に、Googleアドセンスをメインにアフィリエイトを行っています。残念ながら日本人の9割の人は、現役時代に老後資金を作れない為、将来、下流老人(かりゅうろうじん)になります。あなたが、下流老人にならない為に、わたしがあなたのお手伝いをいたします。

コメントフォーム

名前  (必須)

メールアドレス (公開されません) (必須)

URL (空白でもOKです)

コメント

トラックバックURL: 
当サイト一押し教材

 管理人プロフィール

根本裕樹

根本裕樹

初めまして、根本と言います。サラリーマンの傍ら豊かな老後を手に入れる為に、Googleアドセンスをメインにアフィリエイトを行っています。残念ながら日本人の9割の人は、現役時代に老後資金を作れない為、将来、下流老人(かりゅうろうじん)になります。あなたが、下流老人にならない為に、わたしがあなたのお手伝いをいたします。

  最近の投稿
人気記事
カテゴリー