トップナビゲーション(横並びボタンの作り方)

JIMDOで、オリジナルページの申し込みをすると

サイドメニューが標準ボタンになり、トップページのナビゲーションがない。

 

そこで横向きのボタンを作る方法

JIMDOのHTMLは極めてシンプルに出来ている。

今回はヘッダの下に横方向のボタンを作る方法を書くことにする。

 

上部に位置するこのボタンは、基本的に増えたり減ったりしない、

不動のメニューをおくことが多い。

 

例えば、「ホームボタン」「会社概要」「お問合せ」「サイトナビ」といったものだ。

 

独自デザインからHTMLを選んび以下のように追加する。

<div id="topnavi">

  <ul>

    <li id="homebtn"><a href="/">HOME</a></li>

    <li id="companybtn"><a href="/会社概要">会社概要</a></li>

    <li id="callmebtn"><a href="/お問合せ">お問合せ</a></li>

  </ul>

  <hr class="clear" />

</div>

 

これを書き終わったら、次にCSSを編集する。

 

オリジナルのスタイルシートを書くのなら、スタイルシートの一番下に追加したほうがいい。

スタイルシートは書いた順番に実行されるため、上の方に書いても、あらかじめ書かれている

スタイルシートで、書き換えられてしまう可能性があるからだ。

 

/* clear */

 

hr.clear{

    clear:both;

    height:0px;

    border:none;

}

 

/* topnavi */

 

#topnavi{

    height:40px;

}

 

#topnavi ul{

    padding:0px;

    margin:0px;

    liststyle:none;

}

 

#topnavi ul li{

    width:120px;

    text-align:center;

    float:left;

    height:40px;

}

 

#topnavi ul li a{

    display:block;

    wisth:100%;

    height:40px;

    text-decoration:none;

    color:#333;

}

 

#topnavi ul li a:hover{

    color:#FF6;

    background:#eee;

}

 

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422