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

2014/02/11

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

(1)　リンク先を考える

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

自分のホームページに飛ばす

「テーマ」に分けた記事に飛ばす

テーマを「商品一覧」「会社概要」「料金表」などにするとホームページっぽくなります。

読者登録に誘導する

メッセージに誘導する

プロフィールページに飛ばす

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

<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-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;

}