FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
前の記事 ホーム 次の記事

【スマホ】メールアイコンが大きくなる不具合について

2013年10月05日13:34  カテゴリ:修正箇所
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

Screenshot_2013-10-05-13-19-46.png


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

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に変更してくださると、メールアイコンだけが大きくなってしまう問題を解決することができるかと思います。

よろしくお願い致します。
  • このエントリーをはてなブックマークに追加
  • 前の記事 ホーム 次の記事