ブログのPCサイトの表示では、ヘッダーとフッターを画面いっぱいに広げた方が記事本文との境目か分かり易く見映えが良いですよね😋。
|
| PCサイトでのブログの見映えを改善します！ |
今回はこの設定方法の紹介になります。
■Bloggerのヘッダーとフッターの背景色を画面いっぱいに広げる
●設定方法
以下ではBloggerのHTMLを編集します。編集する前に復旧できるように必ず忘れずにHTMLのバックアップを取ってから行ってください。
また、このHTMLの編集について本ブロブおよび筆者は一切の責任を負いません。参考にされる方は全て自己責任で実施してください。
以下の設定はBlogger管理画面の『テーマ』>『▼』>『HTMLを編集』画面で行います。
|
| Blogger管理画面の『テーマ』>『▼』>『HTMLを編集』でHTMLを編集します |
・ヘッダー、フッターの背景色の設定
本ブログのBlogger のテンプレート（『Simple Simple
Simple』）ではヘッダー、フッターのクラス（class）は以下のように定義されています。
- ヘッダー：header-outer
- メニュー：tabs-outer
- フッター：footer-outer
なので、このそれぞれにCSSで背景色（background-color）を設定すればOKです。
例えばヘッダーの背景色を設定するのであれば
.header-outer {
background-color: #ff0000;
}
のようにHTMLのCSS欄に記載すればOKです。
・ヘッダー、フッターの背景色を広げる設定
以下のコードをHTMLのCSS欄に追記すればOKです。
html {
overflow: auto;
}
body {
overflow: hidden;
}
.header-outer, .tabs-outer, .footer-outer{
margin: 0 -300%;
padding: 0 300%;
}
わずか12行です。とても簡単ですね😋。
実際のBloggerのHTML編集画面はこんな感じです。
|
| BloggerのHTML編集画面 |
このコードの意味するところはレイアウトのボックスからはみ出た部分をどうするか？という話だと思うのですが、すみません🙇♂ちゃんと解説できません😅。本記事が参照しているコチラ『フッターに背景色をつけてブラウザ画面いっぱいに広げる方法（メモロウ）』を参照ください。
●使用感（設定結果）
実際にサイトに適用するとこんな感じです。記事本文の幅は変わりませんが、ヘッダーの背景色（赤）は画面いっぱいに広がっていますね（分かり易いように誇張した配色にしています😅。）
|
| ヘッダーの背景色（赤）が広がりました！（分かり易い誇張した配色にしています😅） |
本方法はBloggerのテンプレートの基本構造（表示幅）を変更する必要がないので、とても簡単で導入しやすいですと思います😋。
●まとめ
CSSの編集により簡単に（わずか12行で）ヘッダーとフッターの背景色を画面いっぱいに広げることができました♪
こういった細かい修正・設定の積み重ねが、（あまり親切とは言えない😅）Bloggerを使いこなす上では必要ですね😋。
○参照サイト（外部リンク🔗）：
本記事を書くにあたっては以下のサイトを大変参考にさせていただいています。本記事で不明な点がある場合にはぜひ参照ください。
