HOME
INDEX
LOG IN
SEARCH
よく検索されるキーワード
ブログカード
初心者向け
トラブル対処
RWD
Validation
SEO
Tips
Smartphone
Responsive
Playground
上級者向け
CATEGORY
テンプレート (101)
┣
ブログ内限定配布 (7)
┣
リリーステンプレート早見表(表示タイプ別) (1)
┗
配布終了・旧作 (24)
利用上のお願い (5)
テンプレ不具合・修正など (99)
よくあるご質問「お困りですか?」 (3)
┗
ご質問の前に (2)
FC2不具合情報 (26)
割と重要なお知らせ (53)
カスタマイズ (168)
┗
SNS (5)
FC2ブログのあれこれ (155)
webのあれこれ (101)
雑記 (18)
┗
雑談 (5)
未分類(個人的テスト等) (23)
The other way round
Home
›
コメント編集
ありがとうございます :) ヘッダー背景の件、CSS追加の前に画像を少し編集された方が良いと思います。 Belongはヘッダーの縦幅が狭いので、スマホでの表示は良いとしてもパソコンでこの画像だと椅子の背が見えるだけで上部の空間などは見えなくなります。 これはレスポンシブの宿命なんですね (´・ω・`) レスポンシブデザインではブラウザ幅(画面幅)が広い時と狭い時、双方を考慮した画像選びもしなければいけません。 縦幅は変わらないけれども横幅は閲覧者の画面に左右されるわけで、チウさんは今回「横幅いっぱいに」をご希望なわけですからかなり横長になる場合も想定する必要があります。 ①cover値で敷いた場合(原寸) https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918a.jpg ②contain値で敷いた場合(原寸) https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918.jpg ③contain値で敷いた場合(画像縦幅修正) https://file.blog.fc2.com/vanillaice000/miscellaneous/1347918b.jpg 寸足らずを防いで全面敷きするのがcover値(代わりに見切れが多くなります)、寸足らずが発生しようとも原画をそのままの見た目で敷くのがcontain値です。 この画像の場合には余白(空間部分)がたまたま平坦なので背景色で補うことはできます。なので今回この画像についてはcontain値を採用される方がベター。 とはいえスクショをご覧頂いて分かる通りすごく小ぢんまりとした表示ですよね。これが良いのかどうかです (´・ω・`) あるいはヘッダーの縦幅を大きくするか。 ただ最近だと大きいヘッダーは好まれません。特にスマホからの閲覧者は巨大ヘッダーを嫌う傾向にあります。 ここは私が決めるべき内容ではありませんので、サンプルを見比べて頂きましていずれかを採用するか、あるいは画像を選び直すかのご判断をお願いします。 ①②③いずれを選択しても共通の作業 CSSソース(スタイルシート)末尾に以下を追加。 ① #header-banner { background: url(画像URL) center center /cover no-repeat; } ②と③ #header-banner { background: url(画像URL) center center /contain no-repeat rgb(242,242,242); } ③用の画像が必要な場合は以下を開いて保存してください。次回コメントを頂いた際に削除しますので必ず保存を行ってください。 https://file.blog.fc2.com/vanillaice000/miscellaneous/apartment-chair-contemporary-5099223.jpg * 上記画像以外でキャプチャに利用した画像は消去済みです。 よろしくお願いします。
SECRET
SEND
DELETE