アメブロにメニューバーをつけるカスタマイズ

　アメブロにメニューバーを付けるというカスタマイズの方法をまとめてみました。

こういう例が考えられます。参考にしてください。

• 自分のホームページに飛ばす
• 「テーマ」に分けた記事に飛ばす
  • テーマを「商品一覧」「会社概要」「料金表」などにするとホームページっぽくなります。
• 読者登録に誘導する
• メッセージに誘導する
• プロフィールページに飛ばす

<a href="_________">の下線部に、飛ばしたい先のURLを書き込んでください。例では　アメーバの「プロフィール」「読者登録」「メッセージ」などとホームページに飛ばしてますが、それ以外でも構いません。

例では、５個のメニューを作ってます。4個や６個等でも出来ます。　(4)でひとつひとつのワクの幅を決め直せば良いです。

<ul id="headerMenu"><li class="menu1"><a href="http://ameblo.jp/yourbridges">HOME</a></li><li class="menu2"><a href="http://profile.ameba.jp/yourbridges/">プロフィール</a></li><li class="menu3"><a href="http://blog.ameba.jp/reader.do?bnm=yourbridges">読者登録</a></li><li class="menu4"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=yourbridges">メッセージ</a></li><li class="menu5"><a href="http://www.kanburi.jp/" target="_blank">ホームページ</a></li></ul>

 (3-3) コンテンツエリア　のところに、メニューバーが入る空間を作ります。　

空間の高さを指定するのが　padding-top　です。

メニューバーの高さに合わせて　padding-top　という数字を調整します。

※メニューバーの高さを35pxに決めて、その上下に5pxずつの空間を作ると仮定しています。

/* (3-3) コンテンツエリア

--------------------------------------------*/

 

 

/* skinContentsArea コンテンツ980pxエリア */

.skinContentsArea{

    position: relative;

   padding-top: 45px;

/* 注 ベースのcssにwidth:980px;の記述有り */

}

一番最後にこれを追記

↓

 /* その他、拡張があれば記述 */

 

ul#headerMenu {

    width: 980px;

    height: 35px;

    position: absolute;

    left: 0;

    top: 5px;

    background-color: #FFFF00;

    margin: 0;

}

ul#headerMenu li {

    font-size: 15px;

    font-weight: bold;

    line-height: 35px;

    float: left;

    text-align: center;

    background-color: #CC0000;

    padding: 0;

}

ul#headerMenu li.menu1 {

    width: 196px;

    margin-right: 1px;

}

ul#headerMenu li.menu2 {

    width: 195px;

    margin-right: 1px;

}

ul#headerMenu li.menu3 {

    width: 195px;

    margin-right: 1px;

}

ul#headerMenu li.menu4 {

    width: 195px;

    margin-right: 1px;

}

ul#headerMenu li.menu5 {

    width: 195px;

}

ul#headerMenu li a {

    width: 100%;

    display: block;

    height: 40px;

    color: #FFFFFF;

}

　ヘッダ画像のデザイン、本文やサイドバーなどの色を変えるのとあわせて、デザイン料込みで40,000円＋税で作成します。