エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

皆様の人生に最良のファーストステップを。福岡でWEB分析やホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Adobe Photshop・Illustrator、Excel等の講座やセミナーを開催しています。WEBサイトを作りたい!WEB分析を学びたい!とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります♪

WordPress/ヘッダー画像を横幅いっぱいに表示したい

time 2017/10/15

ヘッダー部分が寂しいので画像をドーンと表示させたいと思いテーマのカスタマイズを。

「カスタマイズ」>「ヘッダー画像」>「新規画像を追加」

良い感じにヘッダー画像が追加されました!

 

と、思いきや、画面サイズが大きくなると外側に余白が…。

これを全面表示にしたい!

 

ということで…考えたこと。

1.テーマを編集してヘッダー領域を広げる。

2.ヘッダーを消してCSSでバックグラウンドにする。

 

2.の方を選択。

とりあえずヘッダーを非表示の状態に戻します。

 

「カスタマイズ」>「追加CSS」

MENUの上の部分のクラス名を検索

追加CSSに空の状態でclassを追加。

 

とりあえず良い感じに。もうこのままでもいいかなぁ…。

と思いつつ、 位置が気になるので調整。

 

良い感じかなぁ、と思っていましたが、このままだとスマホで見た時に下に余白が出来てしまいます。

background-size:contain;

で最大サイズになるように背景画像を拡大縮小しているので、横長の画像の場合は画面の解像度が

 

■background-size:

auto
自動的に算出される(初期値)
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する。
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する。
長さ
背景画像の幅・高さを指定。100px 100pxなど。
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定。

 

とりあえず思いつくこと。

1.画面サイズに応じてヘッダー部分の上下幅を狭くする。

2.Media Queriesを使って、長方形に近いサイズの画像に変える。

 

Media Queriesについてはこのあたりを参考に

2.で対応してみることにします。

 

 

とりあえずこんな感じで、max-width: 640px(画面サイズ640px以下)になったときに横比が小さい画像に書き換えるようにしました。

横がはみ出すかどうかの調整は少しずつ確かめながら・・・。

 

細かく言えば多分どこかのサイズのタイミングで微調整が必要かと思いますが、とりあえずイメージに近い感じになりました。

もっといい方法が見つかったら追記したいと思います!

 

 

 

 

おすすめ記事

プロフィール

EGUWEB

EGUWEB

WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

2018年4月
« 3月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

カテゴリー

★今週の1冊★


%d人のブロガーが「いいね」をつけました。