うぃず FC2テンプレート

スマートフォンテンプレート【SP01_Blue】下部ナビゲーションである４つのアイコンのうち、一番右側のメールのアイコンのみが大きくなり、その他のアイコンの下に余白ができる不具合がありました。

その訂正を記します。お手数ですが、テンプレートの修正をお願い致します。



スポンサードリンク





このように、メールアイコンのみが大きくなってしまう問題が見られました。

CSS編集にて、以下のような箇所を、

/*============================================================
●●下部ナビ●●
============================================================*/
/****************************** ▼下部ナビ▼ */
#page_navi {
overflow:hidden;
border-bottom: 3px solid #B2D5E6; /* 枠線色 */

}
#page_navi li {
width:25%;
border: 0px solid #B2D5E6; /* 枠線色 */
}
#page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
#page_navi .login { float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .osieru { float:left; margin:0px;} /* ページトップ 右寄せ */

#page_navi li a {
display:block;
padding:0px;
text-align:center;
background-color:#7BC8F2; /* 背景色 */
color:#333333; /* 文字色 */
}
#page_navi li a:hover {
display:block;
padding:0px;
text-align:center;
background-color:#0099FF; /* 押した時の背景色 */
color:#FFFFFF; /* 押した時の文字色 */
}
/****************************** ▲下部ナビ▲ */

以下のように変更してください。

/*============================================================
●●下部ナビ●●
============================================================*/
/****************************** ▼下部ナビ▼ */
#page_navi {
overflow:hidden;
border-bottom: 3px solid #B2D5E6; /* 枠線色 */

}
#page_navi li {
min-width:25%;
border: 0px solid #B2D5E6; /* 枠線色 */
}
#page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
#page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
#page_navi .login { float:left; margin:0px;} /* ログイン 左寄せ */
#page_navi .osieru { float:left; margin:0px;} /* 教える 右寄せ */

#page_navi li a {
display:block;
padding:0px;
text-align:center;
background-color:#7BC8F2; /* 背景色 */
color:#333333; /* 文字色 */
}
#page_navi li a:hover {
display:block;
padding:0px;
text-align:center;
background-color:#0099FF; /* 押した時の背景色 */
color:#FFFFFF; /* 押した時の文字色 */
}
/****************************** ▲下部ナビ▲ */

青い箇所はレイアウト自体に問題はありませんが、表記をミスしています。

赤い箇所のようにwidthをmin-widthに変更してくださると、メールアイコンだけが大きくなってしまう問題を解決することができるかと思います。

よろしくお願い致します。

関連記事

• 【スマホ】メールアイコンが大きくなる不具合について
• スマートフォンテンプレートSP01_GrayとSP01_Blueの訂正箇所