2013.08.27 変更来歴
フッターナビはアメーバ側で変更がありました。
一部修正（背景画像など）
● 注意：角丸は、ＩＥの場合はＩＥ９から可能です
◆ 右下のフッターナビの位置調整
① 右上
/* ------------------------------------------------------- */
/* 右下のフッターナビを右上へ */
/* ------------------------------------------------------- */
.footerNav {
top:15px;/* 上からの位置 */
right:15px;/* 右からの位置 */
}
② 右下
/* ------------------------------------------------------- */
/* 右下のフッターナビを左下へ */
/* ------------------------------------------------------- */
.footerNav {
left:15px;/* 左からの位置 */
bottom:15px;/* 下からの位置 */
}
③ 左上
/* ------------------------------------------------------- */
/* 右下のフッターナビを左上へ */
/* ------------------------------------------------------- */
.footerNav {
left:15px;/* 左からの位置 */
top:15px;/* 上からの位置 */
}
④ 右下（現状）
/* ------------------------------------------------------- */
/* 右下のフッターナビを右下へ */
/* ------------------------------------------------------- */
.footerNav {
right:15px;/* 右からの位置 */
bottom:15px;/* 下からの位置 */
}
◆ 右下のフッターナビの文字の色・大きさ・太さ・種類
① 文字の色・大きさ・太さ・種類
/* ------------------------------------------------------- */
/* 右下のフッターナビの文字の調整 */
/* ------------------------------------------------------- */
.footerNav a:focus, .footerNav a:hover, .footerNav a {
color: #ff00ff !important;/* 文字の色 */
font-size:16px !important;/* 大きさ */
font-weight:bold !important;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ﾎﾟｯﾌﾟ体";/* 文字の種類 */
}
② 個別調整
/* ------------------------------------------------------- */
/* 右下のフッターナビの文字の調整（個別） */
/* ------------------------------------------------------- */
.footerNav .footerNavNext{/* 次ページ */
color:#ffff00 !important;/* 文字の色 */
font-size:16px !important;/* 大きさ */
font-weight:bold !important;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ﾎﾟｯﾌﾟ体";/* 文字の種類 */
}
.footerNav .footerNavPrev{/* 前ページ */
color:#0000ff !important;/* 文字の色 */
font-size:14px !important;/* 大きさ */
font-weight:normal !important;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ﾎﾟｯﾌﾟ体";/* 文字の種類 */
}
.footerNav .footerNavTop{/* ▲ */
color:#ff00ff !important;/* 文字の色 */
font-size:12px !important;/* 大きさ */
font-weight:bold !important;/* bold→太い文字 normal→普通 */
font-family:"HGP創英角ﾎﾟｯﾌﾟ体";/* 文字の種類 */
}
◆ 右下のフッターナビの背景色＆ロールオーバー
① 背景色とロールオーバー
/* ------------------------------------------------------- */
/* 右下のフッターナビの背景色 */
/* ------------------------------------------------------- */
.footerNav a, .footerNav span {
background-image:none;/* 背景画像なし */
background-color:#ffccff;/* 背景色 */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
/* ------------------------------------------------------- */
/* 右下のフッターナビの背景色のロールオーバー */
/* ------------------------------------------------------- */
.footerNav a:hover, .footerNav span:hover {
background-image:none;/* 背景画像なし */
background-color:#ccffcc;/* 背景色 */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
◆ 横幅調整
① 横幅の調整（例）
/* ------------------------------------------------------- */
/* 右下のフッターナビの横幅調整 */
/* ------------------------------------------------------- */
.footerNav a, .footerNav span {
background-image:none;/* 背景画像なし */
background-color:#ffccff !important;/* 背景色 */
width:100px;/* 横幅 */
}
.footerNav{
right:30px;/* 右からの位置 */
width:100px;/* 横幅 */
}
◆ 右下のフッターナビの削除
① 削除
/* ------------------------------------------------------- */
/* 右下のフッターナビを消す */
/* ------------------------------------------------------- */
.footerNav {
display:none !important;
}
◆ 画像を作れば画像も可能です
● 参考
① 現在使われている画像
② 昔の画像
③ 現在のＣＳＳは下記のようになっています
.footerNav a, .footerNav span {
background-image: url("http://stat100.ameba.jp/common_style/img/skin/orgn_parts/footer_nav/footer_nav_newbg.png");
background-repeat: no-repeat;
display: block;
height: 40px;
overflow: hidden;
text-align: center;
text-decoration: none;
width: 46px;
}