うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
2013.10.05 13:34|folder.png 修正箇所comment.png(0)

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

  • このエントリーをはてなブックマークに追加

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

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

    関連記事
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム