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

整理収納雑貨の販売してます。お部屋をスッキリさせる、気に入ったものだけを販売。

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

(1) リンク先を考える

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

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

(2)「フリースペース」に、リンク先に飛ばす為のHTMLタグを打ち込む

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

例では、5個のメニューを作ってます。4個や6個等でも出来ます。 (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-3) コンテンツエリア のところに、メニューバーが入る空間を作ります。 

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

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

 

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

 

 

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

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

 

 

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

.skinContentsArea{

    position: relative;

   padding-top: 45px;

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

}

(4) CSSを編集して、 (2)のHTMLに枠をつける

一番最後にこれを追記

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

 

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;

}

(5)面倒だったら、お任せください

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

開催情報メールマガジンとお問合せ
ランチ交流会・講演会・ホームページ相談会・学習会の案内やお問合せはこちらから