ヘッダー背景画像カスタマイズ時の考え方

投稿 2017年08月28日
1
カスタマイズ
InstructionCSS初心者向け

物の考え方についてです。
a way of thinking, a point of view です。

ヘッダーの背景に画像を入れたいなぁ
もしくは
既に設置されている背景を変更したいなぁ
と考えた時、
どんな画像をどのような形で収めるか
この思考作業のフローチャートというんでしょうか。
URLを入れ替えただけでしっくり来ることもあれば、そうでない場合もある わけなので、壁にぶち当たった時に「どう考えれば良いのか」というのを導く記事 (´・ω・`)

画像の見た目に囚われすぎてヘッダー自体に大きな修正(しかもアカンやつ)を加えてしまう方も結構いらっしゃいますので、自分がやりたいことと結果との折り合いがつくような方法を模索すべし。

理解しておくべきこと

「理解しておくべきこと」は

  • レスポンシブではあらゆる要素を可変にしなければいけない
  • 要素の高さ(height)はフリー(auto)にしておくべき
  • background-size: cover というCSSの特性を知る
  • background-size: cover を理解した上での使用画像選び

これから各項目を説明していきます。
と、その前にレスポンシブデザインテンプレートをカスタマイズする際に必ず注意して頂きたいのは
一定の横幅だけで作業を行わない
ということ。
パソコンのスクリーン上でブラウザのサイズを変更することがまず「無い」という方が陥りやすいのですが、レスポンシブというのはあらゆるデバイスをサポートするためのレイアウト手法です。
あらゆるデバイス = あらゆる画面サイズ
これは同義ですので、今見ているブラウザサイズ「だけ」を基準にしないことです。
自分のパソコンが1300px程度だからといって、他人様のそれも同じとは限りません。
ある方は1600pxあるかもしれないし、またある方は900pxしかないかもしれません。
パソコンだけでも画面サイズがいろいろあります。ましてスマホでは…

これだけ大きさに違いがあるわけですから、一定の見た目だけを考慮して作成してしまえば、もしかしたらスマホでは散々な結果になるかもしれません。
ですから

ブラウザを拡大したり縮小したりして、結果の確認を行いながら進めてください。

それが基本中の基本です。

レスポンシブではあらゆる要素が可変

可変 というのは サイズ のことです。
昔ながらの「固定幅テンプレート」というのは、ヘッダー画像設定にこんな説明があったかと思います。
〝画像は1200×600です〟
みたいな。
横1200縦600の画像を用意してくださいね、ということですよね。
それができる、というかそれをするのは 固定幅(ソリッド)デザイン だからです。
ソリッドレイアウトというのは全体幅が1200なら1200、900なら900と、予め決定してしまいます。
なので仮に1300pxで製作されたソリッドテンプレートを1000pxのデバイスから見た時には300px超過します。
超過したらどうなるか = 横スクロールバー出現
はみ出てしまったらはみ出た部分を見るには横方向にスクロールしてくれ、というのがソリッドデザインです。
レスポンシブというのは いかなる画面サイズに於いても横スクロールバーを出さないデザイン と言っても良いかもしれません。
横スクロールバーを出さないためには 絶対単位(px, emなど)を用いたサイズ指定を行わないこと が大条件になります。
だって1200pxの固定ヘッダーなんか作ったら320px程度のスマホでどえりゃーはみ出すでしょう (´・ω・`)

ヘッダーの縱橫サイズを固定する利点というのは、背景として用意した画像がピッタリ同じサイズならば
見切れも寸足らずも起こらない
ところにあります。
同じサイズの場所に同じサイズの画像を入れれば全く同じなわけですから物理的にそうなりますわね (´・ω・`)
でもデバイスやブラウザサイズがヘッダー横サイズ以下になれば、背景が見切れるとかいう以前に ブログが見切れます わね (´・ω・`)
ここまでの物理的事実のご理解、大丈夫でしょうか。
ここで意味がわからないとこの先もっとわからなくなります。

要素の高さ指定は行わない。つまりauto指定

