ABI☆Website!!
アメブロのカスタマイズ方法

Home > ヘッダーの下にメニューを表示させる方法

FLVファイルを簡単に再生する方法を追加しました!NEW!
動画をダウンロードしたけど、.flvファイルが再生出来ない場合はコチラ。

【ABI☆Website!!】オススメコンテンツ
顔文字サービスエリア(12,090の顔文字を収録!)


いろいろな方のアメブロを拝見していると、ヘッダー画像の下にメニューボタンを設置されている方がチラホラと見受けられます。



ヘッダー画像下のメニューボタンは「目立つ」し「機能的」なので、自分のアメブロにも設置したい!と思って、リンク先がないけどカスタマイズしちゃいました。

ということで、今回はアメブロのヘッダー画像の下にリンクエリアを設置する方法を紹介していきます。

ボトルが並んでいる写真の下にある、4つ並んでいる赤色の部分がリンクエリアになります。赤色の中心にある白色のテキストをクリックすると、設定したリンク先へ飛ぶ仕組みになります。
アメブロのカスタマイズ方法

作業のステップはこれまでのカスタムと比べると多いですが、難しいことはありません。先ずは『CSSの編集』画面を開きます。(CSSの編集画面までの開き方はコチラをご参照ください)

そして、以下をコピーして、『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#wrap{
margin-top:50px;
}



/*-----ここまで-----*/


上記を貼り付けることで、ヘッダー画像の下にメニューを挿入するスペースを確保したことになります。(以下の画像の赤枠部分)
アメブロのカスタマイズ方法

次にフリースペースへ『どのリンク先のURLをどのメニューで表示するか』の登録をします。

以下の赤字標記部分を修正してフリースペースへ貼り付けてください。



<div id="topmenu">
<ul>
<li><a href="リンク先のURL">ホーム</a></li>
<li><a href="リンク先のURL">ペ タ</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
<li><a href="リンク先のURL">リンク</a></li>
</ul>
</div>



例えば、Yahoo!へリンクを貼りたい場合は以下のように書き換えます。
<li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>

【注意】上記は説明のため改行を入れてありますが、フリースペースは改行を受け付けないので、貼り付ける際は改行を削除し、以下の形にしてから貼り付けてください。



<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>



最後に『CSSの編集』画面を開き、以下をコピーして『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#topmenu {
width: 800px;/*ヘッダーの横幅サイズ*/
font-size:14px;/*文字のサイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*メニュー1つの横幅サイズ*/
margin: 0 2px;/*メニュー間の隙間幅*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*リンク文字の色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時の文字の色*/
background-color:#99FF00;/*オンマウス時の背景色*/
}

#frame {
position: relative;
}
#topmenu{
position: absolute;
top:0px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}

/*-----ここまで-----*/


最後にメニューの位置を下げるため、以下をコピーして『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#topmenu{
position: absolute;
top:300px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}



/*-----ここまで-----*/

赤字標記した数字は上から下へメニューを下げる数値です。数値が大きくなればなるほどメニューが下がります。ヘッダー画像とリンクメニューが重なる場合は、この数値を大きくして空白エリアにリンクメニューが来るよう調整してみてください。




Home

Contents

【基本】カスタマイズ対応のスキンを選びます

【基本】画像のアップ方法と画像URLの確認方法

簡単!ヘッダー画像を挿入する方法

ブログタイトルやブログ説明の文字の色を変更する方法

ヘッダー画像の上部にあるニックネームなどのリンクを消す方法

ブログタイトルやブログ説明の文字を消す方法

ヘッダー画像にトップページへのリンクを挿入する方法

記事のタイトルに画像を挿入する方法とタイトルの文字色を変更する方法

サイドバーの背景に色を付ける方法

サイドバー見出しの文字と背景色を変更する方法

ページナビゲーションを立体化させる方法

記事内のリンクに下線を付ける方法

サイドバー見出しの背景にブランク画像を挿入する方法

サイドバー見出しの背景に見出し付き画像を挿入する方法

ヘッダーの下にメニューを表示させる方法

Copyright(C) abiwebsite. All rights reserved.