倉田俊相です。


自分でできる簡単なアメブロカスタマイズの中でもこちらの記事は、圧倒的な人気なので再度アップします。

アメブロ簡単カスタマイズ

ヘッダー画像の下にメニューリンクをつける方法





ヘッダー画像の下にメニューリンクをつける方法です。


フリースペースとCSSの編集を使いますが、基本的にコピペと数字の変更程度でできます。




まずは、フリースペースに以下を貼りつけて下さい。

<div id="topmenu"><ul><li><a href="URL">メニュー1</a></li><li><a href="URL">メニュー2</a></li><li><a href="URL">メニュー3</a></li><li><a href="URL">メニュー4</a></li><li><a href="URL">メニュー5</a></li></ul></div>


「URL」→飛ばしたいリンク先

「メニュー」→項目名にそれぞれご自身で直してください。


次にCSSの編集です。










以下を貼りつけて下さい。

/*--メニュー差し込みの空白設定--*/

#wrap{

margin-top:30px;

}

/*メニュー5個*/

#topmenu {

width: 760px;/*スキンの幅Ａ*/

font-size:14px;/*文字サイズ*/

font-weight:bold;/*太字*/

line-height:2;

display: block;

}

#topmenu ul{

margin:0;

padding:0;

}

#topmenu li {

width: 142px;/*1つの幅Ｂ*/

margin: 0 2px;/*メニューのスキマＣ*/

border: 3px double #ffffff;

background-color:pink;

text-align: center;/*中央寄せ*/

display:inline;

list-style: none;

float: left;

}

#topmenu li a {

color: #000000;/*文字色*/

border: 1px solid #ffffff;

margin: 1px;

text-decoration: none;

display: block;

}

#topmenu li a:hover {

color: #ffffff;/*オンマウス時文字色*/

background-color:#dc143c;/*オンマウス時背景色*/

}

#frame {

position: relative;

}

#topmenu{

position: absolute;

top:210px;/*上から*/

left:0px;/*左から*/

z-index: 100;

}

スキンの幅や文字色等、数字の右に項目を書いておいたので分かると思いますが、各自のヘッダー画像のサイズを考慮してご自身でサイズや色は変更してみて下さいね。

アメブロQRコードの作成方法

読者登録申請1000件の前に必ずやるべきこととは？

ヘッダー画像の下にメニューリンクをつける方法