アメブロにメニューバーを付けるというカスタマイズの方法をまとめてみました。
(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;
}
(5)面倒だったら、お任せください
ヘッダ画像のデザイン、本文やサイドバーなどの色を変えるのとあわせて、デザイン料込みで40,000円＋税で作成します。
コメントをお書きください