Simplicityを少し改造してみた part19 フッターデザイン案

僕がはじめてSimplicityをwordpressに導入した頃は、確か#containerの下に#footerがあったように思うんですが、現在Simplicity2になって#containerの中にfooterがあることに気が付きました(今頃ですが(笑)

つまり、

と思っていたのが、

このような感じで、Simplicity2では#containerの中に入っています。

うーむ、わかりづらい説明ですが、おそらくこの事の理由として、#mainの記事が少ない場合などにフッターが上部にせり上がって、画面下にスペースができる事が問題で、#containerの中に入れられたんだろうと思います。

実際の所、#body-inの中の#mainと#sidebarはfloatで左右に振ってあるので#body-in自体は高さはなく、clearfix等で現在の表示となっています。

またスマホなどにした時にスマホのホームボタンというのか、「アレ」が昔は本当のボタンでしたが、最近では画面の中に入ってシステムの一つとなっていたりして、position: fixedを入れたりすると何だかややこしいことになるというのもあるのかも知れません(ここは未検証)。

まぁぶっちゃけ、ボタンに隠れてフッターが見えようが見えよまいが、ホームボタンさえ動作するならどうでも良いといえばそうなんですけれども、せめてPC画面とかでは、ちょっといい感じにしてみたい。そんなことから次のサンプルを作ってみました。
スクロールが面倒くさいので、マウスのホィールではなくてスクロールバーを操作して下さい。

スライドして見えるフッター

See the Pen フッターデザイン案 by Hidekichi (@Hidekichi) on CodePen.

やってることはとても簡単です。が、ちょっと前提があります。またサンプルは、#containerの中に入っているfooter部分を操作して、#containerの後に入るようにしています。

まずフッターのサイズを決めておく必要があると言うこと。

ただし、これはjQuery等で後からフッターの高さなどを調べることもできるので必ずというわけではありませんが予め決めておいてデザインする方が良い場合が多いです。
中身の高さが可変であって、高さが状況により変わる場合があるのであれば、後でjQueryを追加しますので、それを参考までに。

なんだかんだの前に仕組みの説明

状態として、

となっている必要があります。これは前述したjQueryでやってもよいですし、PHPで位置を書き換えても良いかと思います。もちろんPHPでやった方が何かとさっくり行きますが、親テーマのアップデートで新しいものに置き換えられるため、アップデートの度にやり直す必要があります。

もしPHPでやる場合は、footer.phpの9行目あたりから始まるfooterからその閉じタグ(54行目あたり)までを、更にその下にある

に移動させます。くれぐれも閉じタグを間違ったり、コピペミスが無いようにして下さい。自信がない場合はjQueryでやっても良いかと思います。jQueryの場合、ちょっと要素を移動させる時にチラつきのようなものが見えたりします。がfooterで本来サイトにアクセスした時は気が付かないところなのでまぁ良いかと。

また、jQueryでは、PHPで移動した場合に、

が必要ありません。また念の為、PC以下の画面幅でフッターの位置が#containerの中から移動しないようにさせるために、

こうしておけば、画面幅が1024px以上の表示領域がない限りjQueryにてfooterが#containerと同じレベルに移動することはありません。

■#containerのcss

■footerのcss

おまけとして、

ここで重要なのが、#containerと#footerのz-indexとheight、#containerのmargin-bottomです。

#containerのz-index: 200
footerのz-index: 100

とすることで、アニメのセルが重なるように#containerとfooterが画面手前と背後に配置されます。これらz-indexはpositionがstatic以外の時に有効になるとかなんかそういう感じです。つまり、relative,absolute,fixedの場合に有効(おそらく。
ここから、

#containerをposition: relative;
footerをposition: fixed

としておきます。footerのposition: fixedは、位置を画面固定するためのものですが、どこの?というのが必要になりますので、footerには、bottom: 0、つまり画面下に固定、左側は動かさないのでleft: 0と言う感じにしてあります。

それぞれが前後に位置して、footerが画面下に固定となったら、それだけでほぼ完成ですが、スクロールをした時に、フッターが見えないので、#containerに対して、margin-bottomを入れるわけです。
margin-bottomは、下側にスペースを開けるということなので、ここをfooterの高さにすることでフッターがスクロールで徐々に表示されるという具合です。

なんてことはない、#containerの本来の高さにmargin-bottom(footerの高さ)を入れればスクロールはフッターの高さ分プラスされてフッターが表示されるだけの話です。margin-bottomはスペースですから透明ですしね。

それから、デフォルトでは、#containerの子要素であったfooterを#containerと同じレベルに持っていくということで、その#containerと同じ階層のfooterをセレクトするためには、間接セレクタ(~)が必要になります。つまり兄弟要素になった#containerとfooterをスタイルするという感じになります。

footerは色んな所で使われたりしますし、idやclassが付いているわけではないので、なかなか指定が難しいですが、このようにして間接セレクタを利用することで上手くスタイルすることができるという感じです。

フッターの高さが可変な場合

さて、後はフッターの高さを可変にする場合、フッターの高ささえわかれば、それを#containerのmargin-bottomに入れればよいわけですから、この場合は#footerの高さで良いかと思います。元々footer自体は高さを持たず、中の#footer等が高さを持つことになります。
ただし、#footerの中身がfloatしていたりする場合は、高さがない場合があるので、そういう場合はclearfixを入れて必ず高さが出るようにして下さい。

floatしている要素が入っている親要素に対して、

こうすれば、floatしている要素の親要素に高さが出ます。高さが出ればそのまわりの要素はその高さに押し広げられますので、なんとかなります。

このような感じで、footerHeightと言う変数に、#footerのマージン・パディングを含む高さを入れておいて、それを#footerの一番近い親要素(.closest())のfooter、つまり移動させたフッターに高さとして入れ、#containerのmargin-bottomにも同じ分だけの高さを入れます。

こうすることで、cssの高さが書いてあったとしてもjQueryでタグに直接入れた数値が優先されると思いますが、cssの#containerからmargin-bottomと、footerの方からheightを取り除くこともできます。

もしこれらがPCの画面幅以下の場合は適用されたくない場合は、メディアクエリを利用して、

などとして、64emつまり1024px以上の時だけ動作するようにすることができます。

フッターは格好良くデザインすると、とても見栄えが良いサイトの雰囲気を出すことができます(あくまで雰囲気)。サイトのロゴや、followボタン、各種リンク等を上手く配置して、それらを演出するように、今回のテクニックを使ってもらえれば良いなと思います。

スポンサーリンク

シェアする

フォローする