auto という値は「制限なし」と置き換えても良いかと思います。
テキストなんかを打ち込んで行くと記事の縦幅は下へ下へと勝手に伸びていきますよね。
これにもしheight: 1000pxなどと制限があったならば、1000pxを超えたテキストは 本来あるべき範囲からはみ出してしまいます
それがいわゆる オーバーフロー(overflow) という状態です。
こんな感じ ↓ (スクショ)

ブルー背景の中に打ち込んだテキストが範囲を超過してはみ出しています。
こうしてオーバーフローした要素というのは、下に別の要素があった場合には完全に干渉してしまいます。
関連記事リストに被ってますよね。
だから迂闊にheightを指定してはいけない んです。

この論理的思考はヘッダーにも通じます。
パソコンから見た時にブログタイトルは一行ですか?
でもブラウザの幅を縮小したら?デバイスを変更してスマホになった時には?
テキストは折り返しますよ
テキストは横幅が足りなくなれば自動で下へと折り返します。
一行だったテキストが折り返されて二行・三行になったらどうなりますか?
こうなるかもしれません ↓

これはですね、ヘッダー背景画像の表示状態を見て
「もうちょっと縦を狭くしよう」だとか「もっと広くしよう」と思った時にやってしまいがちなんですね。
ヘッダーに限らず、一番多いのは ナビゲーションに縦幅を入れてしまう人 なんだけども。
ナビの体裁のために height: 50px とかね。
そんなことしたらちょっとブラウザを小さくしただけでリンクテキストがはみ出てしまいますよ。

というわけで、背景画像の見た目調整のつもりでヘッダーにheight指定。
これは一番やってはいけない下策です。
あらゆるものが可変である、という認識があればこういった下手を打つことはありません。

レスポンシブに必須の background-size: cover

background-size というプロパティに cover を指定する。
これはレスポンシブで背景画像を扱う際の定石です。
どういったものかを説明します。

見切れか寸足らずか。縦横比の関係

「ボックスに画像を収める」という作業工程を説明しようと思います。
この画像をサンプルとして。

(縮尺掲載 1000×500)

実寸は1000×500です。この画像を 250×125 の赤いボックスに収めるとどうなるか。

250は1000の1/4です。125は500の1/4。
つまり実寸の1/4縮尺でぴったり収まる計算。
縱橫がぴったり収まるということはつまり 縦横比がボックス・画像共に同じ ということです。
縦横比が全く同じであるならば、background-size(背景画像サイズ) は 縱橫共に100% で良いということですね。

ぴったり収まっているのでボックス後ろの赤い背景は見えません。
ここまでの理屈わかりますでしょうか。
ボックスは「親」です。%の指定というのは「親」のサイズを基準に何%、という指定ですので、
親の横サイズに対し100%
親の縦サイズに対し100%
とすれば子であるbackgroundは親と全く同じサイズになる、ということです。
親ボックスと子backgroundの縦横比が少しでも違うと全く同じにはなりません。
違う比を持つ親に対し 横も縦も100% という指定をしてしまうと、backgroundは歪んでしまいます
歪んだらアカンわな
歪ませずに収めましょう。

例) 親サイズが 250×250 の場合

backgroundの方の縦横比が壊れてしまった例です。
では縦横比を壊さないようにするにはどうしますか?

① widthを100%にした上で縦横比維持

横幅は綺麗に収まっていますが、縦幅が足りません。
これが 寸足らず という状態です。

② heightを100%にした上で縦横比維持

今度は縦は収まりましたが、画像のほとんどの部分が表示されていません。
これが 見切れ という状態です。

