アメブロにメニューバーをつけるカスタマイズ
アメブロにメニューバーを付けるというカスタマイズの方法をまとめてみました。「CSS編集用デザイン」を使ってください。
カスタマイズ実例：ここからリンク
(1) メニューバーからのリンク先を考える
メニューバーは特定のページにジャンプしやすいように設置するもの。リンク先としては、こういう例が考えられます。参考にしてください。
自分のホームページに飛ばす
「テーマ」に分けた記事に飛ばす
テーマを「商品一覧」「会社概要」「料金表」などにするとホームページっぽくなります。
読者登録に誘導する
メッセージに誘導する
プロフィールページに飛ばす
(2)「フリースペース」に、リンク先に飛ばす為のHTMLタグを打ち込む
下記青文字が5個のメニューを作る場合のサンプルです。
<a href="_________">の下線部に、飛ばしたい先のURLを書き込んでください。
</a>の直前に、メニューバーに表示させたい文字を書いてください。
例では アメーバの「プロフィール」「読者登録」「メッセージ」などとホームページに飛ばしてますが、それ以外でも構いません。
例では、５個のメニューを作ってます。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>
※枠が6つの場合
<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></li><li class="menu6"><a href="#" target="_blank">6つ目の枠</a></li></ul>
そして注意！ 「配置設定」でフリースペースを「使用する機能」に移動してください
(3) メニューバーが入る空間をつくる
CSSを編集します。CSSのなかの、 (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に枠をつける
CSSの一番最後にこれを追記してください。※枠が5つの場合
↓
/* その他、拡張があれば記述 */
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;
}
※枠が6つの場合
/* その他、拡張があれば記述 */
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: 163px;
margin-right: 1px;
}
ul#headerMenu li.menu2 {
width: 163px;
margin-right: 1px;
}
ul#headerMenu li.menu3 {
width: 162px;
margin-right: 1px;
}
ul#headerMenu li.menu4 {
width: 162px;
margin-right: 1px;
}
ul#headerMenu li.menu5 {
width: 162px;
margin-right: 1px;
}
ul#headerMenu li.menu5 {
width: 163px;
}
ul#headerMenu li a {
width: 100%;
display: block;
height: 40px;
color: #FFFFFF;
}
自分で作るのは無理！とおもったらご相談ください。
貴方と一緒に考えながら目の前で メニューバー作成、ブログトップ画像（素材提供ください）制作と色のカスタマイズ セットで2時間20,000円！
