ブログやHPでよく見かけるフッターアーカイブを設置
ホームページを作ってると「テンプレにリンクが少ない」と指摘を受け、サイトのフッターによくメニューリンクを設置することがあります。
ネットサーフィンなんかでもよく見かけるサイト最下部のサイトマップのようなものです。
これを又もや実験で設置いたしました。
スクロールが面倒くさいと思う方へ
左側の「▼」ボタンでページ下部へスクロールします。
HTMLは超簡単！（※タウンネットブログのみ）
どのテンプレにもフッターの開始タグは、
<div id="footer">～</div>
になっていると思います。
これに、
<div id="foot">
<div id="footin">
<$plugin_right>
</div>
</div>
もしくは、
<div id="foot">
<div id="footin">
<$plugin_right>
</div>
</div>
を入力するだけ。
お次はレイアウト(CSS)です。
以下のコードを入力するだけです。
#footer #footin .foot{
margin:0 auto;
padding:15px 0 0;
width:900px;
}
#footer #footin .foot .side{
margin:0;
padding:0 5px;
width:290px;/*余白が両サイド共に5pxだから*/
float:left;
}
#footer #footin .foot .side .side_title_head{
background:none;
color:#ffffff;
font-weight:bold;
font-size:large;
text-align:left;
border-bottom:1px solid #ffffff;
}
#footer #footin .foot .side .side_title_head .side_title{
color:#ffffff;
text-shadow:2px 2px 2px #000000;
}
#footer #footin .foot .side .side_body{
font-weight:normal;
font-size:small;
text-align:left;
}
#footer #footin .foot .side .side_body a{
color:#ffffff;
text-decoration:none;
}
#footer #footin .foot .side .side_body a:hover{
color:#ffff00;
text-decoration:underline;
}
最後にアーカイブの表示・非表示を個別に指定していきます。これを入力していないと全てのプラグインが出力(表示)されてしまいます。
#footer #footin .foot .tagcloud{display:none;}/*タグクラウド*/
#footer #footin .foot .calendar{display:none;}/*カレンダー*/
#footer #footin .foot .recententry{}/*最新記事*/
#footer #footin .foot .theme{}/*テーマ*/
#footer #footin .foot .archives{}/*月別*/
#footer #footin .foot .link{display:none;}/*検索*/
#footer #footin .foot .profile{display:none;}/*プロフィール*/
#footer #footin .foot .comment{display:none;}/*コメント*/
#footer #footin .foot .link{}/*リンク*/
#footer #footin .foot .qrcode{}/*QRコード*/
#footer #footin .foot .rss{}/*RSS*/
非表示にしたい箇所のみに{～}内にdisplay:none;を入力しましょう。
visibility:hidden;にしてしまうと、ぶっちゃけソースはあるけどスタイルでただ隠しているだけなので、#footer #footin .foot .side{～}で記述したpadding:0 5px;width:290px;により300px分の余計な幅が表示されます。
