Webサイトをデザインするにあたって、上下に表示するヘッダー及びフッターをブラウザの横幅全体に広がるように表示させ、画像や文章などのコンテンツは指定した横幅で中央に配置しページをレスポンシブ表示させたい場合に少しコツが必要でしたのでまとめてみました。 アメブロのヘッダー画像をカスタマイズする際、css編集用デザインを使用しますが、基本サイズではなく、画面いっぱいまで広げたい方もいますので、オリジナルサイズのヘッダー画像をアメブロに設置するカスタマイズ方法を紹介します。 通常通り横幅を決めたデザインをしたい場合は、各要素ごとに 「横幅：width」 と、 「margin-left:auto;」「margin-right:auto;」 をかけるようにしましょう。 たとえば本ページのヘッダーとコンテンツ部分には下記のようなスタイルが設定されています。 ヘッダー、フッターを幅いっぱいにしたくて検索してたらここのサイトにたどり着きました。 css等の初心者なのですが、貴殿のhpのようにこのヘッダー、フッターを上下それぞれ固定するには どのようなcssに何を記述すれば良いのでしょうか。 ヘッダータイトルロゴの横幅最大化について 先日、サンゴのテーマを購入しました。 SANGO Child: スタイルシート (style.css)にコードを書き込んでいますが、ロゴが小さいままです。 【続】横幅いっぱいのヘッダーやフッターにするcssテクニック 2013/06/29 追記 Twenty Twelve をテーマとして使用している場合、少々 CSS の記載に付け加えなければならない点がありました。 ブラウザ幅を広げても横幅いっぱいです。ただし問題点もあります。 元々が横幅1000ピクセルの画像なので横幅1000ピクセル以上になるとボケる; 背景画像を設定したときに画像のどの部分を表示するか決めているので、横幅が変化すると表示される領域がズレる 単刀直入に実装方法を紹介すると、背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。