CSS フッターの下に隙間ができたときの対処

ページの中身が少なくフッターが浮いた状態になってみっともないことがある。
そんなときの解決方法。

FOOTERをWRAPPER の中に入れているときにはFOOTERの上にダミーのボックスを置き、それにFOOTERの高さと同じだけ「padding-bottom」するのが味噌。セレクターは「contents」とした。
それとWRAPPERは「position」を「relative」 に、FOOTERは「position」を「absolute」にしておく。
あとは普通にHTML、BODYとWRAPPERを「width: 100%」しれば完成。

参考にさせてもらったサイトはこちら
https://liginc.co.jp/designer/archives/6435

-----------------------------------

html,body{
     height:100%;
}
#wrapper{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}



しかし、FOOTERが400pxとか500pxとかデカい場合、この方法ではCONTENTの「padding」の分、空白部分が400pxとか500pxとかデカくなるのでみっともない。その場合は「background」か何かでごまかすしかなくなる。

div のhoverに「before」適用

HOVERにもコロンを二つ「::」つけることで疑似セレクターが適用できる

.contents-element a:hover::before{
content: "- > ";
}

投稿一覧にアイキャッチ

WordPressを使い始めたころからお世話になっている

「管理画面の投稿一覧にアイキャッチを表示する」スクリプト。


今回も使わせていただきました。


「野良プラグイン化」したものはダウンロードできなかったのですが、


functions.php　に記述する方で実装しました。


なぜデフォルトで実装されていないのかと不思議に思うほど実用的な機能です。


「 林家次男」さんのブログ
http://hayashikejinan.com/wordpress/tips/964/