background(背景画像)の持つ縦横比と、それを収めるべき場所の縦横比が異なる場合、widthかheightの一方を100%基準にしてしまうと①②のような極端な状態陥るんですね。
そしてこの 縦横比違いはレスポンシブでは常につきまといます
先に説明をしましたが、ヘッダーにheight数値指定を行うべきではありません。
そんなことしたらブログタイトルが下へはみ出してしまう可能性大。
折り返しが起こっても包括できる auto というのはつまり「不定・未定」という意味でもあります。
固定幅テンプレと違い、ヘッダーの縦横比を全く同じに保つというのは基本的に不可能 なんです(例外あり。後述)
だってそもそもが、パソコンって横長でしょう。
でもスマホは縦長です。
なのでヘッダーでは横長と縦長の逆転現象が起きるに決まってるわけなんですよー (´・ω・`)

そこで登場するのが background-size: cover です。

良いんじゃないの?ん?どうですか?
background-sizeにcoverという 全画面敷き を適用し、表示位置を上下左右中央に合わせました。
それなりによきにはからってくれるのが background-size: cover です。
cover値は基本的に「見切れ」採用です。
寸足らずというのはものすごく見苦しいので、見切れの方で対処します。
見切れるわけですからオブジェクトのどこかは見られなくなりますが、そこは表示位置指定でなんとか操作します。

縦横比が異なる場所へ背景を敷くには、寸足らずか見切れいずれかが必ず発生する

というのを知ってください。というか物理的な事実です。
B5ファイルフォルダーの中にA4ファイルをそのままの形で入れるのは無理でしょう?
入れようと思えば紙を折りたたまなきゃしゃーないべ (´・ω・`)
なのでたまにある「画像を縱橫全部ちゃんと表示したい」というのはレスポンシブに於いてはかなりの無茶振りだというのをおわかり頂きたい ^^;
つか、物理法則無視できたら神。

background-size: cover は寸足らずを確実に防いでくれる(ただし代償として見切れ)

というのは是非理解しておいてください。
というのは、背景表示状態が非常に流動的になるからです。

パソコン
スマホ

オブジェクトの表示範囲が随分違いますよね。
でもこういうもんなんです!!!(いやマジで)
あまりにも違うから… という場合はヘッダーへのheightではなく padding で調整しなはれや。
padding というのはこういうの ↓

①ブルーのブロックに上下に50pxのpaddingを付けています。
②ブルーのブロックに上下に10pxのpaddingを付けています。

高さ違いますよね。
これはheightで行っているのではなく
要素の内側に詰め物をして余白とする
のがpadding
①ならテキストの上下に50pxの空間ができます。
②ならテキストの上下に10pxの空間ができます。
「テキストに余白がつく」わけではなく、上下に指定された数値の「詰め物」があるためそこにテキストは入り込めない。従って空白となる、という考え方です。
ですから詰め物がくっ付いているのはテキストではなく「ブルー背景」の方。
その空間がそのまま高さとなっているわけです。
これならオーバーフローは起こりません。テキストが折り返すまでブラウザ幅を縮小して確認を。

サンプルの場合には画面がスマホサイズになったらヘッダーの上下padding数値を小さく修正すれば良いですね。
逆にパソコンでのpaddingを大きくしても良いですし(見た目の折り合いがつくのならば)
画面サイズが○○以下になったら〜
という意味の記述を breakpoint と言いますが、それがどこにあるのかは…んー、作者に直接尋ねてちょ。

cover特性を理解した上での画像選出

background-size: cover が理解できましたら、どんな画像を選べば良いかもわかってきます。
画像選びの注意点

  • 解像度が足りているか
  • オブジェクトの位置が決められるか
  • パソコン閲覧時のヘッダー縦横比と画像の縦横比が似ているか(横長 or 縦長)

などです。

解像度が十分であるか

基準とするのは パソコンでの見た目 です。
解像度などは「大きい方」を基準にしなければいけません。
逆にボックス配置などは「小さい方」が基準。
ボックスってのは例えば外部プラグインとかそういうの。
パソコンは画面が広いから横500px固定のプラグインを入れてしまえ、とかはNG。
スマホではみ出します。
常に「最小320px」を意識してください。もちろん可変にできるならそれでOK。
width: 500px ははみ出します。
width: 100%; max-width: 500px ははみ出しません。
それがレスポンシブ。

参考

レスポンシブデザインで要素がはみ出す原因はwidth指定 - カスタマイズ

せっかくレスポンシブデザインを選んでも 要素がはみ出しては台無しです。これは見た目や使い勝手の問題も大きいですが、Googleセンセがはみ出し大嫌いです。その理由だって結局のところ「ユーザビリティ」の問題ですけども。レスポンシブテンプレートを選んだのだから、モバイルフレンドリーだね ♪と思ったら大間違いですテンプレート製作者の手の届かない領域「記事内容」までしっかり管理しましょう。...

