CSSの:target擬似クラスによるクリックで開くフッター

予備知識として、target擬似クラスと、そのメニューへの応用についてはCSS 3のセレクタ解説：:root、:not、:empty、:target - builderとCSS 3のセレクタ「:target」でタブメニューをつくる - builderが良記事だと思うのでそちらを。

で、今回の場合はさらに応用を利かせて、クリックしたら開いて、もう一度クリックしたら閉じるようにしてみました。まあ、要はコントローラー部分をtargetの中に入れて、targetの状態によって、表示されるアンカーが変わるようにしただけです。(↓↓の「カレンダー、最近の記事、コメント、トラックバックを見る」というアンカーをクリックしてみてください。(アンカーテキストが冗長過ぎる感じだけど、スペース余ってるしわかりやすいからこれでいいや。))

#blogfooter{
position:fixed;
bottom:0px;
height:2.2em;
width:95%;
overflow:hidden;
}
#blogfooter:target{
height:30em;
width:95%;
overflow:auto;
}
#footer_ctrl .open{
display:block;
}
#footer_ctrl .close{
display:none;
}
#blogfooter:target #footer_ctrl .open{
display:none;
}
#blogfooter:target #footer_ctrl .close{
display:block;
}
#footer_ctrl h4{
margin:.5em;
}

このままだとIEで残念なことになっているので、あとでIEでは普通にフッターが表示されるようにする。
あと、閉じた後に#が残るのがイマイチかな……これ、(リロード無しでは)消せないよね?

「はてブのフッターを小さく固定にする」をグリモンにしてみた - SO NOTE そうのて (；^ω^)を見て、CSSだけでできないかなーと思ってやってみた感じです。さすがにhtml弄れないはてブじゃ無理だけど。