うぃず FC2テンプレート

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

スポンサーサイト

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

  • 上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。


    スポンサードリンク



    2013.05.30 21:41|folder.png メニューバーcomment.png(3)

    ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したい

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

  • スクロールして自身のブログを観てくれるのも、すごく嬉しいものですが、ナビゲーション用として常にブログの上部に存在しつづけるような固定されたメニューバーの作成の仕方を紹介したいと思います。

    コピペするだけで、完成するのでぜひチャレンジしてみてください(´∀`)

    スクロールバーが表示されない不具合が生じていたようです。
    2013年8月18日に修正をしました。申し訳ありませんでした。



    スポンサードリンク


    HTML編集
    まずは、以下をコピーして<head>~</head>内に貼り付けてください。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



    また、以下もコピーして貼り付けてください。

    <script type="text/javascript">
    $(function() {
    var headerMenu = $('.headerMenu');
    var headerMenuTop = headerMenu.offset().top;
    $(window).scroll(function () {
    var winTop = $(this).scrollTop();
    if (winTop >= headerMenuTop) {
    headerMenu.addClass('headerFixed')
    } else if (winTop <= headerMenuTop) {
    headerMenu.removeClass('headerFixed')
    }
    });
    });
    </script>


    そして、以下の【上部固定バー】を、

    <!--▲▲ ヘッダー ▲▲-->
    <div id="outline_main">
    の下に貼り付けてください。

    (おそらく貼り付ける場所はどこでも大丈夫ですが、念のため)

    <!--▼ 上部固定バー ▼-->
    <div class="headerMenu">
    <ul id="header_menu_bar">
    <li><a href="<%url>">トップページ</a></li>
    <li><a href="<%url>archives.html">サイトマップ</a></li>
    <li><a href="<%url>blog-entry-1.html">記事1</a></li>
    <li><a href="<%url>blog-entry-2.html">記事2</a></li>
    <li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
    <li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
    <li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
    </ul>
    </div>
    <!--▲ 上部固定バー ▲-->



    スタイルシート編集

    スタイルシートの編集では、以下のものを追加してください。

    /***************************************** ▼上部固定バー▼ */
    .headerMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    }
    .headerFixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    }
    /***************************************** ▲上部固定バー▲ */



    また、こちらも追加してください。、

    /* ▼上部固定バー▼ */
    ul#header_menu_bar {
    font-size: 75%; /* 文字サイズ */
    height:35px; /* 高さ */
    background-color:#272727; /* 背景色 */
    padding-left:0px;
    margin-left:0px;
    margin-top:0px; /* 上の間隔 */
    margin-bottom:5px; /* 下の間隔 */
    }

    #header_menu_bar li {
    list-style-type:none;
    float:left;
    line-height:35px; /* 高さ */
    margin:0px;
    padding:0px;
    }

    #header_menu_bar li a {
    display:block;
    text-align:center;
    width:80px; /* 1つのメニューボタンの幅 */
    border-right:1px solid #333333; /* 区切り線 */
    color:#ffffff; /* リンク文字の色 */
    background-color:#272727; /* メニューボタンの背景 */
    text-decoration:none;
    }

    #header_menu_bar li a:hover{
    color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
    background-color:#474747; /* マウスが乗ったときの背景色 */
    text-decoration:none;
    }
    /* ▲上部固定バー▲ */



    あとは色や大きさ等を調整すれば、完成となります。

    関連記事
    更新おつかれさまです。コメントした内容に丁寧にお返事ありがとうございます。とてもうれしいです。

    こちらに書いてある通り編集してみたのですが、きちんと反映されませんでした。たぶん私の編集が間違っているのだと思います。。。

    メニューバーの角を丸くすることに関しても返信いただきましたが、そちらもうまくできませんでした。

    何度かチャレンジしてみます!
    [ 2013/06/05 05:48 ] [ 編集 ]
    <head>~</head>とはなんですか?無知ですいません。
    [ 2014/02/11 11:13 ] [ 編集 ]
    管理人のみ閲覧できます
    このコメントは管理人のみ閲覧できます
    [ 2014/08/07 19:26 ] [ 編集 ]
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。