話しを戻しまして、画像解像度ですが、長辺1500px以上が望ましいですね。
そして 容量削減は確実に行っておく と。
そのまま使うと結構な容量ありますので、サイズは変えずに容量だけを削減

参考

スマートフォンで画像がぼやける際の対処と画像容量削減 - カスタマイズ

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`)そしてもうひとつ画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...

オブジェクトの位置

その前に表示の基準位置を決めないといけません。
私のテンプレートだと大抵こんな感じ ↓

#header {
  background: url(アドレス) center center /cover no-repeat;
}

ショートハンドで一行指定です。テンプレートによっては下記のように

#header {
  background-image: url(アドレス);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

各プロパティを別々に表記している場合もあります。
赤字の center水平位置
緑字の center垂直位置
の指定です。

例1)

オブジェクトが水平「右」垂直「上」にあるので right top

例2)

オブジェクトが水平「左」垂直「下」にあるので left bottom

例を見てわかる通り、「右」と「左」あるいは「上」と「下」という 対角に位置するものを同時に表示することはできない んですね。
なんとなく上手く表示されるポイントはあるかもしれませんが、パソコンのこのサイズの時だけは見られる、とかそんな感じ。
特定ポイントでしかまともに見られないような表示は避けるべきですので、こういう画像は選ばない ↓
オブジェクトが左右にありますね。
水平centerに合わせれば両サイドは見切れます。
水平left, rightに合わせれば反対側は見切れます。

パソコン閲覧時のヘッダー縦横比と画像の縦横比

パソコンの見た目を基準にしてください。
先に述べました通り、パソコンとスマホでは縦横比率の逆転現象(横長が縦長に)が起こりますが、基準とするのはパソコンの方。
スマホの方が表示される範囲が多くなりますので、表示範囲の少なくなるパソコンの方こそ基準に。
ヘッダーが縦長という場合は稀です。ですから
横長の画像を選びましょう
でないと見切れ分が非常に多くなります。
そして極端に縦長の場合、横の寸法が全く足りずに調整のため 拡大処理 を受けることになります。
こんな ↓

まとめとおまけ「縦横比固定」

おまけとして「縦横比固定」
パソコンとスマホとで背景表示状態が異なるのはレスポンシブの宿命
みたいに書きましたが、実際には縦横比を固定することは可能です。
例えば Mochaテンプレート
こちらの スライダー は縦横比を固定していますので、パソコンとスマホの見た目が同じです。

パソコン
スマホ

パソコンでもスマホでも縦横比が変わりませんので背景画像の表示範囲が全く同じ。
これは 上にテキストが乗らないことが大前提 なんですね。
テキストがひとつでもあるとしつこいですが「折り返し」の可能性があるのでこういったことはできません。
「できない」というのは私が共有テンプレートとしてリリースしているからです。
ある人のブログタイトルはとっても短いかもしれない。
でもある人は逆にとっても長いかもしれない。
みなさんのブログタイトルやブログ説明文の長さを事前に知ることは不可能です。
そして「ブログタイトルは20文字まででお願いします」なんてこともできません。
なのでやりません。

ただみなさんがカスタマイズされる際には、ご自身の環境は把握されているはずですので「やってはいけないカスタマイズ」というわけではありません。
自分のブログだけを考えて良いわけですから、いけそうだと思えばやってみても良いと思います。
縦横比固定の仕方はまた後日機会があれば。
たぶん書かないけど ←

「縦横比は固定できない or してはいけない」という誤解を産まないためのおまけでした。

というわけで。
一番大切なのは background-size: cover の仕組みですかね。
これが理解できれば「画像を変更してみたはいいが結果がてんでダメ」といった事態を事前にある程度避けられるのではないでしょうか。
この機会に位置の合わせ方も覚えてくださいね。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

1 COMMENTS

There are no comments yet.
vanillaice (Akira)

Akira  

To なんとか百なんとかさん

嫌がらせが地味すぎ。もう少し頭を使ったらどうか (´・ω・`)
安定の理解力の無さ(笑)

2018/11/04 (Sun) 21:00