前回の「ヘッダーナビを作る」に引き続き、今回は「フッターを作る」について実践してみようと思う。

フッターとはページの最下部にが表示される部分のことで、Bloggerには標準で特定のガジェットは用意されていない。なので、特に決まったガジェットを用意する必要はないが、多くのブログではコピーライト（著作権）の記入欄になっているので、それをデフォルトで表示させるような仕様で作っていきたいと思う。

ということで、今回は「フッター」の設置と、CSSでのデザインについてまとめておくことにする。

作業工程

</body>の上にHTMLを記述する

とりあえず、フッターには3列のガジェットを配置できるようにし、最下部にコピーライトを表示する仕様にした。フッターには必須のガジェットは無いので中身は何も記述していない。

その下にはコピーライトを表示させるようにし、ブログ名を自動で挿入するように設定した。管理者名の呼び出し方がわからなかったため、管理者名にしたい場合は<data:blog.title />部分を手書きで修正すれば変更できる。

CSSを記入する

CSSでフッター全体およびガジェットのデザインを整える。とりあえず、PC版では1列あたり25%の幅で横並びに表示させるようにし、スマホ用版ではフッターが左からタテ並びで一列あたりの幅が95%になるように設定した。レスポンシブデザインのブレークポイントは560pxにしたが、ここの設定は好みによるもの。

問題点と対策

フッターを固定すると、レイアウト画面が崩れてしまう問題

これが理想だが、こうするとレイアウト画面が崩れる

Bloggerではテンプレートで指定したデザインとレイアウト画面が連動する仕様になっている。
そのため、CSSの内容によっては全体のレイアウトが崩れたり、ガジェットが画面から外れたりする。

このような問題について、色々と試した結果は以下の通り。

display:flex; を使って最下部に固定した場合

ざっくり説明すると、HTMLではbodyをdisplay:flex;にして要素をタテ並びにし、min-heightを100vhに設定してフッターにmargin:topをかけると、空白部分が押し下げられてフッターを最下部に固定することができる。この方法は「css フッター 最下部に固定」などのキーワードでググれば見つけることができる。

WordPressでテーマを作った際はこの方法を採用したのだが、これをBloggerで使うと、ブラウザ上では上手く表示されるのだが、レイアウト画面が全体的に横並びになってしまいUIが大幅に下がってしまうという問題が発生する（レイアウトが崩れるだけで編集自体はできるが…）。というわけで、この方法は見送ることにした。

position:absolute; を使って最下部に固定した場合

ざっくり説明すると、HTMLではbodyにposition:relative;をかけて、フッターにposition:absolute;とbottom:0;をかけるとフッターを最下部に固定することができる。これは相対位置と絶対位置で配置を指定する方法で、上記と同様に「css フッター 最下部に固定」などのキーワードでググれば見つけることができる。

これをBloggerで使うと、ブラウザ上では上手く表示されるのだが、レイアウト画面でフッターが画面外に表示されて編集すらできない不具合が発生することがある。また、position:absolute;は要素の絶対位置を指定するため、メインとフッターの要素がかぶって表示される不具合が起こるかもしれない。そのため、この方法はBloggerでは使えないと判断した。

jQueryを使って最下部に固定した場合

jQueryを使ってfooterのIDを指定してフッターを下部に表示させることは可能である。しかし、この方法では処理を読み込む時にフッターが下に移動するように見え、レスポンシブで画面を切り替えた際に表示が崩れることがある。デザイン的に美しくないので、この方法も使えないと判断した。

対処法：最終的な落としどころ

他所様のテンプレートの記述を見てみると、特にフッターを最下部に固定する記述が見られない。これはブログという性質上、メインの部分に記事やサイドバーが画面をはみ出して表示されることが多いため、フッターは自然に最下部に固定されるという動きを見込んでのことだと思われる。

なので、自分も「フッターを最下部に固定」という記述はしない方法をとることにした。その代わり、念のためフッターの背景色を設定せず、bodyの背景色で表示されるようにし、メインの背景色は別に<div class="main-wrapper">を用意して ここに背景色を設定することで対処することにした。こうすることで、フッターの余った部分はメインとは異なる一色で最下部まで塗りつぶすことができるので、内容が少なくても違和感のない見た目を表現することができる。

HTML

上記のように、メイン・サイドバーの記述を <div class="main-wrapper"> で囲む。

CSS

上記のように、bodyの背景色をフッターの背景色にし、.main-wrapperにメイン部分の背景色を設定する。