うぃず FC2テンプレート

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

スポンサーサイト

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

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


    スポンサードリンク



    2012.12.13 18:06|folder.png メニューバーcomment.png(3)

    メニューバーの項目数を増やしたり減らしたりしたい

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

  • メニューバーの項目の数を増やしたり減らしたりする方法を紹介したいと思います。

    用途によっては少なくて良いかもしれないし、かなりの数になってしまったりするところですね。
    デフォルトでは5つに設定しています。(1番目、2番目、3番目、4番目、5番目としています。)

    ・すごく簡単な書き換え程度なので、慣れればあっという間に作業を終わらせることが出来ます。


    スポンサードリンク


    まずHTMLの編集を行います。
    以下のような記述を探してください。上部にあると思います。

    <!--▼ メニューバー ▼-->
    <ul id="menu_bar">
    <li><a href="<%url>">1番目</a></li>
    <li><a href="<%url>">2番目</a></li>
    <li><a href="<%url>">3番目</a></li>
    <li><a href="<%url>">4番目</a></li>
    <li><a href="<%url>">5番目</a></li>
    </ul>
    <!--▲ メニューバー ▲-->



    <%url>はブログのアドレスを指しています。例えば僕のブログだと、http://10lab.blog.fc2.com/に相当するものとなってます。

    記事をリンクさせたい場合、<%url>blog-entry-●●.html
    カテゴリをリンクさせたい場合、<%url>blog-category-●●.html
    といったように適宜加えてください。

    あとは、【1番目、2番目】といった名前を変更してください。

    その後、スタイルシートの変更を行います。

    /***************************************** ▼ メニューバー ▼ */
    #menu_bar li.menu_bar_end a {
    border-right:none;
    }

    ul#menu_bar {
    font-size: 80%; /* 文字サイズ */
    height:30px; /* 高さ */
    background-color:#333333; /* 背景色 */
    margin-top:0px; /* 上の間隔 */
    margin-bottom:0px; /* 下の間隔 */
    color:#ffffff; /* リンク文字の色 */
    background-color:#000000; /* メニューボタンの背景 */
    text-decoration:none;
    border-bottom:5px solid #666666; /* 下飾り線 */
    border-top:3px solid #DC143C; /* 区切り線 */
    }

    #menu_bar li {
    list-style-type:none;
    float:left;
    width:20%; /* 幅 */
    line-height:30px; /* 高さ */
    margin:0px;
    padding:0px;
    }

    #menu_bar li a {
    height: 30px;
    display:block;
    text-align:center;
    border-right:1px solid #ffffff; /* 区切り線 */
    color:#ffffff; /* リンク文字の色 */
    background-color:#333333; /* メニューボタンの背景 */
    text-decoration:none;
    border-bottom:5px solid #666666; /* 下飾り線 */
    }

    #menu_bar li a:hover{
    color:#FFFFFF; /* マウスが乗ったときのリンク文字の色 */
    background-color:#777777; /* マウスが乗ったときの背景色 */
    text-decoration:none;
    border-bottom:5px solid #DC143C; /* マウスが乗ったときの左飾り線 */
    }
    /***************************************** ▲ メニューバー ▲ */



    上記スタイルシートの赤い部分値を変更してください。
    値は、【100% 】÷【メニューバーの項目の数】です。7つの場合は約14%となります。
    メニューバーが5つの場合は20%となり割り切れますが、
    大抵の場合、割り切れないと思います。

    割り切れない場合は右端の方が余ります。


    関連記事
    メニューバーをブログの最も上に表示したい場合はどうすればいいですか?
    [ 2013/05/30 08:13 ] [ 編集 ]
    Re: タイトルなし
    > メニューバーをブログの最も上に表示したい場合はどうすればいいですか?

    コメントありがとうございます。

    記事として作成しましたので、ご覧ください。

    http://10lab.blog.fc2.com/blog-entry-21.html
    『メニューバーをブログの一番上に設置したい』
    [ 2013/05/30 12:04 ] [ 編集 ]
    承認待ちコメント
    このコメントは管理者の承認待ちです
    [ 2013/06/29 11:16 ] [ 編集 ]
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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

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