ヘッダー画像の下にメニューリンクをつける方法
この記事では、上の画像のようにヘッダー画像の下にメニューリンクをつける方法をご紹介します。
フリースペースと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;
}
スキンの幅や文字色等、数字の右に項目を書いておいたので分かると思いますが、各自のヘッダー画像のサイズを考慮してご自身でサイズや色は変更してみて下さいね。
CSS不要～文字に背景色（マーカー）をつける方法 CSS不要～文字を枠で囲む最も簡単な方法 QRコードの作成方法
ご質問があればこちらの無料相談フォームからお気軽にご連絡下さい！
【是非読んでいただきたいページ（業種別）】
・自宅教室・スクールの売上アップ法
・結婚相談所（婚活アドバイザー）
・アイドル・読モが売れる条件と方法
・美容師さんの給料
こちらもよかったら懐かしんでくださいね（笑）
サファリに掲載された私のインタビュー記事です。
↑経済界のパーティで安倍首相と。
アメーバニュースにも掲載されました。
